All Products
Search
Document Center

Filter

Last Updated: Feb 04, 2021

This component is used to filter items.

filter

Property Description Type Default value Mandatory
show Whether to display. The value can be show or hide String hide false
max Maximum number of optional items. Only one item can be selected when the value is 1. Number 10000 false
onChange Callback when multiple selected items are submitted. (e: Object) => void - false

filter-item

Property Description Type Default value Mandatory
className The custom style. String - false
value Value String - true
id Custom identifier. String - false
selected Selected by default. Boolean false false
onChange Callback when a selected item is submitted. (e: Object) => void - false

Sample code

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "filter": "mini-antui/es/filter/index",
  5. "filter-item": "mini-antui/es/filter/filter-item/index"
  6. }
  7. }
 
  1. <filter show="{{show}}" max="{{5}}" onChange="handleCallBack">
  2. <block a:for="{{items}}">
  3. <filter-item value="{{item.value}}" id="{{item.id}}" selected="{{item.selected}}"/>
  4. </block>
  5. </filter>
 
  1. Page({
  2. data: {
  3. show: true,
  4. items: [
  5. { id: 1, value: 'clothes', selected: true },
  6. { id: 1, value: 'cabinet' },
  7. { id: 1, value: 'clothes hanger' },
  8. { id: 3, value: 'digital product' },
  9. { id: 4, value: 'security door' },
  10. { id: 5, value: 'chair' },
  11. { id: 7, value: 'display' },
  12. { id: 6, value: 'the latest digital product' },
  13. { id: 8, value: 'video game base of a brand' },
  14. ]
  15. },
  16. handleCallBack(data) {
  17. my.alert({
  18. content: data
  19. });
  20. },
  21. toggleFilter() {
  22. this.setData({
  23. show: !this.data.show,
  24. });
  25. }
  26. });