1# @ohos.arkui.advanced.Filter (Advanced Filter) 2 3 4The advanced filter component allows users to filter data with multiple criteria combined. It consists of a floating bar and filters therein. The floating bar can be expanded to reveal the filters, which come in a multi-line collapsible or multi-line list style. For added convenience, you can append an additional quick filter. 5 6 7> **NOTE** 8> 9> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## Modules to Import 13 14``` 15import { Filter } from '@ohos.arkui.advanced.Filter' 16``` 17 18 19## Child Components 20 21Not supported 22 23## Attributes 24The [universal attributes](ts-universal-attributes-size.md) are supported. 25 26## Filter 27 28Filter({ multiFilters: Array<FilterParams>, additionFilters: FilterParams, filterType: FilterType, onFilterChanged: (Array<FilterResult>) => void }) 29 30**Decorator**: @Component 31 32**System capability**: SystemCapability.ArkUI.ArkUI.Full 33 34**Parameters** 35 36 37| Name| Type| Mandatory | Decorator| Description| 38| -------- | -------- | -------- | -------- | -------- | 39| multiFilters | Array<[FilterParams](#filterparams)> | Yes | \@Prop | List of filter criteria.| 40| additionFilters | [FilterParams](#filterparams) | No | \@Prop | Additional quick filter.| 41| filterType | [FilterType](#filtertype) | No | \@Prop | Filter type.| 42| onFilterChanged | (Array<[FilterResult](#filterresult)>) => void | Yes | - | Callback invoked when the filter criteria is changed. The input parameter is the list of selected filter criteria.| 43| container | ()=>void | Yes | \@BuilderParam | Custom content of the filtering result display area, which is passed in a trailing closure.| 44 45 46## FilterParams 47 48| Name| Type| Mandatory| Description| 49| -------- | -------- | -------- | -------- | 50| name | [ResourceStr](ts-types.md#resourcestr) | Yes| Name of the filter criterion.| 51| options | Array<[ResourceStr](ts-types.md#resourcestr)> | Yes| Options of the filter criterion.| 52 53 54## FilterType 55 56| Name| Value| Description| 57| -------- | -------- | -------- | 58| MULTI_LINE_FILTER | 0 | Multi-line collapsible.| 59| LIST_FILTER | 1 | Multi-line list.| 60 61 62## FilterResult 63 64| Name| Type| Mandatory| Description| 65| -------- | -------- | -------- | -------- | 66| name | [ResourceStr](ts-types.md#resourcestr) | Yes| Name of the filter criterion.| 67| index | number | Yes| Index of the selected option of the filter criterion.| 68| value | [ResourceStr](ts-types.md#resourcestr) | Yes| Value of the selected option of the filter criterion.| 69 70## Events 71The [universal events](ts-universal-events-click.md) are not supported. 72 73## Example 74 75```ts 76import { Filter, FilterParams, FilterResult, FilterType } from '@ohos.arkui.advanced.Filter' 77 78@Entry 79@Component 80struct Index { 81 private filterParam: Array<FilterParams> = [{name:'Month', options: ['All', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}, 82 {name: 'Year', options: ['All','2023','2022','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010','2009','2008']}, 83 {name: 'Week', options: ['All','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']}] 84 private additionParam: FilterParams = { name: 'Suggestions', options: ['Category 1','Category 2','Category 3','Category 4','Category 5','Category 6']} 85 private arr: number[] = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10]; 86 build() { 87 Column() { 88 Filter({ 89 multiFilters: this.filterParam, 90 additionFilters: this.additionParam, 91 filterType: FilterType.MULTI_LINE_FILTER, 92 onFilterChanged: (select: Array<FilterResult>) => { 93 console.log('rec filter change') 94 for (let filter of select) { 95 console.log('name:' + filter.name + ',index:' + filter.index + ',value:' + filter.value) 96 } 97 } 98 }){ 99 List({ initialIndex: 0 }) { 100 ForEach(this.arr, (item:string, index: number) => { 101 ListItem() { 102 Text(item.toString()) 103 .width("100%") 104 .height(100) 105 .fontSize(16) 106 .textAlign(TextAlign.Center) 107 .borderRadius(10) 108 .backgroundColor(Color.White) 109 .margin({ top:10, bottom: 10 }) 110 } 111 }) 112 }.backgroundColor(Color.Gray) 113 .padding({ left: 20, right: 20 }) 114 } 115 } 116 .height('100%') 117 .width('100%') 118 } 119} 120``` 121 122 123
