组件 / show

List

列表：数据驱动渲染（dataSource + renderItem）或声明式内嵌 <List.Item>，支持 header/footer（string 或 Snippet）、bordered 外框、split 分隔线、layout（vertical/horizontal）、grid 栅格（复用 Row/Col）、loading（复用 Spin）与空态（缺省 locale emptyText）。严格镜像 Semi List API。

设计文档

如何引入

import { List } from '@chenzy-design/svelte';

基本用法

通过 size 设置尺寸（large/default/small），header/footer 自定义头尾，bordered 加外框。

Default Size

Header
  • 从明天起，做一个幸福的人
  • 喂马，劈柴，周游世界
  • 从明天起，关心粮食和蔬菜
  • 我有一所房子，面朝大海，春暖花开
Footer

Small Size

Header
  • 从明天起，做一个幸福的人
  • 喂马，劈柴，周游世界
  • 从明天起，关心粮食和蔬菜
  • 我有一所房子，面朝大海，春暖花开
Footer

Large Size

Header
  • 从明天起，做一个幸福的人
  • 喂马，劈柴，周游世界
  • 从明天起，关心粮食和蔬菜
  • 我有一所房子，面朝大海，春暖花开
Footer

模板用法

List.Item 内置 header / main / extra 三段结构，align 控制头与主体的垂直对齐。

  • SE
    示例标题

    Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

  • SE
    示例标题

    Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。

  • SE
    示例标题

    Semi Design 以用户中心、内容优先、设计人性化的设计系统，打造一致、好看、好用、高效的用户体验。

布局

layout=horizontal 让列表项横向排列，split 时用右边框分隔。

  • SE
    Semi Design Title 1

    Semi Design 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

  • SE
    Semi Design Title 2

    Semi Design 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

  • SE
    Semi Design Title 3

    Semi Design 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

栅格列表

grid 的 span 设置每项占格数（24 栅格），gutter 控制间距。

  • Semi UI

    满意度
    反馈数 124

  • Semi DSM

    满意度
    反馈数 108

  • Semi D2C

    满意度
    反馈数 244

  • Semi Pro

    满意度
    反馈数 66

    • 响应式栅格列表

    grid 的 xs/sm/md/lg/xl/xxl 按断点设置占格数，响应尺寸与 Grid 一致。

  • 审核管理平台

    满意度
    反馈数 124

  • 扁鹊

    满意度
    反馈数 108

  • 直播审核平台

    满意度
    反馈数 244

  • 抖音安全测试

    满意度
    反馈数 189

  • 内容平台

    满意度
    反馈数 128

  • 策略平台

    满意度
    反馈数 156

    • 加载更多

    点击后先追加骨架占位行，请求返回再替换为真实数据；已展示项始终显示真内容，只有新增占位行显示 Skeleton（对齐 Semi）。

    暂无数据

    滚动加载

    首屏后滚动到底自动加载，连续加载 3 批后（批次数为 4 的倍数）出现「显示更多」按钮，点击再进入自动滚动——每 4 批一个按钮（对齐 Semi）。加载中底部显示 Spin。

    暂无数据

    滚动加载无限长列表

    组合 VirtualList 只渲染视口内行，支撑万级数据（等价 Semi 集成 react-virtualized）。

  • 0
    Item 0
  • 1
    Item 1
  • 2
    Item 2
  • 3
    Item 3
  • 4
    Item 4
  • 5
    Item 5
  • 6
    Item 6
  • 7
    Item 7
  • 8
    Item 8
  • 9
    Item 9

    • 拖拽排序

    用原生 HTML5 draggable 事件实现列表项拖拽重排（等价 Semi 集成 dnd-kit）。

    • SE
      Semi Design Title 1

      Semi Design 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

    • SE
      Semi Design Title 2

      Semi Design 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

    • SE
      Semi Design Title 3

      Semi Design 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

    • SE
      Semi Design Title 4

      Semi Design 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

    • SE
      Semi Design Title 5

      Semi Design 设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。

    带分页器

    组合 Pagination 对数据切片，实现分页列表。

    • 围城
    • 平凡的世界（全三册）
    • 三体（全集）
    • 雪中悍刀行（全集）

    带筛选器

    组合 Input 作为 header，对列表数据实时过滤。

    • 围城
    • 平凡的世界（全三册）
    • 三体（全集）
    • 雪中悍刀行（全集）
    • 撒哈拉的故事
    • 明朝那些事
    • 一禅小和尚
    • 沙丘
    • 被讨厌的勇气
    • 罪与罚

    添加删除项

    操作 dataSource 数组动态增删列表项。

      围城
      平凡的世界（全三册）
      三体（全集）
      雪中悍刀行（全集）
      撒哈拉的故事
      明朝那些事
      一禅小和尚
      沙丘

    单选或多选

    组合 CheckboxGroup / RadioGroup 将 List 增强为列表选择器。

    响应键盘事件

    监听 ↑↓ 方向键在列表项间移动高亮。

    • 围城
    • 平凡的世界（全三册）
    • 三体（全集）
    • 雪中悍刀行（全集）
    • 撒哈拉的故事
    • 明朝那些事
    • 一禅小和尚
    • 沙丘
    • 被讨厌的勇气
    • 罪与罚

    按 ↑ / ↓ 方向键切换高亮项。

    API 参考

    List

    Props

    属性说明类型默认值
    bordered是否显示外框booleanfalse
    dataSource列表数据源T[]undefined
    renderItem使用 dataSource 时自定义渲染列表项Snippet<[item: T, index: number]>undefined
    emptyContent空列表展示内容，缺省回退 locale List.emptyTextstring | Snippetundefined
    footer列表底部string | Snippetundefined
    header列表头部string | Snippetundefined
    layout列表布局方向'vertical' | 'horizontal''vertical'
    loadMore加载更多按钮区Snippetundefined
    loading加载态，列表体外包裹 Spinbooleanfalse
    size列表尺寸'small' | 'default' | 'large''default'
    split是否展示分割线booleantrue
    grid栅格配置（复用 Row/Col）：gutter/align/justify/wrap → Row，span/offset/order/push/pull/flex/xs..xxl → ColListGridundefined
    style根容器行内样式stringundefined
    onClick列表项点击回调（下发给 Item 作为回退）(e: MouseEvent) => voidundefined
    onRightClick列表项右键回调（下发给 Item 作为回退）(e: MouseEvent) => voidundefined
    children声明式用法：内嵌 <List.Item>Snippetundefined
    class根类名string''

    Slots

    名称说明
    renderItem行渲染（item, index）
    header头部 Snippet（与 header string 二选一）
    footer底部 Snippet
    emptyContent空态 Snippet
    loadMore加载更多区域 Snippet
    children声明式 <List.Item> 子项

    Accessibility

    ARIA rolelist
    • ul/li 原生列表语义（cd-list-items > cd-list-item）
    • loading 由 Spin 包裹提供 role=status（aria-live=polite）
    • 空态文案缺省来自 locale List.emptyText

    设计变量

    变量默认值用法
    --cd-color-list-default-border-default var(--cd-color-border)列表描边颜色（$color-list_default-border-default）
    --cd-color-list-empty-text-default var(--cd-color-text-2)空状态下列表文字颜色（$color-list_empty-text-default）
    显示第 1 条-第 2 条，共 2 条