Join

通过删除它们之间的间距和边框，在视觉上将元素连接在一起。

导入

import { Join } from 'asterui'

示例

连接的按钮

带按钮的基础水平连接。

</>

Button 1Button 2Button 3

import { Join, Button } from 'asterui'

function App() {
  return (
      <Join>
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
      </Join>
    )
}

export default App

垂直连接

垂直连接的元素。

</>

TopMiddleBottom

import { Join, Button } from 'asterui'

function App() {
  return (
      <Join direction="vertical">
        <Button>Top</Button>
        <Button>Middle</Button>
        <Button>Bottom</Button>
      </Join>
    )
}

export default App

连接的输入和按钮

将输入与按钮连接用于搜索或表单。

</>

import { Join, Input, Button } from 'asterui'
import { MagnifyingGlassIcon } from '@aster-ui/icons'

function App() {
  return (
      <Join>
        <Input placeholder="Search..." />
        <Button color="primary">
          <MagnifyingGlassIcon />
        </Button>
      </Join>
    )
}

export default App

API

Join

属性	描述	类型	默认值
direction	连接方向	'horizontal' | 'vertical'	'horizontal'
children	要连接在一起的元素	React.ReactNode	-
className	额外的 CSS 类名	string	-