Divider 分割线
区隔内容的水平/垂直分割线。
水平
基础分割线
带内容
内容位置
强调文字
strong 加粗文字(600 字重),适合内容分组的节标题。
线型
四种线型
variant 与 dashed 布尔等价(dashed 属性 = variant="dashed",显式 variant 优先)。
缩进
inset / middle
间距档
size 三档
虚线
虚线(兼容写法)
垂直
垂直分割线
文本 文本
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)。
垂直缩进留空
自定义样式
color 属性支持 11 个预设色名(明暗主题自动适配)或任意 CSS 色值(直接生效,优先于预设与默认);线宽、间距、文字侧留空走 CSS 变量:
预设色板
自定义色值(优先于预设)
CSS 变量
| 变量 | 说明 | 默认值 |
|---|---|---|
--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-inset | middle 两侧留空 | 16.67% |
--oas-divider-double-gap | double 双线的线间间隙 | 3px |
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | 颜色:支持 11 个预设名(映射 --oas-preset-* token)或任意 CSS 色值 | string | — |
content-position | 内容位置 | string | — |
dashed | 虚线 | boolean | — |
direction | 方向 | DividerDirection | horizontal |
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 | — |
插槽
| 名称 | 说明 |
|---|---|
| 默认 | — |