List

List 用于展示一组结构一致的内容项。每一项可以包含前置内容、标题、描述、主体内容、后置内容和分隔线，适合通知、设置入口、消息列表等场景。

import {
  List,
  ListContent,
  ListDescription,
  ListItem,
  ListItemUI,
  ListRoot,
  ListTitle
} from '@skyroc/web-ui';

何时使用

• 需要展示多条结构类似的信息项。
• 列表项需要图标、标题、描述、右侧操作或状态。
• 需要通过数据数组批量渲染列表项。
• 大量数据或虚拟滚动场景优先使用 VirtualList。

基础用法

通过 items 传入列表项数据。List 会自动渲染每个 item，并在非最后一项后追加默认 Divider。

列表项结构

每个 item 支持 leading、title、description、content、trailing 和 divider。其中 divider 传 React element 时会使用自定义分隔线；传 false 或空值时不渲染分隔线。

<List
  items={[
    {
      leading: <Icon icon="lucide:bell" />,
      title: 'Notifications',
      description: 'You have 3 unread messages.',
      content: <span>Extra content</span>,
      trailing: <Icon icon="lucide:chevron-right" />
    }
  ]}
/>

尺寸

通过 size 调整列表间距、列表项间距、正文字号和标题字号，从 xs 到 2xl 共 6 个尺寸。

自定义样式

通过 classNames 控制不同 slot：root、item、content、title 和 description。也可以通过 contentProps、titleProps、descriptionProps 分别向内部结构组件传入额外属性。

API

List

通用属性参考：基于 ul 元素，使用 items 数据渲染复合列表项。

结构组件

当需要手动组合列表结构时，可以直接使用导出的结构组件。

类型