Join

Une elementos visualmente eliminando el espaciado y los bordes entre ellos.

Importar

import { Join } from 'asterui'

Ejemplos

Botones Unidos

Unión horizontal básica con botones.

</>

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

Unión 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 y Botón Unidos

Une input con botón para búsqueda o formularios.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
direction	Dirección de unión	'horizontal' | 'vertical'	'horizontal'
children	Elementos a unir	React.ReactNode	-
className	Clases CSS adicionales	string	-