list

图文列表 组件 + Demo

• 组件支持

  • 两种布局方式：左图右文、左文右图
  • 右侧 icon 显示、类型、大小 可配置
  • 滑动删除 可配置

• Demo包括

  • 图加标题
  • 图文纵排
  • 信息卡列表

• 以下是组件使用方式介绍

Simple Usage

<List
    layout="left"
    hasRightIcon={true}
    iconName='angle-right'
    iconWidth={20}
    isDelete={false}
    data={[
    {
        imgUrl : "https://img.alicdn.com/tps/TB1P1vaLpXXXXXxaXXXXXXXXXXX-50-50.jpg",
        title : "列表标题",
        text : "列表内容测试测试测试测试测试测试测试测试测试测试测试测试"
    }]}/>

Props

className

描述：自定义样式的class名称

类型：String

默认：''

必选：否

示例：

<List className="customClass"/>

layout

描述：自定义列表布局方式

类型：String

默认：left

可选值：left、right

必选：否

示例：

<List layout="right"/>

hasRightIcon

描述：控制列表右侧 icon 的显示

类型：Boolen

默认：true

必选：否

示例：

<List hasArrow={true}/>

iconName

描述：控制列表右侧 icon 的类型

类型：String

默认：angle-right

必选：否

示例：

<List iconName="angle-left"/>

iconWidth

描述：控制列表右侧 icon 的宽度

类型：Number

默认：20

必选：否

示例：

<List iconWidth={24}/>

isDelete

描述：控制列表是否支持滑动删除

类型：Boolen

默认：false

必选：否

示例：

<List isDelete={true}/>

data

描述：列表数据

类型：Array

默认：[{imgUrl:'',title:'',text:''}]

必选：是

示例：

<List data={[
    {
        imgUrl : "https://img.alicdn.com/tps/TB1P1vaLpXXXXXxaXXXXXXXXXXX-50-50.jpg",
        title : "列表标题",
        text : "列表内容测试测试测试测试测试测试测试测试测试测试测试测试"
    }]}/>

APIs

无