Filter

2022-07-29 06:32

Use as tab filter.

Filter

Attribute Name	Description	Type	Default	Mandatory
show	Show or not, optional, `show` `hide`	String	hide	false
max	Maximum choices, 1 for single choice	Number	10000	false
onChange	Submit selection callback upon multiple choice	(e: Object) => void		false

Attribute Name	Description	Type	Default	Mandatory
className	Custom style	String		false
value	Value	String		true
id	Custom identifier	String		false
selected	Selected by default	Boolean	false	false
onChange	Submit selection callback upon single choice	(e: Object) => void		false

Example

copy

{
  "defaultTitle": "AntUI Component Library",
  "usingComponents": {
    "filter": "mini-antui/es/filter/index",
    "filter-item": "mini-antui/es/filter/filter-item/index"
  }
}

copy

<filter show="{{show}}" max="{{5}}" onChange="handleCallBack">
  <block a:for="{{items}}">
    <filter-item value="{{item.value}}" id="{{item.id}}" selected="{{item.selected}}"/>
  </block>
</filter>

copy

Page({
  data: {
    show: true,
    items: [
      { id: 1, value: 'Clothes', selected: true },
      { id: 1, value: 'Cupboard' },
      { id: 1, value: 'Hanger' },
      { id: 3, value: 'Digital' },
      { id: 4, value: 'Door' },
      { id: 5, value: 'Chair' },
      { id: 7, value: 'Monitor' },
      { id: 6, value: 'Game' },
      { id: 8, value: 'Food' },
    ]
  },
  handleCallBack(data) {
    my.alert({
      content: data
    });
  },
  toggleFilter() {
    this.setData({
      show: !this.data.show,
    });
  }
});

Filter

Filter

Filter-item

Example