Filter

2023-03-28 12:11

Use as tab filter.

Filter

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

Property	Description	Type	Default	Required
className	Custom style.	String		No
value	Value.	String		Yes
id	Custom identifier.	String		No
selected	Selected by default.	Boolean	false	No
onChange	Submit selection callback upon single choice.	(e: Object) => void		No

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