使用方法

Divider 用一条细线把相关内容分成若干区块，适合在表单、列表或设置项之间做视觉上的划分。需要为分区标注名称时，也可以把简短文字放在线条中间：

<script setup lang="ts">
import { Divider } from '@astryx-vue/core/Divider'
</script>

<template>
  <Divider label="或" />
</template>

最佳实践

指引	实践
推荐	相关内容区块之间使用 subtle 分隔线；需要更醒目的边界时，改用 strong。
推荐	分区需要一个可见的类别标题时，为分隔线添加 label，文字会居中显示在线条上。
避免	避免密集使用分隔线：能用留白和排版区分内容时，优先使用间距而不是线条。

示例

基本用法

水平分隔线是默认形态，会占满所在容器的可用宽度。

文字标签

or

传入 label 后文字会居中显示在线条中间，样式与辅助文字一致，适合“或”“以下为评论”这类简短标注。

变体

Subtle

Strong

线条提供 subtle 和 strong 两种强度：subtle 是默认值，视觉较轻；strong 使用强调边框色，适合需要明显边界的场合。

垂直

Left

Right

把 orientation 设为 vertical 可得到垂直分隔线，适合放在按钮、图标等固定高度的行内元素之间。

无障碍

分隔线本身没有交互行为，但辅助技术仍需要知道它是一条分隔线、朝向如何，才能在浏览时正确描述这个元素。组件会自动在根元素上补齐这部分语义：

• 根元素带有 role="separator"，并用 aria-orientation 反映当前的 orientation。
• 提供 label 时，标签文字会通过 aria-labelledby 成为分隔线的无障碍名称。

如果希望用别的文字为分隔线命名，可以设置 aria-label。一旦设置了 aria-label，组件就用它作为无障碍名称，不再自动关联 label。