@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 })

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%')
  }
}

en-us_image_0000001665809293