Divider 分割线

正直
TDesign
进取
TDesign
合作
TDesign
创新

基础分割线

基础分割线是没有文字的独立线条,又分为水平分割线和垂直分割线。

水平分割线

水平分割线常用来对不同元素内容进行分割。

分割线对内容有分隔和组织的作用,能帮助用户理解页面层次,提升信息获取或内容操作的效率。

分割线对内容有分隔和组织的作用,能帮助用户理解页面层次,提升信息获取或内容操作的效率。

分割线对内容有分隔和组织的作用,能帮助用户理解页面层次,提升信息获取或内容操作的效率。

垂直分割线

垂直分割线常用来做行内分割。

正直
进取
协作
创造

带文字的分割线

带文字的分割线是在分割线中嵌入文字,在需要对分割内容进行解释说明时使用。

分割线对内容有分隔和组织的作用,能帮助用户理解页面层次,提升信息获取或内容操作的效率。

TDesign

分割线对内容有分隔和组织的作用,能帮助用户理解页面层次,提升信息获取或内容操作的效率。

TDesign

分割线对内容有分隔和组织的作用,能帮助用户理解页面层次,提升信息获取或内容操作的效率。

TDesign

分割线对内容有分隔和组织的作用,能帮助用户理解页面层次,提升信息获取或内容操作的效率。

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
themeString-已废弃。请更为使用 layout。分隔线类型有两种:水平和垂直。可选项:horizontal/verticalN

何时使用

需要对不同章节的文本段落进行分割时;

需要对行内文字、链接等进行分割时。

与页面布局相关

通栏布局。横向贯穿整个页面,区分更加独立的内容信息,让信息分隔的更明显。

内嵌布局。一般在两侧预留缺口,区分同一模块下的相关内容,让用户浏览时更加高效。

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

推荐/慎用示例

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