Divider 分割符

基础分割符

分割符主要是由直线和文字组成,通过slot传入分割线文案或者其他自定义内容,通过layout控制分隔符是垂直还是横向

在 Stackblitz 中打开

虚线样式

在 Stackblitz 中打开

Divider Props

名称类型默认值描述必传
alignStringcenter文本位置(仅在水平分割线有效)。可选项:left/right/centerN
contentString / Slot / Function-子元素。TS 类型:string \| TNode通用类型定义N
dashedBooleanfalse是否虚线(仅在水平分割线有效)N
defaultString / Slot / Function-子元素,同 content。TS 类型:string \| TNode通用类型定义N
layoutStringhorizontal分隔线类型有两种:水平和垂直。可选项:horizontal/verticalN

CSS Variables

组件提供了下列 CSS 变量,可用于自定义样式。

名称默认值描述
--td-divider-color@bg-color-component-
--td-divider-content-color@font-gray-3-
--td-divider-content-font-size12px-
--td-divider-content-line-height20px-
--td-divider-content-line-stylesolid-

何时使用

为了区分内容与内容之间的分组、层级关系时可使用。

与页面布局相关

通栏分割线:横向贯穿整个页面,一般为了区分更加独立性的内容信息,让信息分隔的更明显,更加独立性。

内嵌分割线:一般会在左侧或者右侧预留缺口,目的来区分统一模块下的相关内容,目的是为了让用户浏览大量相关内容时,更加高效。

组合分割线:通栏分割线与内嵌分割线组合布局。

推荐/慎用示例

当有明显的留白或副标题已经对内容起到分割作用时,要避免过度使用分割线导致的视觉干扰。