0.0.9 • Published 2 years ago

@mas.io/mas-indexed-list v0.0.9

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

安装

tnpm install --save @alipay/mas-indexed-list

组件介绍

右侧带有快速选择的列表组件

参数说明

属性必填参数类型参数说明默认值示例
options是array索引列表数据[]-
anchorClass否string可设置右侧锚点样式''-
showThumb否boolean是否展示左侧图标，默认不展示false-
showValue否boolean是否展示右value值，默认展示true-
onItemClick否function单击每一项的回调函数空函数-
hotIndex否string热门索引''-

Badges

TNPM version TNPM downloads install size

options每一项的的结构如下

属性必填参数类型参数说明默认值示例
letter是string索引值''-
data是array每一项的数组[]-

options.data每一项的的结构如下

属性必填参数类型参数说明默认值示例
name是string每一项显示名称''-
value是string每一项的值''-
icon否string每一项的logo''-
defaultIcon否string每一项logo默认图片''-

slot

name说明
hot顶部插槽，可用于自定义header，当hotIndex设置时生效

options: 数据内容，数据结构为

[
  {
    letter: 'A',
    data: [
      {
        name: '阿富汗',
        value: 'AFH',
        icon: 'https://gw.alipayobjects.com/mdn/rms_2ece3b/afts/img/A*TEK1RoULNGMAAAAAAAAAAABkARQnAQ',
        defaultIcon: 'https://img.alicdn.com/imgextra/i4/2200637533148/O1CN01dCeM8t1Z7pMIRvsPx_!!2200637533148-2-tmallcaradmin.png',
      }
      ....
    ]
  }
  ...
]

在小程序中使用

{
  "usingComponents": {
    "mas-indexed-list": "@alipay/mas-indexed-list/es/index"
  }
}

调用方式

  <mas-indexed-list 
    options="{{ options }}" 
    showSelect="{{ false }}"
    showThumb="{{ false }}"
    showValue="{{ true }}"
    anchorClass=""
    className=""
    onItemClick="onItemClick"
  />
@mas.io/falcon-core
@infinitebrahmanuniverse/nolb-_mas@everything-registry/sub-chunk-583
0.0.9

2 years ago