Filter

Properties

Filter

Property	Type	Required	Default value	Description
uid	string	No	-	Required when a page has multiple Filter components. The value must be unique on the page and match the `uid` of the inner FilterItem component.
className	string	No	-	The class name.

FilterItem

Property	Type	Required	Default value	Description
type	'default' | 'multiple'	No	'default'	The filter type. default: single-selection. multiple: multiple-selection.
value	any	No	-	The value of each item. Only controlled mode is supported.
items	{value: string; text: string; subText: string}[]	No	-	Valid when `type` is set to `default` or `multiple`.
placeholder	string	No	-	The text displayed when no value is selected.
uid	string	No	-	Required when a page has multiple Filter components. The value must be unique on the page and match the `uid` of the outer Filter component.
className	string	No	-	The class name.

Events

FilterItem

Event name	Description	Type
onChange	Triggered when the selected option changes.	(changedFields: Record<string, any>, allFields: Record<string, any>) => void
onOpen	Triggered when the selection panel opens.	() => void

Style classes

Class name	Description
amd-filter	The overall style.
amd-filter-bar	The style of the label bar.
amd-filter-bar-text	The style of the title in the title bar.
amd-filter-bar-text-icon	The style of the icon in the title bar.
amd-filter-items	The selection panel style.

Class name	Description
amd-filter-item	The overall style.
amd-filter-item-content	The content style.
amd-filter-item-content-wrap	The style of the selection panel area.
amd-filter-item-btns	The style of the button area.
amd-filter-item-btns-button	The style of the Reset/OK buttons.

Code examples

Basic usage

The following code is an example for index.axml:

<view>
  <demo-block title="Two filter items" padding="0">
    <filter 
      uid="filter-1" 
      className="filter-1">
      <filter-item
        uid="filter-1"
        placeholder="Filter Item 1"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>

      <filter-item 
        uid="filter-1"
        placeholder="Filter Item 2"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    </filter>
  </demo-block>
  <demo-block title="Three filter items" padding="0">
    <filter
      uid="filter-2" 
      className="filter-2">
      <filter-item
        uid="filter-2"
        placeholder="Filter Item 1"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>
    
      <filter-item 
        uid="filter-2"
        placeholder="Filter Item 2"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    
      <filter-item 
        uid="filter-2"
        placeholder="Filter item with long text"
        value=""
        items="{{items}}" 
        onChange="changeSelect"
        onOpen="onOpen"/>
    
    </filter>
  </demo-block>
  <demo-block title="Four filter items" padding="0">
    <filter
      uid="filter-3" 
      className="filter-3">
      <filter-item
        uid="filter-3"
        placeholder="Filter Item 1"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>
    
      <filter-item 
        uid="filter-3"
        placeholder="Filter Item 2"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    
        <filter-item
        uid="filter-3"
        placeholder="Filter Item 3"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>
    
      <filter-item 
        uid="filter-3"
        placeholder="Filter Item 4"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    
    </filter>
  </demo-block>
  <demo-block title="Slots: title and icon" padding="0">
    <filter 
      uid="filter-4" 
      className="filter-4">
    
      <view 
        slot-scope="item" 
        slot="title">
        {{item.title === 'Filter Item 1' ? 'Filter Item 1' : 'Filter Item 2'}}
      </view>
    
      <view slot="icon" slot-scope="item">
        <icon 
          type="DownOutline" 
          className="amd-filter-bar-text-icon {{item.active ? 'amd-filter-bar-text-icon-up' : ''}}" />
      </view>
    
      <filter-item
        uid="filter-4"
        placeholder="Filter Item 1"
        value="3"
        items="{{items}}"
        type="default" 
        ref="ref"
        onChange="changeSelect"
        onOpen="onOpen"/>
    
      <filter-item 
        uid="filter-4"
        placeholder="Filter Item 2"
        value="{{value}}"
        items="{{items1}}"
        type="multiple" 
        onChange="changeSelect"
        onOpen="onOpen"
        />
    
    </filter>
  </demo-block>
</view>

The following code is an example for index.js:

Page({
  data: {
    value: ['3', '5'],
    items: [
      {
        text: 'Option 1',
        value: '1',
      },
      {
        text: 'Option 2',
        value: '2',
      },
      {
        text: 'Option 3',
        value: '3',
      },
      {
        text: 'Option 4',
        value: '4',
      },
      {
        text: 'Option 5',
        value: '5',
      },
    ],
    items1: new Array(100).fill(0).map((_, idx) => {
      return {
        text: `Option ${idx + 1}`,
        value: `${idx + 1}`,
      };
    }),
  },
  changeSelect(v) {
    if (v.length > 0) {
      my.alert({
        content: `You selected ${v}`,
      });
    } else {
      my.showToast({
        content: 'No item is selected',
      });
    }
  },
  formatValue(fv) {
    return `${fv}`;
  },
  onOpen() {
    my.alert({
      title: 'Tab opened',
    });
  },
  onTap() {
    this.ins.changeSelect('1');
  },
  ref(ins) {
    this.ins = ins;
  },
});

The following code is an example for index.acss:

.filter-1 .amd-filter-item {
  z-index: 2;
}

.filter-2 .amd-filter-item {
  z-index: 2;
}

.filter-3 .amd-filter-item {
  z-index: 2;
}

The following code is an example for index.json:

{
  "defaultTitle": "Filter",
  "usingComponents": {
    "filter": "antd-mini/es/Filter/index",
    "filter-item": "antd-mini/es/Filter/FilterItem/index",
    "icon": "antd-mini/es/Icon/index",
    "demo-block": "../../components/DemoBlock/index"
  }
}