跳到主要内容

List 列表List · ListItem

一组同类条目的纵向排列：成员、文件、待办、要点。只负责排版和列表语义，不带卡片底；需要底时放进 Card。

基本用法

ListItem 有前置、内容、后置三个位置。title 和 description 是内容区的两行文字。

  • 林小满设计 · 负责导航改版
    负责人
  • 周屿前端
    3 分钟前
  • Ada Chen产品

项目符号

marker 决定条目前面的记号：none（默认）、bullet 圆点、number 序号。number 时根元素自动换成 ol。

  • 没有记号
  • 只是纵向排开
  • 适合放自定义内容
  • 支持浅色和深色
  • 五种预设强调色
  • 尊重减弱动效的系统设置
  1. 安装依赖
  2. 引入样式
  3. 在根部挂上 OinkProvider

间距与分隔线

size 控制条目的上下间距（sm 8、md 12、lg 16）；divided 在条目之间加发丝线。

  • sm间距 8
  • 会议纪要.md
    12 KB
  • 预算.xlsx
    48 KB
  • md间距 12
  • 会议纪要.md
    12 KB
  • 预算.xlsx
    48 KB
  • lg间距 16
  • 会议纪要.md
    12 KB
  • 预算.xlsx
    48 KB

接口

List

属性类型默认值说明
as'ul' | 'ol''ul'根元素。marker="number" 时默认 ol。
marker'none' | 'bullet' | 'number''none'项目符号。
dividedboolean—条目之间加发丝线。
size'sm' | 'md' | 'lg''md'条目的上下间距。

ListItem

属性类型默认值说明
leadingReactNode—前置内容：图标、头像。
titleReactNode—主标题；不传就直接用 children 作为内容。
descriptionReactNode—标题下的说明。
trailingReactNode—后置内容：徽标、时间、操作。

无障碍

  • 根元素是真的 ul / ol，并显式写了 role="list"：去掉默认列表样式后，部分读屏会丢掉列表语义，这样能保住“列表，共 N 项”的播报。
  • 圆点和序号是 CSS 生成的装饰；顺序有意义时用 number，读屏会按 ol 读出序号。
  • 列表本身不可聚焦，没有键盘操作；条目里的按钮、链接按文档顺序 Tab 到。
  • 后置位置放图标按钮时，aria-label 里要带上是哪一条（如“给 Ada Chen 发邮件”）。