@bicitech-design/pro-list
v1.23.32
Published
🏆 Use Ant Design List like a Pro!
Downloads
148
Maintainers
Readme
🏆 Use Ant Design List like a Pro!
ProList (高级列表)
ProList 在 antd 的 list 支持了一些功能,比如 多选,展开等功能,使用体验贴近 table。
何时使用
在完成一个标准的列表时即可使用。
API
ProList
ProList 与 antd 的 List 相比,主要增加了 rowSelection 和 expandable 来支持选中与筛选
| 参数 | 说明 | 类型 | 默认值 | | :-- | :-- | :-- | :-- | | rowSelection | 与 antd 相同的配置 | object |boolean | false | | expandable | 与 antd 相同的配置 | object | false | - | | showActions | 何时展示 actions | 'hover' | 'always' | always | | rowKey | 行的 key,一般是行 id | string | (row,index)=>string | "id" | | renderItem | 现在的 renderItem 需要返回 ProList.Item 的 props,而不是 dom | ItemProps | - | | listRenderItem | 这是 antd 的 renderItem 的别名 | (row,index)=> Node | - |
ProList.Item
如果你的 dataSource 包含 children,我们会将其打平传入到 renderItem 中,但是包含 children 的项会转化了 group 的样式,只支持 title 和 actions 的属性。
| 参数 | 说明 | 类型 | 默认值 | | :-- | :-- | :-- | :-- | | type | 列表项的预设样式 | new | top | - | | title | 列表项的主标题 | ReactNode | - | | subTitle | 列表项的副标题 | ReactNode | - | | checkbox | 列表的选择框 | React.ReactNode | - | | loading | 列表项是否在加载中 | React.ReactNode | - | | avatar | 列表项的头像 | AvatarProps | string | - | | actions | 操作列表项 | React.ReactNode[] | - | | description | 列表项的描述,与 title 不在一行 | React.ReactNode[] | - | | expandedRowClassName | 额外展开的 css | string | - | | expand | 列表项是否展开 | boolean | - | | onExpand | 列表项展开收起的回调 | (expand: boolean) => void | - | | expandable | 列表项展开配置 | object | - |