DescriptionList 描述列表DescriptionList · DescriptionItem
成对的“名目 —— 取值”:订单详情、个人资料、元数据。只读;要编辑请用表单。
基本用法
用 items 传键值对。默认布局 auto:窄于 520px 时名目在上、取值在下,更宽时左右两列。
- 订单号
- OK-2024-081537
- 下单时间
- 2024 年 8 月 15 日 14:32
- 收货地址
- 上海市徐汇区漕溪北路 88 号 12 层 1203 室
- 状态
- 已发货
布局
stacked 总是上下堆叠,适合窄栏;inline 总是左右两列,适合取值都很短的场合。
- 姓名
- 林小满
- 邮箱
- xiaoman@example.com
- 姓名
- 林小满
- 邮箱
- xiaoman@example.com
分隔线与自定义条目
divided 在条目之间加发丝线。不用 items 时可以直接写 DescriptionItem,方便给单个条目加属性。
- 套餐
- 专业版
- 席位
- 12 / 20
- 下次扣费
- 2024 年 9 月 1 日
接口
DescriptionList
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
items | { key?: string; term: ReactNode; description: ReactNode }[] | — | 键值对;也可以不传,直接在 children 里写 DescriptionItem。 |
layout | 'auto' | 'stacked' | 'inline' | 'auto' | auto:窄屏堆叠,520px 起两列。 |
divided | boolean | — | 条目之间加发丝线。 |
DescriptionItem
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
term* | ReactNode | — | 名目(dt)。 |
children | ReactNode | — | 取值(dd)。 |
无障碍
- 渲染成原生的
dl/dt/dd,每一对包在一个div里(规范允许),读屏会把名目和取值成对读出。 - 名目用次要色、取值用正文色,两者对比度都不低于 4.5:1。
- 没有键盘操作;长的取值会自动换行,不会横向溢出。