xtf-divider

组件说明

xtf-divider 是分割线组件，用于分隔内容区域。支持水平/垂直方向、文字/图标内容、多种主题色、线条类型（实线/虚线/点线）、对齐方式和发光效果，适用于列表分隔、区域划分和表单分组等场景。

---

基础用法

1. 水平分割线

默认为水平实线分割线：

<template>
  <view>
    <xtf-text level="body" text="上方内容" />
    <xtf-divider />
    <xtf-text level="body" text="下方内容" />
  </view>
</template>

2. 带文字的分割线

通过 text 设置分割线文字：

<template>
  <view>
    <xtf-text level="body" text="账号登录" />
    <xtf-divider text="其他方式" />
    <xtf-button label="微信登录" block />
  </view>
</template>

3. 带图标的分割线

通过 icon 设置图标，通过 iconPosition 设置图标位置：

<template>
  <view>
    <xtf-divider icon="star" text="精选推荐" theme="warning" />
    <xtf-divider icon="arrow_down" icon-position="end" text="展开更多" theme="info" />
  </view>
</template>

4. 主题与样式

通过 theme 切换主题色，通过 type 切换线条类型：

<template>
  <view style="display: flex; flex-direction: column; gap: 24rpx">
    <xtf-divider text="主要" theme="primary" />
    <xtf-divider text="成功" theme="success" />
    <xtf-divider text="警告" theme="warning" />
    <xtf-divider text="危险" theme="danger" />
    <xtf-divider text="虚线" type="dashed" />
    <xtf-divider text="点线" type="dotted" />
    <xtf-divider text="渐隐" type="fade" />
    <xtf-divider text="渐变" type="gradient" />
    <xtf-divider text="发光" type="glow" />
    <xtf-divider text="双线" type="double" />
  </view>
</template>

5. 垂直分割线

通过 vertical 启用垂直模式：

<template>
  <view style="display: flex; align-items: center; gap: 16rpx">
    <xtf-text level="body" text="选项A" />
    <xtf-divider vertical />
    <xtf-text level="body" text="选项B" />
    <xtf-divider vertical />
    <xtf-text level="body" text="选项C" />
  </view>
</template>

---

全部属性

属性	类型	默认值	作用描述	适用范围
text	String	''	分割线文字	文字内容
icon	String	''	图标名称	图标
iconPosition	String	'start'	图标位置：'start' / 'end'	图标位置
theme	String	'primary'	主题色：'primary' / 'success' / 'warning' / 'danger' / 'info' / 'inverse'	主题
color	String	''	自定义线条颜色	自定义颜色
textColor	String	''	自定义文字颜色	文字颜色
background	String	''	自定义背景色	背景色
borderColor	String	''	自定义边框色	边框色
glowColor	String	''	自定义发光色	发光效果
type	String	'solid'	线条类型：'solid' / 'dashed' / 'dotted' / 'fade' / 'gradient' / 'glow' / 'double'	线条样式
contentVariant	String	'plain'	内容变体	内容样式
align	String	'center'	对齐方式：'left' / 'center' / 'right'	对齐
vertical	Boolean	false	是否垂直方向	方向
inset	String | Number	0	两侧缩进（rpx）	缩进
length	String | Number	''	自定义长度	长度
thickness	String | Number	'2rpx'	线条粗细	粗细
contentPadding	String | Number	'4rpx 10rpx'	内容区域内边距	内边距
customClass	String	''	自定义类名	样式覆盖
customStyle	String | Object | Array	''	自定义样式	动态样式覆盖

---

事件

无自定义事件。

---

插槽

插槽名称	说明
default	替换中间文字内容
icon	替换起始图标
icon-end	替换结束图标

插槽使用示例

<template>
  <xtf-divider content-variant="chip" theme="success">
    <template #icon><xtf-icon name="check_circle" theme="success" size="xs" /></template>
    <xtf-text text="已完成" color="success" />
    <template #icon-end><xtf-icon name="verified" theme="success" size="xs" /></template>
  </xtf-divider>
</template>

---

主题说明

• 线条颜色跟随 theme 属性，使用对应的 CSS 变量（如 var(--xtf-color-primary)）
• 文字颜色跟随主题色
• 发光效果使用对应主题色的半透明色
• 支持 6 种主题：primary / success / warning / danger / info / inverse

如需全局调整主题，请在 xtf-config-provider 或主题配置中覆盖相关 CSS 变量。