Divider

分割线是一个呈线状的轻量化组件,用于有逻辑的组织元素内容和页面结构或区域。

设计文档(新窗口打开)

代码演示

如何引入

import { Divider } from '@chenzy-design/svelte';

基本用法

通过 layout 控制分割线方向(水平 / 垂直),dashed 切换实线 / 虚线,margin 控制分割线的外边距(水平方向为上下 margin,垂直方向为左右 margin)。

水平实线

Semi Design 是一个设计系统。
它定义了一套中后台设计与前端基础组件。

水平虚线

Semi Design 是一个设计系统。
它定义了一套中后台设计与前端基础组件。

垂直实线

左
中
右

垂直虚线

左
中
右

包含内容

水平分割线可以嵌入文字或图标,通过 align 控制内容的对齐方式(居左 / 居中 / 居右)。

这是居左文字
这是居中文字
这是居右文字

API 参考

属性说明类型默认值
align带内容时,内容对齐方式left | center | rightcenter
children内容Snippet无
class类名string无
dashed是否为虚线booleanfalse
layout分割线方向horizontal | verticalhorizontal
margin分割线上下 margin(垂直方向时为左右 margin)number | string无
style自定义样式string无

设计变量

变量
默认值
用法
--cd-color-divider-border-color var(--cd-color-border) 分割线颜色
--cd-color-divider-text-default var(--cd-color-text-0) 标题颜色
显示第 1 条-第 2 条,共 2 条
  • 1