Cube-Divider

介绍

分割线，用于分隔内容。

示例

基础用法

默认渲染一条水平分割线。

收起

<cube-divider />

文本分割线

可以在分割线中植入文本内容。

收起

<cube-divider text="文本内容" />

设置文本位置

通过设置postion，改变分割线中文本所在位置。

<cube-divider position="left" text="文本内容" />

分割线 Slot

也可以通过默认插槽渲染自定义内容。

收起

<cube-divider position="left">
  <view class="divider-slot">This is slot text</view>
</cube-divider>

Props

参数	说明	类型	可选值	默认值
themeType	用于生成最外层类名 如原类名为 cube-component，添加 themeType = demo 后，类名变为 cube-component cube-component-demo	String	-	-
text	文本内容（会覆盖 slot）	String	-	-
position	文本/slot 的位置	String	left/center/right	DividerContentPosition.CENTER

Slots

插槽名	说明
— (默认插槽)	-

CSS Variable

变量名	默认值	含义
$divider-color	#ccc	分割线文字颜色
$divider-line-color	#d8d8d8	分割线边框颜色
$divider-bgc	$var(color-white)	分割线文字部分背景颜色
$divider-padding	0 10px	分割线文字部分内边距
$divider-left-line-width	10%	分割线文字左边宽度
$divider-right-line-width	10%	分割线文字右边宽度
$divider-font-size	$var(font-size-xs)	分割线文字大小