Space 空白占位

在 flex 容器中占位的空白元素。

书库

128 本

import { Bell, Search } from 'lucide-react'
import { Card, Heading, IconButton, Inline, Space, Tag } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card className="w-full max-w-lg">
      <Inline>
        <Heading level={3} size="md">
          书库
        </Heading>
        <Tag>128 本</Tag>
        <Space />
        <IconButton label="搜索" variant="ghost">
          <Search />
        </IconButton>
        <IconButton label="通知" variant="ghost">
          <Bell />
        </IconButton>
      </Inline>
    </Card>
  )
}

tsx

用法

import { Space } from '@hina-ui/react'

Space 是一个空的占位元素，只在 flex 容器中有意义。它默认占据剩余空间，把两侧的内容推开。子元素之间统一的间距由容器的 gap 控制，Space 用于某一处需要单独撑开或单独留白的情况。

import { Button, Inline, Space } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline className="bg-inset w-full max-w-md rounded-md p-3">
      <Button size="sm" variant="soft" tone="neutral">
        左
      </Button>
      <Space />
      <Button size="sm" variant="soft" tone="neutral">
        右
      </Button>
    </Inline>
  )
}

tsx

示例

定长

给 size 之后不再弹性，占据固定尺寸，五档分别是 4、8、16、24 与 32 像素。

import { Card, Inline, Space, Stack, Text } from '@hina-ui/react'

const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

export default function Demo() {
  return (
    <Stack>
      {sizes.map(size => (
        <Stack key={size} gap="xs">
          <Text tone="muted" size="sm">
            {size}
          </Text>
          <Inline gap="none" className="bg-inset w-fit rounded-md p-2">
            <Card className="bg-surface size-8" padded={false} />
            <Space size={size} />
            <Card className="bg-surface size-8" padded={false} />
          </Inline>
        </Stack>
      ))}
    </Stack>
  )
}

tsx

API

属性	类型	默认值	说明
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'flex'`	`'flex'`	定长档位，`flex` 为弹性
`className`	`string`	—	追加至元素的类名

书库

用法

示例

定长

无障碍

API