Divider 分隔线

分隔两段内容的细线。

邮箱

或者

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

<template>
  <Card class="w-full max-w-sm">
    <Stack>
      <Stack gap="xs">
        <Text size="sm">邮箱</Text>
        <Input model-value="shion@hikarinagi.moe" />
      </Stack>
      <Button>用邮箱登录</Button>
      <Divider>或者</Divider>
      <Button variant="outline" tone="neutral">使用通行密钥</Button>
    </Stack>
  </Card>
</template>

vue

用法

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

Divider 渲染一条一像素的线，颜色取自 --hn-line。默认为横向，占满容器的宽度。

上面的内容

下面的内容

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

<template>
  <Stack class="w-full max-w-sm">
    <Text>上面的内容</Text>
    <Divider />
    <Text>下面的内容</Text>
  </Stack>
</template>

vue

示例

带文字

默认插槽中有文字时，文字两侧各有一条线。这种形态只在横向时有效。

第 I 章

第二章

天文台的灯在午夜之后重新亮起。

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

<template>
  <Stack class="w-full max-w-sm">
    <Text>第 I 章</Text>
    <Divider>第二章</Divider>
    <Text>天文台的灯在午夜之后重新亮起。</Text>
  </Stack>
</template>

vue

竖线

设置 orientation="vertical" 后渲染为竖线。它的高度由 flex 容器的交叉轴决定，因此容器需要有确定的高度。

128 本

32 位译者

更新于三小时前

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

<template>
  <Inline class="h-8">
    <Text tone="muted" size="sm">128 本</Text>
    <Divider orientation="vertical" />
    <Text tone="muted" size="sm">32 位译者</Text>
    <Divider orientation="vertical" />
    <Text tone="muted" size="sm">更新于三小时前</Text>
  </Inline>
</template>

vue

装饰性

默认渲染为 role="separator"，屏幕阅读器会播报这处分隔。仅用于装饰的线设置 decorative，它不会进入无障碍树。

默认是语义分隔线，屏幕阅读器会读出分隔

decorative 的线只是装饰，不进无障碍树

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

<template>
  <Stack class="w-full max-w-sm">
    <Text tone="muted" size="sm">默认是语义分隔线，屏幕阅读器会读出分隔</Text>
    <Divider />
    <Text tone="muted" size="sm">decorative 的线只是装饰，不进无障碍树</Text>
    <Divider decorative />
  </Stack>
</template>

vue

API

属性	类型	默认值	说明
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	方向
`decorative`	`boolean`	`false`	是否仅作装饰
`class`	`string`	—	追加到线上的类名

插槽	说明
`default`	线中间的文字，仅横向时有效