Skip to content

Divider 分割线

区隔内容的水平/垂直分割线。

水平

基础分割线

带内容

内容位置

文字左对齐右对齐

强调文字

分组标题

strong 加粗文字(600 字重),适合内容分组的节标题。

线型

四种线型

dashed 虚线dotted 点线double 双线

variantdashed 布尔等价(dashed 属性 = variant="dashed",显式 variant 优先)。

缩进

inset / middle

inset 起始侧留空middle 两侧留空

间距档

size 三档

smallmedium(默认)large

虚线

虚线(兼容写法)

垂直

垂直分割线

文本文本

flex 容器内自动撑满

卡片 A卡片 B卡片 C

垂直分割线在 flex/grid 容器内自动撑满容器行高;行内语境保持 1em 文字行高。

垂直带文字对齐

vertical 模式下 content-position 支持 top(贴顶)/ center(默认,居中)/ bottom(贴底),文字横排、竖线按对齐分布在文字两侧(贴顶时竖线从文字向下延伸、贴底时向上、居中上下各一段);水平模式仅 left / center / right 生效,跨方向使用(如 horizontal + top、vertical + left)回落 center 并告警。贴顶/贴底的留白大小走 --oas-divider-title-inset 变量(缺省 5%)。

垂直带文字对齐

贴顶居中贴底

垂直分割线的文字方向:text-orientation="vertical" 让文字竖排(跟随竖线方向,从上到下),默认 horizontal 横排。仅 vertical 分割线有意义(水平分割线忽略)。

垂直竖排文字

横排文字竖排文字内容顶部竖排

垂直分割线也支持缩进留空:inset 起始侧(顶部)留空 / middle 两侧(上下)留空,与水平分割线同变量(--oas-divider-title-inset / --oas-divider-middle-inset)。

垂直缩进留空

inset 顶部留空middle 两侧留空

自定义样式

color 属性支持 11 个预设色名(明暗主题自动适配)或任意 CSS 色值(直接生效,优先于预设与默认);线宽、间距、文字侧留空走 CSS 变量:

预设色板

magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

自定义色值(优先于预设)

青碧色虚线紫色实线

CSS 变量

紧凑间距文字侧固定留空 120px2px 粗线
变量说明默认值
--oas-divider-width线宽1px
--oas-divider-color线色边框色 token
--oas-divider-spacing上下间距(size 档位的缺省值,注入后三档统一覆盖)档位对应 space 档
--oas-divider-title-inset文字侧留空(content-position=left/right 与 inset)5%
--oas-divider-middle-insetmiddle 两侧留空16.67%
--oas-divider-double-gapdouble 双线的线间间隙3px

API

属性

属性说明类型默认值
color颜色:支持 11 个预设名(映射 --oas-preset-* token)或任意 CSS 色值string
content-position内容位置string
dashed虚线boolean
direction方向DividerDirectionhorizontal
inset缩进:水平线起点侧内缩(默认 5%,走 --oas-divider-title-inset 变量),与文字缩进对齐boolean
middle对称缩进:水平线两侧等宽内缩(默认 16.67%,走 --oas-divider-middle-inset 变量)boolean
size间距档位:small / medium(默认)/ large;仅水平布局生效string
strong分隔文字加重(font-weight 600)boolean
text-orientation垂直分割线的文字方向:horizontal(默认横排)/ ertical(竖排,跟随竖线方向从上到下);仅 vertical 分割线有意义string
variant线型:solid / dashed / dotted / double;显式设置优先于 dashed 布尔(兼容写法)string

插槽

名称说明
默认

基于 MIT OR Apache-2.0 双许可发布