FxDivider 分割线

区隔内容的分割线。不依赖任何 UI 框架，样式走 @fx/styles token，亮暗自动跟随。

基础用法

分割不同段落的文本。

<template>
  <div>
    <span>用分割线隔开不同类型的内容，可以让页面结构更清晰。</span>
    <FxDivider />
    <span>它常用于表单分组、详情页字段分隔，以及段落之间的过渡。</span>
  </div>
</template>

自定义内容

在分割线上自定义内容（文字位置 / 图标）。

<template>
  <div>
    <span>项目第一阶段顺利交付，团队成员都松了一口气。</span>
    <FxDivider content-position="left">开发日志</FxDivider>
    <span>接下来进入优化阶段，重点打磨用户体验与性能。</span>
    <FxDivider>
      <FxIcon name="ep:star-filled" />
    </FxDivider>
    <span>期待下一个版本能与大家见面。</span>
    <FxDivider content-position="right">开发日志</FxDivider>
  </div>
</template>

content-position 可设 left / center / right；图标可通过 default slot 放 <FxIcon>。

虚线

设置分割线的样式（dashed / dotted / double）。

<template>
  <div>
    <span>实线是最常用的默认样式。</span>
    <FxDivider border-style="dashed" />
    <span>虚线用于区分不同类型的区块。</span>
  </div>
  <FxDivider border-style="dotted" />
  <span>点线视觉更轻盈，适合紧凑布局。</span>
  <FxDivider border-style="double" />
  <span>双线带有一点装饰性，常用于强调。</span>
</template>

纵向分割线

<template>
  <div>
    <span>待办</span>
    <FxDivider direction="vertical" />
    <span>进行中</span>
    <FxDivider direction="vertical" border-style="dashed" />
    <span>已完成</span>
  </div>
</template>

API

Attributes

属性	说明	类型	默认值
direction	分割线方向	'horizontal' | 'vertical'	horizontal
border-style	边框样式	'none' | 'solid' | 'dashed' | 'dotted' | 'double'	solid
content-position	文字位置（仅 horizontal 且有 default slot 内容时生效）	'left' | 'center' | 'right'	center

Slots

插槽名	说明	类型
default	分割线上的文字内容，仅 horizontal 模式下渲染	—