Space

Définissez un espacement cohérent entre les composants.

Import

import { Space } from 'asterui'

Exemples

Espace horizontal

Espacement horizontal par défaut entre les éléments.

import { Space, Button } from 'asterui'

function App() {
  return (
      <Space>
        <Button color="primary">Button 1</Button>
        <Button color="secondary">Button 2</Button>
        <Button color="accent">Button 3</Button>
      </Space>
    )
}

export default App

Espace vertical

Espacement vertical entre les éléments.

import { Space, Button } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <Button color="primary">Button 1</Button>
        <Button color="secondary">Button 2</Button>
        <Button color="accent">Button 3</Button>
      </Space>
    )
}

export default App

Différentes tailles

Contrôlez la taille de l'espacement avec la propriété size.

Extra Small

Spacing

Small

Spacing

Medium

Spacing

Large

Spacing

Extra Large

Spacing

import { Space, Badge } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <Space size="xs">
          <Badge>Extra Small</Badge>
          <Badge>Spacing</Badge>
        </Space>
  
        <Space size="sm">
          <Badge>Small</Badge>
          <Badge>Spacing</Badge>
        </Space>
  
        <Space size="md">
          <Badge>Medium</Badge>
          <Badge>Spacing</Badge>
        </Space>
  
        <Space size="lg">
          <Badge>Large</Badge>
          <Badge>Spacing</Badge>
        </Space>
  
        <Space size="xl">
          <Badge>Extra Large</Badge>
          <Badge>Spacing</Badge>
        </Space>
      </Space>
    )
}

export default App

Avec alignement

Alignez les éléments dans l'espace.

import { Space, Button } from 'asterui'

function App() {
  return (
      <Space align="center">
        <Button color="primary" size="xs">
          Small
        </Button>
        <Button color="secondary" size="md">
          Medium
        </Button>
        <Button color="accent" size="lg">
          Large
        </Button>
      </Space>
    )
}

export default App

Envelopper les éléments

Permettez aux éléments de passer à la ligne suivante.

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Tag 7

Tag 8

import { Space, Badge } from 'asterui'

function App() {
  return (
      <Space wrap>
        <Badge>Tag 1</Badge>
        <Badge>Tag 2</Badge>
        <Badge>Tag 3</Badge>
        <Badge>Tag 4</Badge>
        <Badge>Tag 5</Badge>
        <Badge>Tag 6</Badge>
        <Badge>Tag 7</Badge>
        <Badge>Tag 8</Badge>
      </Space>
    )
}

export default App

Espaces imbriqués

Combinez l'espacement vertical et horizontal.

Card 1

Card 2

import { Space, Card, Button } from 'asterui'

function App() {
  return (
      <Space direction="vertical">
        <Card title="Card 1">
          <Space>
            <Button color="primary" size="sm">
              Action 1
            </Button>
            <Button color="secondary" size="sm">
              Action 2
            </Button>
          </Space>
        </Card>
  
        <Card title="Card 2">
          <Space>
            <Button color="primary" size="sm">
              Action 1
            </Button>
            <Button color="secondary" size="sm">
              Action 2
            </Button>
          </Space>
        </Card>
      </Space>
    )
}

export default App

Justifier le contenu

Contrôlez la distribution des éléments le long de l'axe principal.

import { Space, Button } from 'asterui'

function App() {
  return (
      <Space justify="between" className="w-full">
        <Button variant="ghost">Cancel</Button>
        <Space>
          <Button color="secondary">Save Draft</Button>
          <Button color="primary">Submit</Button>
        </Space>
      </Space>
    )
}

export default App

Séparateur divisé

Insérez un élément séparateur entre les enfants.

import { Space, Divider } from 'asterui'

function App() {
  return (
      <Space split={<Divider type="vertical" />}>
        <a href="#">Home</a>
        <a href="#">Products</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </Space>
    )
}

export default App

API

Propriété	Description	Type	Défaut
`direction`	Direction de la disposition	`'horizontal' \| 'vertical'`	`'horizontal'`
`size`	Taille de l’espacement entre les enfants	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`'sm'`
`align`	Alignement des éléments	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`	`-`
`justify`	Justification des éléments le long de l’axe principal	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	`-`
`wrap`	Permettre l’enveloppement des éléments	`boolean`	`false`
`split`	Élément séparateur entre les enfants	`React.ReactNode`	`-`
`className`	Classes CSS supplémentaires	`string`	`-`

Accessibilité

Space est un utilitaire de disposition sans exigences d’accessibilité spécifiques
Maintient la structure sémantique des éléments enfants
La taille correspond à l’espacement Tailwind : xs=1, sm=2, md=4, lg=6, xl=8