Divider 分隔线

分隔两段内容的细线。

邮箱

或者

import { Button, Card, Divider, Input, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Card className="w-full max-w-sm">
      <Stack>
        <Stack gap="xs">
          <Text size="sm">邮箱</Text>
          <Input defaultValue="shion@hikarinagi.moe" />
        </Stack>
        <Button>用邮箱登录</Button>
        <Divider>或者</Divider>
        <Button variant="outline" tone="neutral">
          使用通行密钥
        </Button>
      </Stack>
    </Card>
  )
}

tsx

用法

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

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

上面的内容

下面的内容

import { Divider, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-sm">
      <Text>上面的内容</Text>
      <Divider />
      <Text>下面的内容</Text>
    </Stack>
  )
}

tsx

示例

带文字

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

第 I 章

第二章

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

import { Divider, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-sm">
      <Text>第 I 章</Text>
      <Divider>第二章</Divider>
      <Text>天文台的灯在午夜之后重新亮起。</Text>
    </Stack>
  )
}

tsx

竖线

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

128 本

32 位译者

更新于三小时前

import { Divider, Inline, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Inline className="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>
  )
}

tsx

装饰性

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

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

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

import { Divider, Stack, Text } from '@hina-ui/react'

export default function Demo() {
  return (
    <Stack className="w-full max-w-sm">
      <Text tone="muted" size="sm">
        默认是语义分隔线，屏幕阅读器会读出分隔
      </Text>
      <Divider />
      <Text tone="muted" size="sm">
        decorative 的线只是装饰，不进无障碍树
      </Text>
      <Divider decorative />
    </Stack>
  )
}

tsx

API

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

属性	说明
`children`	线中间的文字，仅横向时有效