• List 列表

    通用列表。

    何时使用

    最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。

    列表拥有大、中、小三种尺寸。

    通过设置 sizelarge small 分别把按钮设为大、小尺寸。若不设置 size,则尺寸为中。

    可通过设置 headerfooter,来自定义列表头部和尾部。

    基础列表。

    可通过 loadMore 属性实现加载更多功能。

    通过设置 itemLayout 属性为 vertical 可实现竖排列表样式。

    可以通过设置 Listgrid 属性来实现栅格列表,column 可设置期望显示的列数。

    响应式的栅格列表。尺寸与 Layout Grid 保持一致。

    结合 react-infinite-scroller 实现滚动自动加载列表。

    API

    List

    参数 说明 类型 默认值
    bordered 是否展示边框 boolean false
    footer 列表底部 string|ReactNode -
    grid 列表栅格配置 object -
    header 列表头部 string|ReactNode -
    itemLayout 设置 List.Item 布局, 设置成 vertical 则竖直样式显示, 默认横排 string -
    loading 当卡片内容还在加载中时,可以用 loading 展示一个占位 boolean|object (更多) false
    loadMore 加载更多 string|ReactNode -
    pagination 对应的 pagination 配置, 设置 false 不显示 boolean|object false
    size list 的尺寸 default | middle | small default
    split 是否展示分割线 boolean true

    List grid props

    参数 说明 类型 默认值
    column 列数 number -
    gutter 栅格间隔 number 0
    xs <576px 展示的列数 number -
    sm ≥576px 展示的列数 number -
    md ≥768px 展示的列数 number -
    lg ≥992px 展示的列数 number -
    xl ≥1200px 展示的列数 number -
    xxl ≥1600px 展示的列数 number -

    List.Item

    参数 说明 类型 默认值
    actions 列表操作组,根据 itemLayout 的不同, 位置在卡片底部或者最右侧 Array<ReactNode> -
    extra 额外内容, 通常用在 itemLayoutvertical 的情况下, 展示右侧内容; horizontal 展示在列表元素最右侧 string|ReactNode -

    List.Item.Meta

    参数 说明 类型 默认值
    avatar 列表元素的图标 ReactNode -
    description 列表元素的描述内容 string|ReactNode -
    title 列表元素的标题 string|ReactNode -