分隔线 (Dividers)

v-divider 组件用于分隔列表或布局的各个部分。

使用

最简单的分隔线即为一条水平线。

INFO

这个例子中用到了 border-opacity 这个实用类，如果 $utilities 被设为 false 将无法生效。关于实用类可以参考 SASS variables page 变量页面。

API

组件	描述
v-divider	主要部件

示例

属性

嵌入 (Inset)

嵌入的分隔线会向右缩进 72px。这样可以和列表的内容对齐。

垂直分隔线

垂直分隔线为您提供了更多用于独特布局的工具。

分隔线粗细 (Thickness)

通过设定 thickness 属性的值，我们可以调整分隔线的粗细。

杂项

纵向视图分割

创建自定义卡片以适应任何用例。

副标题分隔

分割线和副标题可以帮助分解内容，并可以使用相同的 inset 属性来相互对齐。

无障碍

默认情况下，v-divider 组件被分配了 WAI-ARIA 的 separator 角色，这表示分隔符“分隔并区分内容部分或菜单项组”。然而，有时分隔符只是为了使界面美观。在这些情况下，应使用 presentation 角色，这表示“其隐含的本地角色语义将不会映射到辅助功能 API 中的元素”。要在 v-divider 中覆盖默认的 separator 角色，只需在组件中添加 role="presentation" 属性。此外，v-divider 组件具有 aria-orientation="vertical" 属性。如果 vertical="true"，则会自动设置 aria-orientation="vertical"。如果 role="presentation"，aria-orientation="undefined" 的值将是 undefined，这是其默认值。