Space

Establece espaciado consistente entre componentes.

Importar

import { Space } from 'asterui'

Ejemplos

Espacio horizontal

Espaciado horizontal predeterminado entre elementos.

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

Espacio vertical

Espaciado vertical entre elementos.

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

Diferentes tamaños

Controla el tamaño del espaciado con la prop 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

Con alineación

Alinea elementos dentro del espacio.

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

Envolver elementos

Permite que los elementos se envuelvan a la siguiente línea.

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

Espacios anidados

Combina espaciado vertical y 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

Justificar contenido

Controla cómo se distribuyen los elementos a lo largo del eje 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

Separador dividido

Inserta un elemento separador entre hijos.

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

Propiedad	Descripción	Tipo	Predeterminado
`direction`	Dirección del diseño	`'horizontal' \| 'vertical'`	`'horizontal'`
`size`	Tamaño de espaciado entre hijos	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`'sm'`
`align`	Alineación de elementos	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`	`-`
`justify`	Justificación de elementos a lo largo del eje principal	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	`-`
`wrap`	Si envolver elementos	`boolean`	`false`
`split`	Elemento separador entre hijos	`React.ReactNode`	`-`
`className`	Clases CSS adicionales	`string`	`-`

Accesibilidad

Space es una utilidad de diseño sin requisitos de accesibilidad específicos
Mantiene la estructura semántica de elementos hijos
El tamaño se mapea al espaciado de Tailwind: xs=1, sm=2, md=4, lg=6, xl=8