Divider

划分内容区域，对模块做分隔。

案例

基础用法。

通过 type 指定分割线类型。

带有文字的分割线

通过 text-align 指定分割线文字位置，通过 description 为分割线添加描述文字。

尺寸和间距

指定 size 和 inset 即可调整尺寸和间距，其中 size 必须大于1，如果想使用0.5px的线请使用 hairline。

颜色和透明度

指定 color 和 opacity 设置分割线颜色和透明度，如果背景色过深，可以适当调高透明度。

垂直分割线

API

Divider Props

属性	说明	类型	默认值
text-align	分割线文字位置	start|center|end	'center'
description	分割线文字描述	string	-
size-x	设置上下间距，支持'5px'、5、[5, 0]、xs、sm、md、lg、xg	number | string | number[]| string[]	-
size-y	设置左右间距，支持'5px'、5、[5, 0]、xs、sm、md、lg、xg	number | string | number[]| string[]	md
orientation	是否垂直，如果是'vertical'，则size-x控制上下间距，size-y控制左右间距。	horizontal | vertical	horizontal
type	分割线类型	dashed | dotted | solid | double	solid
thickness	分割线宽度/高度（thickness必须大于1）	number	1
hairline	0.5px 的分割线	boolean	false
color	分割线颜色	string	#363c54
opacity	分割线透明度	number	0.12

Divider Slots

插槽名	说明
default	自定义分割线文字描述

类型定义

组件导出以下类型定义

import type { DividerProps } from '@cedarjs/ui'

样式变量

以下为组件使用的 css 变量，可以使用 StyleProvider 组件 进行样式定制。

变量名	默认值
--c-divider-color	#363c54
--c-divider-text-color	var(~'--c-color-text-1')
--c-divider-text-padding	16px
--c-divider-text-align-inset	24px
--c-divider-opacity	0.12
--c-divider-orientation-vertical-size-x-xs	2px
--c-divider-orientation-horizontal-size-x-xs	12px
--c-divider-orientation-vertical-size-y-xs	4px
--c-divider-orientation-horizontal-size-y-xs	8px
--c-divider-orientation-vertical-size-x-sm	4px
--c-divider-orientation-horizontal-size-x-sm	16px
--c-divider-orientation-vertical-size-y-sm	8px
--c-divider-orientation-horizontal-size-y-sm	12px
--c-divider-orientation-vertical-size-x-md	6px
--c-divider-orientation-horizontal-size-x-md	24px
--c-divider-orientation-vertical-size-y-md	12px
--c-divider-orientation-horizontal-size-y-md	16px
--c-divider-orientation-vertical-size-x-lg	8px
--c-divider-orientation-horizontal-size-x-lg	32px
--c-divider-orientation-vertical-size-y-lg	16px
--c-divider-orientation-horizontal-size-y-lg	24px
--c-divider-orientation-vertical-size-x-xl	12px
--c-divider-orientation-horizontal-size-x-xl	40px
--c-divider-orientation-vertical-size-y-xl	24px
--c-divider-orientation-horizontal-size-y-xl	32px

同源实现与平台边界

两端各自保存完整源码，不引用公共核心，不共享组件实例或响应式状态；修改时同步维护两份实现。主体、Props、关键样式及配对测试纳入只读源码一致性检查，主题 token 和安装入口各自维护。

动态增删默认插槽会同步更新带文字样式；opacity=0 生效；hairline 优先于 thickness，并输出 aria-orientation。