如何引入
import { Descriptions, Descriptions.Item } from '@chenzy-design/svelte'; 基础用法
通过 data 以键值对数组传入数据，value 支持字符串或富内容 Snippet。
| 实际用户数量 | 1,480,000 |
|---|
| 7天留存 | 98% |
|---|
| 安全等级 | 3级 |
|---|
| 垂类标签 | |
|---|
| 认证状态 | 未认证 |
|---|
设置对齐方式
align 支持 center（默认）、justify、left、plain 四种对齐；row 为 true 时失效。
| 实际用户数量 | 1,480,000 |
|---|
| 7天留存 | 98% |
|---|
| 安全等级 | 3级 |
|---|
| 垂类标签 | |
|---|
| 认证状态 | 未认证 |
|---|
| 实际用户数量 | 1,480,000 |
|---|
| 7天留存 | 98% |
|---|
| 安全等级 | 3级 |
|---|
| 垂类标签 | |
|---|
| 认证状态 | 未认证 |
|---|
| 实际用户数量 | 1,480,000 |
|---|
| 7天留存 | 98% |
|---|
| 安全等级 | 3级 |
|---|
| 垂类标签 | |
|---|
| 认证状态 | 未认证 |
|---|
| 实际用户数量: 1,480,000 |
| 7天留存: 98% |
| 安全等级: 3级 |
| 垂类标签: |
| 认证状态: 未认证 |
JSX 写法
除 data 外可用 <Descriptions.Item> 声明式写法，须为直接子元素。
| 实际用户数量 | 1,480,000 |
|---|
| 7天留存 | 98% |
|---|
| 安全等级 | 3级 |
|---|
| 垂类标签 | 电商 |
|---|
| 认证状态 | 未认证 |
|---|
设置布局模式
layout 支持 vertical（默认）与 horizontal；横向布局配合 column 指定每行最大列数。
| 抖音号: ChenzyDesign |
| 主播类型: 自由主播 |
| 安全等级: 3级 |
| 垂类标签: |
| 作品数量: 88888888 |
| 认证状态: 这是一个很长很长很长很长很长很长很长很长很长的值 |
| 抖音号: ChenzyDesign | 主播类型: 自由主播 | 安全等级: 3级 | 垂类标签: | 作品数量: 88888888 |
| 认证状态: 这是一个很长很长很长很长很长很长很长很长很长的值 | 上次直播时间: 2024-05-01 12:00:00 |
双行显示
row 双行显示，支持 small、medium（默认）、large 三种大小，此时 align 失效。
| 实际用户数量 | 1,480,000 |
|---|
| 7天留存 | 98% |
|---|
| 安全等级 | 3级 |
|---|
| 实际用户数量 | 1,480,000 |
|---|
| 7天留存 | 98% |
|---|
| 安全等级 | 3级 |
|---|
| 实际用户数量 | 1,480,000 |
|---|
| 7天留存 | 98% |
|---|
| 安全等级 | 3级 |
|---|
自定义 Key 样式
通过 keyStyle 自定义 key 样式，如固定宽度实现对齐，data 与声明式写法均支持。
| 用户名 | 张三 |
|---|
| 电子邮箱 | zhangsan@example.com |
|---|
| 联系电话 | 138-0000-0000 |
|---|
| 地址 | 北京市朝阳区 |
|---|
API 参考
Descriptions
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|
align | 对齐方式（row=true 时失效） | 'center'|'justify'|'left'|'plain' | 'center' |
row | 是否双行显示 | boolean | false |
size | 双行显示时的大小 | 'small'|'medium'|'large' | 'medium' |
data | 列表数据（不传时渲染 children 内的 Descriptions.Item） | DescriptionData[] | [] |
layout | 布局模式 | 'vertical'|'horizontal' | 'vertical' |
column | horizontal 布局下每行的总列数 | number | 3 |
class | — | string | '' |
style | — | string | undefined |
children | 声明式用法：内嵌 <Descriptions.Item>（不传 data 时生效） | Snippet | undefined |
Descriptions.Item
声明式描述项，itemKey 键值 + children 内容；渲染成 tr（vertical）或裸单元格（horizontal）。
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|
itemKey | 键值（label） | string | — |
hidden | 是否隐藏不展示 | boolean | false |
span | 跨列数 | number | 1 |
keyStyle | key 的自定义样式 | string | — |
class | 外层 tr 的类名 | string | — |
style | 外层 tr 的内联样式 | string | — |
children | 描述内容 | Snippet | — |
Accessibility
| ARIA role | description list |
- table 语义结构（th 为 key、td 为 value）
- plain/横向布局下 key 与 value 同排，key 后内联冒号
- hidden 项不渲染
设计变量
| 变量 | 默认值 | 用法 |
|---|
--cd-color-descriptions-key-text-default | var(--cd-color-text-2) | key 文字颜色 |
--cd-color-descriptions-value-text-default | var(--cd-color-text-0) | value 文字颜色 |