Divider 分割线
分割线组件用于在不同内容区域之间创建清晰的视觉分隔，支持水平和垂直两种方向，可自定义样式和文字内容。
基础用法
最简单的分割线用法，默认为水平方向的实线分割线。
上方内容区域
中间内容区域
下方内容区域
带文字的分割线
在水平分割线中添加文字内容，用于更清晰地标识不同区域的用途。
用户信息
姓名、邮箱等基本信息
账户设置
安全设置
密码、二次验证等安全选项
通知偏好
消息通知
邮件、短信等通知设置
文字位置
通过 content-position 属性控制分割线文字的对齐方式，支持左对齐、居中和右对齐三种位置。
📋 任务列表
🔥 紧急任务
修复生产环境Bug
📅 今日计划
完成功能开发
💡 想法记录
优化用户体验
垂直分割线
设置 direction="vertical" 创建垂直分割线，常用于导航菜单、工具栏等水平布局中的元素分隔。
边框样式
通过 border-style 属性自定义分割线的样式，支持实线、虚线和点线三种样式，适用于不同的设计需求。
📄 正式文档
使用实线分割线表示正式的内容分隔
实线分割线
📝 草稿内容
使用虚线分割线表示临时或草稿状态
虚线分割线
💡 提示信息
使用点线分割线表示轻量级的内容分隔
点线分割线
不同样式适用于不同的内容层级和重要程度
自定义颜色
使用 border-color 属性自定义分割线颜色，可以根据不同的内容主题或状态使用相应的颜色。
🎨 设计系统
使用品牌色彩增强视觉层次
默认颜色
💼 商务信息
专业、可信赖的蓝色主题
品牌蓝
✅ 成功状态
表示成功、完成或正确的绿色
成功绿
⚠️ 警告提示
用于错误、警告或重要提醒
警告红
💡 注意事项
提醒用户注意的黄色主题
提醒黄
组合使用
分割线的各种属性可以灵活组合，创造出符合特定设计需求的分割效果。
🎨 创意工作流
展示不同阶段的创意过程
💡 灵感收集
收集和整理创意想法，建立灵感库
🛠️ 设计开发
将想法转化为具体的设计方案
🚀 发布上线
完成测试并正式发布产品
实际应用场景
分割线在实际项目中的常见应用场景展示。
🏠 首页📦 产品中心💻 软件开发UI组件库
👤
张三
高级前端工程师
📧 联系方式
📧 zhangsan@example.com
📱 +86 138 0013 8000
🏢 工作信息
🏢 阿里巴巴集团
📍 杭州市余杭区
API
Divider Props
| 属性名 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| direction | string | 'horizontal' | 分割线方向 | horizontal / vertical |
| border-style | string | 'solid' | 边框样式 | solid / dashed / dotted |
| content-position | string | 'center' | 文字位置（仅水平方向有效） | left / center / right |
| border-color | string | — | 自定义边框颜色 | 任意有效的CSS颜色值 |
Divider Slots
| 插槽名 | 说明 | 参数 |
|---|---|---|
| default | 分割线文字内容（仅水平方向有效） | — |
使用示例
vue
<!-- 基础用法 -->
<vk-divider />
<!-- 带文字的水平分割线 -->
<vk-divider>分割线文字</vk-divider>
<!-- 垂直分割线 -->
<vk-divider direction="vertical" />
<!-- 自定义样式 -->
<vk-divider content-position="left" border-style="dashed" border-color="#1890ff">
自定义分割线
</vk-divider>设计指南
何时使用
- 对不同章节的文本段落进行分割
- 对行内文字/链接进行分割，例如表格的操作列
- 对不同区块的内容进行分割
使用建议
- 水平分割线：用于分隔不同的内容区域，可以添加文字说明
- 垂直分割线：用于分隔水平排列的元素，如导航菜单、操作按钮等
- 样式选择：实线用于正式分隔，虚线用于临时或草稿状态，点线用于轻量级分隔
- 颜色使用：可以根据内容主题或状态使用相应的颜色，增强视觉层次
无障碍性
- 分割线具有适当的语义化标记
- 支持屏幕阅读器识别
- 颜色对比度符合WCAG标准
样式变量
组件提供了以下 CSS 变量用于自定义样式：
| 变量名 | 默认值 | 说明 |
|---|---|---|
| --vk-divider-margin | 16px 0 | 水平分割线的外边距 |
| --vk-divider-text-padding | 0 16px | 分割线文字的内边距 |
| --vk-divider-border-color | var(--vk-border-color) | 分割线的颜色 |
| --vk-divider-text-color | var(--vk-text-color-regular) | 分割线文字的颜色 |