跳到主要内容

DescriptionList 描述列表DescriptionList · DescriptionItem

成对的“名目 —— 取值”:订单详情、个人资料、元数据。只读;要编辑请用表单。

基本用法

用 items 传键值对。默认布局 auto:窄于 520px 时名目在上、取值在下,更宽时左右两列。

订单号
OK-2024-081537
下单时间
2024 年 8 月 15 日 14:32
收货地址
上海市徐汇区漕溪北路 88 号 12 层 1203 室
状态
已发货

布局

stacked 总是上下堆叠,适合窄栏;inline 总是左右两列,适合取值都很短的场合。

姓名
林小满
姓名
林小满

分隔线与自定义条目

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 起两列。
dividedboolean—条目之间加发丝线。

DescriptionItem

属性类型默认值说明
term*ReactNode—名目(dt)。
childrenReactNode—取值(dd)。

无障碍

  • 渲染成原生的 dl / dt / dd,每一对包在一个 div 里(规范允许),读屏会把名目和取值成对读出。
  • 名目用次要色、取值用正文色,两者对比度都不低于 4.5:1。
  • 没有键盘操作;长的取值会自动换行,不会横向溢出。