Space 空白占位

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

书库

128 本

<script setup lang="ts">
  import { Bell, Search } from '@lucide/vue'
  import { Card, Heading, IconButton, Inline, Space, Tag } from '@hina-ui/vue'
</script>

<template>
  <Card class="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>
</template>

vue

用法

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

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

<script setup lang="ts">
  import { Button, Inline, Space } from '@hina-ui/vue'
</script>

<template>
  <Inline class="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>
</template>

vue

示例

定长

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

<script setup lang="ts">
  import { Card, Inline, Space, Stack, Text } from '@hina-ui/vue'

  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
</script>

<template>
  <Stack>
    <Stack v-for="size in sizes" :key="size" gap="xs">
      <Text tone="muted" size="sm">{{ size }}</Text>
      <Inline gap="none" class="bg-inset w-fit rounded-md p-2">
        <Card class="bg-surface size-8" :padded="false" />
        <Space :size="size" />
        <Card class="bg-surface size-8" :padded="false" />
      </Inline>
    </Stack>
  </Stack>
</template>

vue

API

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

书库

用法

示例

定长

无障碍

API