<template>
<div class="flex flex-col gap-4 p-4">
<SkDivider />
<SkDivider />
</div>
</template>
| Prop | 类型 | 默认值 | 描述 |
|---|
text | string | number | - | 通过属性快速设置文本内容 |
也可以通过
默认插槽 default 自定义任意内容（图标、徽标或更复杂的节点）
<template>
<div class="flex flex-col gap-4 p-4">
<SkDivider text="今日推荐" />
<SkDivider>
<div class="flex items-center gap-2 text-secondary text-body-small">
<SkIcon name="i-lucide:sparkles" size="32rpx" />
<span>自定义插槽</span>
</div>
</SkDivider>
</div>
</template>
| Prop | 类型 | 默认值 | 描述 |
|---|
contentPosition | "start" | "center" | "end" | center | 控制文本相对整条横向分割线的位置 |
<template>
<div class="flex flex-col gap-4 p-4">
<SkDivider text="左对齐" content-position="start" />
<SkDivider text="居中" content-position="center" />
<SkDivider text="右对齐" content-position="end" />
</div>
</template>
| Prop | 类型 | 默认值 | 描述 |
|---|
dashed | boolean | false | 是否渲染为虚线 |
<template>
<div class="flex flex-col gap-4 p-4">
<SkDivider text="虚线分割" dashed />
<SkDivider dashed />
</div>
</template>
| Prop | 类型 | 默认值 | 描述 |
|---|
color | string | - | 设置线条和默认文本的颜色 |
textColor | string | - | 仅覆盖文本颜色，优先级高于 color |
<template>
<div class="flex flex-col gap-4 p-4">
<SkDivider text="品牌色" color="#4D80F0" />
<SkDivider text="自定义文字颜色" color="#FF6B6B" text-color="#FFB347" />
<SkDivider text="粗线条" :hairline="false" thickness="4px" />
</div>
</template>
| Prop | 类型 | 默认值 | 描述 |
|---|
thickness | string | number | 1px | 调整线条粗细，支持数值或任意 CSS 单位 |
若需要完全按照 thickness 控制粗细，请先将 hairline 设置为 false。
<template>
<div class="flex flex-col gap-4 p-4">
<SkDivider text="默认 1px" />
<SkDivider text="2px" :thickness="2" />
<SkDivider text="4px" thickness="4px" />
</div>
</template>
| Prop | 类型 | 默认值 | 描述 |
|---|
hairline | boolean | true | 是否启用 1px 发丝线（细线）样式 |
<template>
<div class="flex flex-col gap-4 p-4">
<SkDivider text="默认发丝线" />
<SkDivider text="关闭发丝线" :hairline="false" />
<SkDivider text="自定义粗细" :hairline="false" thickness="4px" />
</div>
</template>
| Prop | 类型 | 默认值 | 描述 |
|---|
orientation | "horizontal" | "vertical" | horizontal | 选择横向或纵向分割线 |
length | string | number | - | 纵向分割线高度（可选） |
<template>
<div class="flex items-center justify-center gap-6 p-4 text-body-medium">
<span>上午</span>
<SkDivider orientation="vertical" length="64px" />
<span>下午</span>
<SkDivider orientation="vertical" dashed :thickness="2" length="48px" />
<span>晚上</span>
</div>
</template>
| Prop | 描述 |
|---|
text | 设置文本内容，优先级低于插槽 |
color | 控制线条和默认文本颜色 |
textColor | 单独覆盖文本颜色 |
orientation | 横向或纵向分割线 |
contentPosition | 控制横向文本位置 |
dashed | 是否渲染为虚线 |
hairline | 是否启用 1px 发丝线样式，关闭后可配合 thickness |
thickness | 控制线条粗细（关闭发丝线后生效） |
length | 纵向分割线高度 |
clax | 传入 @skiyee/ucv 生成的额外类名 |
