@ohos.arkui.advanced.Filter (Advanced Filter)
The 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.
NOTE
This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
Modules to Import
import { Filter } from '@ohos.arkui.advanced.Filter'
Child Components
Not supported
Attributes
The universal attributes are supported.
Filter
Filter({ multiFilters: Array<FilterParams>, additionFilters: FilterParams, filterType: FilterType, onFilterChanged: (Array<FilterResult>) => void, container: ()=> void })
Decorator: @Component
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
Name | Type | Mandatory | Decorator | Description |
---|---|---|---|---|
multiFilters | Array<FilterParams> | Yes | @Prop | List of filter criteria. |
additionFilters | FilterParams | No | @Prop | Additional quick filter. |
filterType | FilterType | No | @Prop | Filter type. |
onFilterChanged | (Array<FilterResult>) => void | Yes | - | Callback invoked when the filter criteria is changed. The input parameter is the list of selected filter criteria. |
container | ()=>void | Yes | @BuilderParam | Custom content of the filtering result display area, which is passed in a trailing closure. |
FilterParams
Name | Type | Mandatory | Description |
---|---|---|---|
name | ResourceStr | Yes | Name of the filter criterion. |
options | Array<ResourceStr> | Yes | Options of the filter criterion. |
FilterType
Name | Value | Description |
---|---|---|
MULTI_LINE_FILTER | 0 | Multi-line collapsible. |
LIST_FILTER | 1 | Multi-line list. |
FilterResult
Name | Type | Mandatory | Description |
---|---|---|---|
name | ResourceStr | Yes | Name of the filter criterion. |
index | number | Yes | Index of the selected option of the filter criterion. |
value | ResourceStr | Yes | Value of the selected option of the filter criterion. |
Events
The universal events are not supported.
Example
import { Filter, FilterParams, FilterResult, FilterType } from '@ohos.arkui.advanced.Filter'
@Entry
@Component
struct Index {
private filterParam: Array<FilterParams> = [{name:'Month', options: ['All', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']},
{name: 'Year', options: ['All','2023','2022','2021','2020','2019','2018','2017','2016','2015','2014','2013','2012','2011','2010','2009','2008']},
{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']}]
private additionParam: FilterParams = { name: 'Suggestions', options: ['Category 1','Category 2','Category 3','Category 4','Category 5','Category 6']}
private arr: number[] = [1,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,10];
build() {
Column() {
Filter({
multiFilters: this.filterParam,
additionFilters: this.additionParam,
filterType: FilterType.MULTI_LINE_FILTER,
onFilterChanged: (select: Array<FilterResult>) => {
console.log('rec filter change')
for (let filter of select) {
console.log('name:' + filter.name + ',index:' + filter.index + ',value:' + filter.value)
}
}
}){
List({ initialIndex: 0 }) {
ForEach(this.arr, (item:string, index: number) => {
ListItem() {
Text(item.toString())
.width("100%")
.height(100)
.fontSize(16)
.textAlign(TextAlign.Center)
.borderRadius(10)
.backgroundColor(Color.White)
.margin({ top:10, bottom: 10 })
}
})
}.backgroundColor(Color.Gray)
.padding({ left: 20, right: 20 })
}
}
.height('100%')
.width('100%')
}
}