跳到主要内容

List 列表

介绍​

通用列表展示。

用法​

基础​

<OsList title='我是标题' onClick={(e) => onClick(e)}></OsList>
<OsList
  title='我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题我是标题'
  onClick={(e) => onClick(e)}
></OsList>

带副标题​

<OsList title='我是标题' subTitle='我是副标题'></OsList>

带左侧icon​

<OsList title='我是标题' leftIcon='record'></OsList>
<OsList
  title='我是标题'
  rightIcon='arrows'
  subTitle='副标题'
  leftIcon='record'
></OsList>

右侧带icon​

<OsList title='我是标题' rightIcon='arrows'></OsList>

带描述​

<OsList title='我是标题' desc='描述文字'></OsList>
<OsList title='我是标题' desc='描述文字' rightIcon='arrows'></OsList>
<OsList
  title='我是标题'
  desc='描述文字'
  rightIcon='arrows'
  leftIcon='record'
></OsList>

内容自定义​

<OsList
  title='我是标题'
  subTitle='我是副标题'
  type='custom'
  rightIcon='arrows'
>
  <OsBadge type='list'></OsBadge>
</OsList>

内容自定义​

<OsList desc='这里是自定义例举例' type='custom'>
  <Image
    className='list--test__image'
    src='http://yanxuan.nosdn.127.net/25223742d4031d15c48c93a0b7b760c0.jpg?imageView&thumbnail=160x0&quality=95'
  ></Image>
</OsList>

API​

属性​

参数说明类型默认值
typedefault | custom，可选stringdefault
title标题，可选string-
subTitle副标题，可选string-
desc描述，可选string-
rightIcon右侧icon，取值参考OsIcon，可选string-
leftIcon左侧icon，取值参考OsIcon，可选string-
showSplitLine展示分割线，可选booleantrue
color标题颜色，可选string#333333
descColor副标题或者描述字体颜色，可选string#7f7f7f
bgColor背景色，可选string#ffffff
activeBgColor激活态背景色，可选string#f9f9f9
leftIconSize左侧图标尺寸，可选number36
className自定义类名，可选string-
customStyle自定义样式，可选object-

方法​

函数名说明参数
onClick点击时触发event 对象