设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
通用列表 List
最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。
基础示例
基础列表。
List.Item
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
actions | 列表操作组,根据 itemLayout 的不同, 位置在卡片底部或者最右侧 | ReactNode[] | - |
extra | 额外内容, 通常用在 itemLayout 为 vertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧 | ReactNode | - |
List Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
dataSource | 列表数据源 | any[] | [] |
itemLayout | 设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排 | string | horizontal |
loadMore | 加载更多 | ReactNode | - |
pagination | 对应的 pagination 配置, 设置 false 不显示 | boolean | - |
renderItem | 当 renderItem 自定义渲染列表项有效时,自定义每一行的 key 的获取方式 | ((item: string | - |
size | list 的尺寸 | "default" | default |
split | 是否展示分割线 | boolean | true |
direction | 列表方向 | string | horizontal |
locale | 自定义空状态 | React.ReactNode |