Join

Junte elementos visualmente removendo espaçamento e bordas entre eles.

Importação

import { Join } from 'asterui'

Exemplos

Botões Unidos

Join horizontal básico com botões.

</>

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

Join Vertical

Elementos unidos verticalmente.

</>

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

Input e Botão Unidos

Una input com botão para pesquisa ou formulários.

</>

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

Propriedade	Descrição	Tipo	Padrão
direction	Direção do join	'horizontal' | 'vertical'	'horizontal'
children	Elementos para unir	React.ReactNode	-
className	Classes CSS adicionais	string	-