Divider 分割线

区隔不同内容区域、段落标题或操作按钮组的细线条组件，支持嵌入文本/图标、虚线样式、渐隐渐变、垂直分割以及自定义色彩。

---

代码示例

1. 基础分割线 (Basic)

默认水平实线居中分隔。

<template>
  <p>段落一：木智宇 UI 专注极奢黑白熊猫风格设计。</p>
  <mu-divider />
  <p>段落二：全面支持小程序、H5 与 App 多端自适应。</p>
</template>

---

2. 嵌入文案与矢量图标 (Text & Icon)

通过 content 属性或默认插槽嵌入文案，也可配合 icon 传入 Lucide 矢量图标。

<template>
  <mu-divider content="暂无更多数据" />
  <mu-divider icon="sparkles" content="AI 智能推荐" />
  <mu-divider icon="heart" content="猜你喜欢" />
</template>

---

3. 文案对齐位置 (Orientation)

通过 orientation（或 contentPosition）设置文字的对齐位置，可选 left（靠左）、center（居中）、right（靠右）。

<template>
  <mu-divider content="靠左对齐" orientation="left" />
  <mu-divider content="居中对齐" orientation="center" />
  <mu-divider content="靠右对齐" orientation="right" />
</template>

---

4. 虚线与渐隐渐变风格 (Variants)

设置 dashed 开启虚线线条；设置 variant="gradient" 开启向两侧渐隐的极奢淡化线条。

<template>
  <!-- 虚线模式 -->
  <mu-divider dashed content="虚线分割线 Dashed" />

  <!-- 渐隐渐变模式 -->
  <mu-divider variant="gradient" content="渐隐渐变 Gradient" />
</template>

---

5. 垂直分割线 (Vertical)

设置 vertical 属性开启垂直方向分隔线，常用于导航链接、文本按钮组之间的分隔。

<template>
  <div class="action-bar">
    <span>登录</span>
    <mu-divider vertical />
    <span>注册</span>
    <mu-divider vertical />
    <span>忘记密码</span>
    <mu-divider vertical dashed />
    <span>在线客服</span>
  </div>
</template>

---

6. 自定义色彩 (Custom Color)

使用 color 属性自定义分割线条颜色，使用 textColor 自定义中间文案颜色。

<template>
  <mu-divider color="#3B82F6" textColor="#3B82F6" content="蓝色品牌分割" />
  <mu-divider color="#10B981" textColor="#10B981" icon="check" content="已加载完毕" />
</template>

---

API 属性说明 (Props)

参数名	说明	类型	可选值	默认值
content	嵌入的说明文案	String	-	''
orientation	文案对齐位置 (同 contentPosition)	String	left | center | right	'center'
contentPosition	文案对齐位置 (别名属性)	String	left | center | right	''
dashed	是否为虚线样式	Boolean	true | false	false
variant	线条渲染风格	String	solid | dashed | gradient	'solid'
vertical	是否为垂直分割线	Boolean	true | false	false
color	分割线线条颜色	String	-	''
textColor	中间文案颜色	String	-	''
icon	中间嵌入的矢量图标名称	String	-	''
margin	自定义外边距 (如 '30rpx 0')	String	-	''

---

插槽说明 (Slots)

插槽名	说明
default	自定义分割线中间包裹的内容 (覆盖 content 属性)