Join

Joignez visuellement des éléments ensemble en supprimant l’espacement et les bordures entre eux.

Import

import { Join } from 'asterui'

Exemples

Boutons joints

Jointure horizontale basique avec boutons.

</>

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

Jointure verticale

Éléments joints verticalement.

</>

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 et bouton joints

Joindre un input avec un bouton pour la recherche ou les formulaires.

</>

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

Propriété	Description	Type	Par défaut
direction	Direction de jointure	'horizontal' | 'vertical'	'horizontal'
children	Éléments à joindre ensemble	React.ReactNode	-
className	Classes CSS supplémentaires	string	-