设计
设计指南
设计原则
样式指南
设计资源
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 则竖直样式显示, 默认横排stringhorizontal
loadMore加载更多ReactNode-
pagination对应的 pagination 配置, 设置 false 不显示boolean-
renderItem当 renderItem 自定义渲染列表项有效时,自定义每一行的 key 的获取方式((item: string-
sizelist 的尺寸"default"default
split是否展示分割线booleantrue
direction列表方向stringhorizontal
locale自定义空状态React.ReactNode

贡献者