Space 间距

在组件之间设置一致的间距。

导入

import { Space } from 'asterui'

示例

水平间距

元素之间的默认水平间距。

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

垂直间距

元素之间的垂直间距。

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

不同尺寸

使用 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

对齐

在空间内对齐项目。

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

换行项目

允许项目换行到下一行。

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

嵌套空间

组合垂直和水平间距。

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

对齐内容

控制项目沿主轴的分布方式。

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

分隔符

在子元素之间插入分隔符元素。

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

属性	描述	类型	默认值
`direction`	布局方向	`'horizontal' \| 'vertical'`	`'horizontal'`
`size`	子元素之间的间距大小	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	`'sm'`
`align`	项目对齐	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`	`-`
`justify`	沿主轴对齐项目	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	`-`
`wrap`	是否换行项目	`boolean`	`false`
`split`	子元素之间的分隔符元素	`React.ReactNode`	`-`
`className`	额外的 CSS 类	`string`	`-`

可访问性

Space 是一个布局实用程序,没有特定的可访问性要求
维护子元素的语义结构
尺寸映射到 Tailwind 间距: xs=1, sm=2, md=4, lg=6, xl=8