**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array
![](\"https://img.alicdn.com/tfs/TB1QjQifuH2gK0jSZJnXXaT1FXa-1085-795.png_600x600.jpg\")
\n\n\n## 安装方法\n在命令行中执行以下命令\n```\nnpm install @rax-ui/filter -S\n```\n\n## 使用方式\n```\nimport Filter from '@rax-ui/filter';\nimport ListSelect from '@rax-ui/filter-list-select';\n\nrender(\n **效果图**
 | Array<Object> | - (必填) |\n| offsetTop | Filter组件展开面板状态下距离页面顶部的高度，有两种状态：**固定位置**和**跟随页面滚动吸附置顶**
**固定位置：**状态下距离页面顶部的高度
**跟随页面滚动吸附置顶：**状态下距离页面顶部的高度
**效果图**
 | Number | -(必填) |\n| styles | 配置样式，Filter中所有样式都可使用`styles`集合对象来配置覆盖，详见CSS API | Object | {} | \n| clickMaskClosable | 开启 mask 背景的点击隐藏 | Boolean | true |\n| onPanelVisibleChange | Panel 显示隐藏回调函数
**签名：** `Function({ visible:Boolean, triggerIndex:Number, triggerType:String }) => void`
**参数：**
`visible:Boolean` 显示隐藏标志量
`triggerIndex:Number`触发的筛选项索引值
`triggerType:String` 触发类型
**triggerType详解** 包含三种触发类型
`Navbar`:来自筛选头的点击触发
`Mask`:来自背景层的点击触发
`Panel`:来自Panel 的 onChange 回调触发 | Function | | \n| onChange | Filter 搜索变更回调函数
**签名：** `Function(params:Object, urlQuery: Object) => void`
**参数：**
`params: Object` 标准化搜索参数，必须包含`{filterKey, filterText, filterValue, filterValueChanged}`
`urlQuery:Object` URL query 对象
| Function | | \n\n#### Filter 组件 `props.navConfig` 数组配置详解\n#### navConfig\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）\n| -------- | -------- | -------- | -------- | \n| type | 筛选项类型
**三种类型**
`RelatePanel`: 【默认类型】筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
`QuickSearch`: 筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
`Custom`: 自定义类型，UI完全自定义，通过 `renderItem`函数返回 JSX | String | 'RelatePanel' |\n| text
**注意** `RelatePanel`类型生效 | 筛选头显示文案
文字溢出用`...`展示 | String | - (必填) |\n| icon
**注意** `RelatePanel`类型生效 | 筛选头 icon：normal 正常态 和 active 激活态 图标
**数据格式**
`Object`类型 :
`String`类型 :
**效果图**
 | Object or String | - | \n| options
**注意** `QuickSearch`类型生效 | 快速搜索排序类型的数据源
**数据格式**
 | Array | (必填) |\n| optionsIndex
**注意** `QuickSearch`类型生效 | 快速搜索排序类型默认选中的索引 | String | 0 |\n| optionsKey
**注意** `QuickSearch`类型生效 | 指定快速搜索排序对应的搜索 key,用到 onChange 回调中| String | 不提供默认使用当前筛选项的索引 |\n| loop
**注意** `QuickSearch`类型生效 | 点击是否依托options数组项循环 | Boolean | true |\n| formatText | 文案格式化函数
**签名：**`Function(text:String) => text`
**参数：**
`text: String` 筛选头文案 | Function | (text)=>text |\n| disabled | 禁用筛选头点击 | Boolean | true | \n| highlight | 是否保持文字图标高亮
| Boolean | false | \n| hasSeperator | 是否展示右侧分隔符
**效果图**
 | Boolean | false | \n| renderItem | 自定义渲染
**注意**
提供的配置项无法满足你的 UI 需求时使用
**签名：**`Function(isActive:Boolean, this:Element) => Element`
**参数：**
`isActive:Boolean` 筛选头是否为激活状态
`this:Element` 筛选头this实例 | Function | - |\n| animation | 动画配置，采用内置的动画
**参数说明**
**注意** 目前只内置了一种`rotate`动画类型 | Object | | \n| animationHook | 用户自定义动画的钩子函数，内置动画无法满足需求时使用
**签名：**`Function(refImg:Element, isActive:Boolean) => text`
**参数：**
`refImg:Element` 筛选头图标的 ref 实例
`isActive:Boolean` 筛选头是否为激活状态 | Function | - | \n\n### Filter.Panel Props\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）|\n| -------- | -------- | -------- | -------- | \n| displayMode | Panel 展现形式：全屏、下拉
**参数说明**
全屏：`Fullscreen`
下拉：`Dropdown` | String | 'Dropdown' | \n| animation | Panel 展示动画配置，内置上下左右动画
**参数说明**
`direction` 控制动画方向，分别有 `up`、`down`、`left`、`right` | Object | | \n| highPerformance | 内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render | Boolean |true|\n| noAnimation |禁用动画| Boolean|false |\n\n\n### Filter 方法\n\n|名称 | 说明 | 类型 | 默认值 |\n|:---------------|:--------|:----|:----------|\n| reset | 重置内部选中状态 | Function
**签名：**`Function(navConfig:Array
**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array
\n\n\n## 安装方法\n在命令行中执行以下命令\n```\nnpm install @rax-ui/filter -S\n```\n\n## 使用方式\n```\nimport Filter from '@rax-ui/filter';\nimport ListSelect from '@rax-ui/filter-list-select';\n\nrender(\n **效果图**
 | Array<Object> | - (必填) |\n| offsetTop | Filter组件展开面板状态下距离页面顶部的高度，有两种状态：**固定位置**和**跟随页面滚动吸附置顶**
**固定位置：**状态下距离页面顶部的高度
**跟随页面滚动吸附置顶：**状态下距离页面顶部的高度
**效果图**
 | Number | -(必填) |\n| styles | 配置样式，Filter中所有样式都可使用`styles`集合对象来配置覆盖，详见CSS API | Object | {} | \n| clickMaskClosable | 开启 mask 背景的点击隐藏 | Boolean | true |\n| onPanelVisibleChange | Panel 显示隐藏回调函数
**签名：** `Function({ visible:Boolean, triggerIndex:Number, triggerType:String }) => void`
**参数：**
`visible:Boolean` 显示隐藏标志量
`triggerIndex:Number`触发的筛选项索引值
`triggerType:String` 触发类型
**triggerType详解** 包含三种触发类型
`Navbar`:来自筛选头的点击触发
`Mask`:来自背景层的点击触发
`Panel`:来自Panel 的 onChange 回调触发 | Function | | \n| onChange | Filter 搜索变更回调函数
**签名：** `Function(params:Object, urlQuery: Object) => void`
**参数：**
`params: Object` 标准化搜索参数，必须包含`{filterKey, filterText, filterValue, filterValueChanged}`
`urlQuery:Object` URL query 对象
| Function | | \n\n#### Filter 组件 `props.navConfig` 数组配置详解\n#### navConfig\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）\n| -------- | -------- | -------- | -------- | \n| type | 筛选项类型
**三种类型**
`RelatePanel`: 【默认类型】筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
`QuickSearch`: 筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
`Custom`: 自定义类型，UI完全自定义，通过 `renderItem`函数返回 JSX | String | 'RelatePanel' |\n| text
**注意** `RelatePanel`类型生效 | 筛选头显示文案
文字溢出用`...`展示 | String | - (必填) |\n| icon
**注意** `RelatePanel`类型生效 | 筛选头 icon：normal 正常态 和 active 激活态 图标
**数据格式**
`Object`类型 :
`String`类型 :
**效果图**
 | Object or String | - | \n| options
**注意** `QuickSearch`类型生效 | 快速搜索排序类型的数据源
**数据格式**
 | Array | (必填) |\n| optionsIndex
**注意** `QuickSearch`类型生效 | 快速搜索排序类型默认选中的索引 | String | 0 |\n| optionsKey
**注意** `QuickSearch`类型生效 | 指定快速搜索排序对应的搜索 key,用到 onChange 回调中| String | 不提供默认使用当前筛选项的索引 |\n| loop
**注意** `QuickSearch`类型生效 | 点击是否依托options数组项循环 | Boolean | true |\n| formatText | 文案格式化函数
**签名：**`Function(text:String) => text`
**参数：**
`text: String` 筛选头文案 | Function | (text)=>text |\n| disabled | 禁用筛选头点击 | Boolean | true | \n| highlight | 是否保持文字图标高亮
| Boolean | false | \n| hasSeperator | 是否展示右侧分隔符
**效果图**
 | Boolean | false | \n| renderItem | 自定义渲染
**注意**
提供的配置项无法满足你的 UI 需求时使用
**签名：**`Function(isActive:Boolean, this:Element) => Element`
**参数：**
`isActive:Boolean` 筛选头是否为激活状态
`this:Element` 筛选头this实例 | Function | - |\n| animation | 动画配置，采用内置的动画
**参数说明**
**注意** 目前只内置了一种`rotate`动画类型 | Object | | \n| animationHook | 用户自定义动画的钩子函数，内置动画无法满足需求时使用
**签名：**`Function(refImg:Element, isActive:Boolean) => text`
**参数：**
`refImg:Element` 筛选头图标的 ref 实例
`isActive:Boolean` 筛选头是否为激活状态 | Function | - | \n\n### Filter.Panel Props\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）|\n| -------- | -------- | -------- | -------- | \n| displayMode | Panel 展现形式：全屏、下拉
**参数说明**
全屏：`Fullscreen`
下拉：`Dropdown` | String | 'Dropdown' | \n| animation | Panel 展示动画配置，内置上下左右动画
**参数说明**
`direction` 控制动画方向，分别有 `up`、`down`、`left`、`right` | Object | | \n| highPerformance | 内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render | Boolean |true|\n| noAnimation |禁用动画| Boolean|false |\n\n\n### Filter 方法\n\n|名称 | 说明 | 类型 | 默认值 |\n|:---------------|:--------|:----|:----------|\n| reset | 重置内部选中状态 | Function
**签名：**`Function(navConfig:Array
**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array
\n\n\n## 安装方法\n在命令行中执行以下命令\n```\nnpm install @rax-ui/filter -S\n```\n\n## 使用方式\n```\nimport Filter from '@rax-ui/filter';\nimport ListSelect from '@rax-ui/filter-list-select';\n\nrender(\n **效果图**
 | Array<Object> | - (必填) |\n| offsetTop | Filter组件展开面板状态下距离页面顶部的高度，有两种状态：**固定位置**和**跟随页面滚动吸附置顶**
**固定位置：**状态下距离页面顶部的高度
**跟随页面滚动吸附置顶：**状态下距离页面顶部的高度
**效果图**
 | Number | -(必填) |\n| styles | 配置样式，Filter中所有样式都可使用`styles`集合对象来配置覆盖，详见CSS API | Object | {} | \n| clickMaskClosable | 开启 mask 背景的点击隐藏 | Boolean | true |\n| onPanelVisibleChange | Panel 显示隐藏回调函数
**签名：** `Function({ visible:Boolean, triggerIndex:Number, triggerType:String }) => void`
**参数：**
`visible:Boolean` 显示隐藏标志量
`triggerIndex:Number`触发的筛选项索引值
`triggerType:String` 触发类型
**triggerType详解** 包含三种触发类型
`Navbar`:来自筛选头的点击触发
`Mask`:来自背景层的点击触发
`Panel`:来自Panel 的 onChange 回调触发 | Function | | \n| onChange | Filter 搜索变更回调函数
**签名：** `Function(params:Object, urlQuery: Object) => void`
**参数：**
`params: Object` 标准化搜索参数，必须包含`{filterKey, filterText, filterValue, filterValueChanged}`
`urlQuery:Object` URL query 对象
| Function | | \n\n#### Filter 组件 `props.navConfig` 数组配置详解\n#### navConfig\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）\n| -------- | -------- | -------- | -------- | \n| type | 筛选项类型
**三种类型**
`RelatePanel`: 【默认类型】筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
`QuickSearch`: 筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
`Custom`: 自定义类型，UI完全自定义，通过 `renderItem`函数返回 JSX | String | 'RelatePanel' |\n| text
**注意** `RelatePanel`类型生效 | 筛选头显示文案
文字溢出用`...`展示 | String | - (必填) |\n| icon
**注意** `RelatePanel`类型生效 | 筛选头 icon：normal 正常态 和 active 激活态 图标
**数据格式**
`Object`类型 :
`String`类型 :
**效果图**
 | Object or String | - | \n| options
**注意** `QuickSearch`类型生效 | 快速搜索排序类型的数据源
**数据格式**
 | Array | (必填) |\n| optionsIndex
**注意** `QuickSearch`类型生效 | 快速搜索排序类型默认选中的索引 | String | 0 |\n| optionsKey
**注意** `QuickSearch`类型生效 | 指定快速搜索排序对应的搜索 key,用到 onChange 回调中| String | 不提供默认使用当前筛选项的索引 |\n| loop
**注意** `QuickSearch`类型生效 | 点击是否依托options数组项循环 | Boolean | true |\n| formatText | 文案格式化函数
**签名：**`Function(text:String) => text`
**参数：**
`text: String` 筛选头文案 | Function | (text)=>text |\n| disabled | 禁用筛选头点击 | Boolean | true | \n| highlight | 是否保持文字图标高亮
| Boolean | false | \n| hasSeperator | 是否展示右侧分隔符
**效果图**
 | Boolean | false | \n| renderItem | 自定义渲染
**注意**
提供的配置项无法满足你的 UI 需求时使用
**签名：**`Function(isActive:Boolean, this:Element) => Element`
**参数：**
`isActive:Boolean` 筛选头是否为激活状态
`this:Element` 筛选头this实例 | Function | - |\n| animation | 动画配置，采用内置的动画
**参数说明**
**注意** 目前只内置了一种`rotate`动画类型 | Object | | \n| animationHook | 用户自定义动画的钩子函数，内置动画无法满足需求时使用
**签名：**`Function(refImg:Element, isActive:Boolean) => text`
**参数：**
`refImg:Element` 筛选头图标的 ref 实例
`isActive:Boolean` 筛选头是否为激活状态 | Function | - | \n\n### Filter.Panel Props\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）|\n| -------- | -------- | -------- | -------- | \n| displayMode | Panel 展现形式：全屏、下拉
**参数说明**
全屏：`Fullscreen`
下拉：`Dropdown` | String | 'Dropdown' | \n| animation | Panel 展示动画配置，内置上下左右动画
**参数说明**
`direction` 控制动画方向，分别有 `up`、`down`、`left`、`right` | Object | | \n| highPerformance | 内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render | Boolean |true|\n| noAnimation |禁用动画| Boolean|false |\n\n\n### Filter 方法\n\n|名称 | 说明 | 类型 | 默认值 |\n|:---------------|:--------|:----|:----------|\n| reset | 重置内部选中状态 | Function
**签名：**`Function(navConfig:Array
**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array
\n\n\n## 安装方法\n在命令行中执行以下命令\n```\nnpm install @rax-ui/filter -S\n```\n\n## 使用方式\n```\nimport Filter from '@rax-ui/filter';\nimport ListSelect from '@rax-ui/filter-list-select';\n\nrender(\n **效果图**
 | Array<Object> | - (必填) |\n| offsetTop | Filter组件展开面板状态下距离页面顶部的高度，有两种状态：**固定位置**和**跟随页面滚动吸附置顶**
**固定位置：**状态下距离页面顶部的高度
**跟随页面滚动吸附置顶：**状态下距离页面顶部的高度
**效果图**
 | Number | -(必填) |\n| styles | 配置样式，Filter中所有样式都可使用`styles`集合对象来配置覆盖，详见CSS API | Object | {} | \n| clickMaskClosable | 开启 mask 背景的点击隐藏 | Boolean | true |\n| onPanelVisibleChange | Panel 显示隐藏回调函数
**签名：** `Function({ visible:Boolean, triggerIndex:Number, triggerType:String }) => void`
**参数：**
`visible:Boolean` 显示隐藏标志量
`triggerIndex:Number`触发的筛选项索引值
`triggerType:String` 触发类型
**triggerType详解** 包含三种触发类型
`Navbar`:来自筛选头的点击触发
`Mask`:来自背景层的点击触发
`Panel`:来自Panel 的 onChange 回调触发 | Function | | \n| onChange | Filter 搜索变更回调函数
**签名：** `Function(params:Object, urlQuery: Object) => void`
**参数：**
`params: Object` 标准化搜索参数，必须包含`{filterKey, filterText, filterValue, filterValueChanged}`
`urlQuery:Object` URL query 对象
| Function | | \n\n#### Filter 组件 `props.navConfig` 数组配置详解\n#### navConfig\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）\n| -------- | -------- | -------- | -------- | \n| type | 筛选项类型
**三种类型**
`RelatePanel`: 【默认类型】筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
`QuickSearch`: 筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
`Custom`: 自定义类型，UI完全自定义，通过 `renderItem`函数返回 JSX | String | 'RelatePanel' |\n| text
**注意** `RelatePanel`类型生效 | 筛选头显示文案
文字溢出用`...`展示 | String | - (必填) |\n| icon
**注意** `RelatePanel`类型生效 | 筛选头 icon：normal 正常态 和 active 激活态 图标
**数据格式**
`Object`类型 :
`String`类型 :
**效果图**
 | Object or String | - | \n| options
**注意** `QuickSearch`类型生效 | 快速搜索排序类型的数据源
**数据格式**
 | Array | (必填) |\n| optionsIndex
**注意** `QuickSearch`类型生效 | 快速搜索排序类型默认选中的索引 | String | 0 |\n| optionsKey
**注意** `QuickSearch`类型生效 | 指定快速搜索排序对应的搜索 key,用到 onChange 回调中| String | 不提供默认使用当前筛选项的索引 |\n| loop
**注意** `QuickSearch`类型生效 | 点击是否依托options数组项循环 | Boolean | true |\n| formatText | 文案格式化函数
**签名：**`Function(text:String) => text`
**参数：**
`text: String` 筛选头文案 | Function | (text)=>text |\n| disabled | 禁用筛选头点击 | Boolean | true | \n| highlight | 是否保持文字图标高亮
| Boolean | false | \n| hasSeperator | 是否展示右侧分隔符
**效果图**
 | Boolean | false | \n| renderItem | 自定义渲染
**注意**
提供的配置项无法满足你的 UI 需求时使用
**签名：**`Function(isActive:Boolean, this:Element) => Element`
**参数：**
`isActive:Boolean` 筛选头是否为激活状态
`this:Element` 筛选头this实例 | Function | - |\n| animation | 动画配置，采用内置的动画
**参数说明**
**注意** 目前只内置了一种`rotate`动画类型 | Object | | \n| animationHook | 用户自定义动画的钩子函数，内置动画无法满足需求时使用
**签名：**`Function(refImg:Element, isActive:Boolean) => text`
**参数：**
`refImg:Element` 筛选头图标的 ref 实例
`isActive:Boolean` 筛选头是否为激活状态 | Function | - | \n\n### Filter.Panel Props\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）|\n| -------- | -------- | -------- | -------- | \n| displayMode | Panel 展现形式：全屏、下拉
**参数说明**
全屏：`Fullscreen`
下拉：`Dropdown` | String | 'Dropdown' | \n| animation | Panel 展示动画配置，内置上下左右动画
**参数说明**
`direction` 控制动画方向，分别有 `up`、`down`、`left`、`right` | Object | | \n| highPerformance | 内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render | Boolean |true|\n| noAnimation |禁用动画| Boolean|false |\n\n\n### Filter 方法\n\n|名称 | 说明 | 类型 | 默认值 |\n|:---------------|:--------|:----|:----------|\n| reset | 重置内部选中状态 | Function
**签名：**`Function(navConfig:Array
**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array
\n\n\n## 安装方法\n在命令行中执行以下命令\n```\nnpm install @rax-ui/filter -S\n```\n\n## 使用方式\n```\nimport Filter from '@rax-ui/filter';\nimport ListSelect from '@rax-ui/filter-list-select';\n\nrender(\n **效果图**
 | Array<Object> | - (必填) |\n| offsetTop | Filter组件展开面板状态下距离页面顶部的高度，有两种状态：**固定位置**和**跟随页面滚动吸附置顶**
**固定位置：**状态下距离页面顶部的高度
**跟随页面滚动吸附置顶：**状态下距离页面顶部的高度
**效果图**
 | Number | -(必填) |\n| styles | 配置样式，Filter中所有样式都可使用`styles`集合对象来配置覆盖，详见CSS API | Object | {} | \n| clickMaskClosable | 开启 mask 背景的点击隐藏 | Boolean | true |\n| onPanelVisibleChange | Panel 显示隐藏回调函数
**签名：** `Function({ visible:Boolean, triggerIndex:Number, triggerType:String }) => void`
**参数：**
`visible:Boolean` 显示隐藏标志量
`triggerIndex:Number`触发的筛选项索引值
`triggerType:String` 触发类型
**triggerType详解** 包含三种触发类型
`Navbar`:来自筛选头的点击触发
`Mask`:来自背景层的点击触发
`Panel`:来自Panel 的 onChange 回调触发 | Function | | \n| onChange | Filter 搜索变更回调函数
**签名：** `Function(params:Object, urlQuery: Object) => void`
**参数：**
`params: Object` 标准化搜索参数，必须包含`{filterKey, filterText, filterValue, filterValueChanged}`
`urlQuery:Object` URL query 对象
| Function | | \n\n#### Filter 组件 `props.navConfig` 数组配置详解\n#### navConfig\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）\n| -------- | -------- | -------- | -------- | \n| type | 筛选项类型
**三种类型**
`RelatePanel`: 【默认类型】筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
`QuickSearch`: 筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
`Custom`: 自定义类型，UI完全自定义，通过 `renderItem`函数返回 JSX | String | 'RelatePanel' |\n| text
**注意** `RelatePanel`类型生效 | 筛选头显示文案
文字溢出用`...`展示 | String | - (必填) |\n| icon
**注意** `RelatePanel`类型生效 | 筛选头 icon：normal 正常态 和 active 激活态 图标
**数据格式**
`Object`类型 :
`String`类型 :
**效果图**
 | Object or String | - | \n| options
**注意** `QuickSearch`类型生效 | 快速搜索排序类型的数据源
**数据格式**
 | Array | (必填) |\n| optionsIndex
**注意** `QuickSearch`类型生效 | 快速搜索排序类型默认选中的索引 | String | 0 |\n| optionsKey
**注意** `QuickSearch`类型生效 | 指定快速搜索排序对应的搜索 key,用到 onChange 回调中| String | 不提供默认使用当前筛选项的索引 |\n| loop
**注意** `QuickSearch`类型生效 | 点击是否依托options数组项循环 | Boolean | true |\n| formatText | 文案格式化函数
**签名：**`Function(text:String) => text`
**参数：**
`text: String` 筛选头文案 | Function | (text)=>text |\n| disabled | 禁用筛选头点击 | Boolean | true | \n| highlight | 是否保持文字图标高亮
| Boolean | false | \n| hasSeperator | 是否展示右侧分隔符
**效果图**
 | Boolean | false | \n| renderItem | 自定义渲染
**注意**
提供的配置项无法满足你的 UI 需求时使用
**签名：**`Function(isActive:Boolean, this:Element) => Element`
**参数：**
`isActive:Boolean` 筛选头是否为激活状态
`this:Element` 筛选头this实例 | Function | - |\n| animation | 动画配置，采用内置的动画
**参数说明**
**注意** 目前只内置了一种`rotate`动画类型 | Object | | \n| animationHook | 用户自定义动画的钩子函数，内置动画无法满足需求时使用
**签名：**`Function(refImg:Element, isActive:Boolean) => text`
**参数：**
`refImg:Element` 筛选头图标的 ref 实例
`isActive:Boolean` 筛选头是否为激活状态 | Function | - | \n\n### Filter.Panel Props\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）|\n| -------- | -------- | -------- | -------- | \n| displayMode | Panel 展现形式：全屏、下拉
**参数说明**
全屏：`Fullscreen`
下拉：`Dropdown` | String | 'Dropdown' | \n| animation | Panel 展示动画配置，内置上下左右动画
**参数说明**
`direction` 控制动画方向，分别有 `up`、`down`、`left`、`right` | Object | | \n| highPerformance | 内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render | Boolean |true|\n| noAnimation |禁用动画| Boolean|false |\n\n\n### Filter 方法\n\n|名称 | 说明 | 类型 | 默认值 |\n|:---------------|:--------|:----|:----------|\n| reset | 重置内部选中状态 | Function
**签名：**`Function(navConfig:Array
**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array
\n\n\n## 安装方法\n在命令行中执行以下命令\n```\nnpm install @rax-ui/filter -S\n```\n\n## 使用方式\n```\nimport Filter from '@rax-ui/filter';\nimport ListSelect from '@rax-ui/filter-list-select';\n\nrender(\n **效果图**
 | Array<Object> | - (必填) |\n| offsetTop | Filter组件展开面板状态下距离页面顶部的高度，有两种状态：**固定位置**和**跟随页面滚动吸附置顶**
**固定位置：**状态下距离页面顶部的高度
**跟随页面滚动吸附置顶：**状态下距离页面顶部的高度
**效果图**
 | Number | -(必填) |\n| styles | 配置样式，Filter中所有样式都可使用`styles`集合对象来配置覆盖，详见CSS API | Object | {} | \n| clickMaskClosable | 开启 mask 背景的点击隐藏 | Boolean | true |\n| onPanelVisibleChange | Panel 显示隐藏回调函数
**签名：** `Function({ visible:Boolean, triggerIndex:Number, triggerType:String }) => void`
**参数：**
`visible:Boolean` 显示隐藏标志量
`triggerIndex:Number`触发的筛选项索引值
`triggerType:String` 触发类型
**triggerType详解** 包含三种触发类型
`Navbar`:来自筛选头的点击触发
`Mask`:来自背景层的点击触发
`Panel`:来自Panel 的 onChange 回调触发 | Function | | \n| onChange | Filter 搜索变更回调函数
**签名：** `Function(params:Object, urlQuery: Object) => void`
**参数：**
`params: Object` 标准化搜索参数，必须包含`{filterKey, filterText, filterValue, filterValueChanged}`
`urlQuery:Object` URL query 对象
| Function | | \n\n#### Filter 组件 `props.navConfig` 数组配置详解\n#### navConfig\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）\n| -------- | -------- | -------- | -------- | \n| type | 筛选项类型
**三种类型**
`RelatePanel`: 【默认类型】筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
`QuickSearch`: 筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
`Custom`: 自定义类型，UI完全自定义，通过 `renderItem`函数返回 JSX | String | 'RelatePanel' |\n| text
**注意** `RelatePanel`类型生效 | 筛选头显示文案
文字溢出用`...`展示 | String | - (必填) |\n| icon
**注意** `RelatePanel`类型生效 | 筛选头 icon：normal 正常态 和 active 激活态 图标
**数据格式**
`Object`类型 :
`String`类型 :
**效果图**
 | Object or String | - | \n| options
**注意** `QuickSearch`类型生效 | 快速搜索排序类型的数据源
**数据格式**
 | Array | (必填) |\n| optionsIndex
**注意** `QuickSearch`类型生效 | 快速搜索排序类型默认选中的索引 | String | 0 |\n| optionsKey
**注意** `QuickSearch`类型生效 | 指定快速搜索排序对应的搜索 key,用到 onChange 回调中| String | 不提供默认使用当前筛选项的索引 |\n| loop
**注意** `QuickSearch`类型生效 | 点击是否依托options数组项循环 | Boolean | true |\n| formatText | 文案格式化函数
**签名：**`Function(text:String) => text`
**参数：**
`text: String` 筛选头文案 | Function | (text)=>text |\n| disabled | 禁用筛选头点击 | Boolean | true | \n| highlight | 是否保持文字图标高亮
| Boolean | false | \n| hasSeperator | 是否展示右侧分隔符
**效果图**
 | Boolean | false | \n| renderItem | 自定义渲染
**注意**
提供的配置项无法满足你的 UI 需求时使用
**签名：**`Function(isActive:Boolean, this:Element) => Element`
**参数：**
`isActive:Boolean` 筛选头是否为激活状态
`this:Element` 筛选头this实例 | Function | - |\n| animation | 动画配置，采用内置的动画
**参数说明**
**注意** 目前只内置了一种`rotate`动画类型 | Object | | \n| animationHook | 用户自定义动画的钩子函数，内置动画无法满足需求时使用
**签名：**`Function(refImg:Element, isActive:Boolean) => text`
**参数：**
`refImg:Element` 筛选头图标的 ref 实例
`isActive:Boolean` 筛选头是否为激活状态 | Function | - | \n\n### Filter.Panel Props\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）|\n| -------- | -------- | -------- | -------- | \n| displayMode | Panel 展现形式：全屏、下拉
**参数说明**
全屏：`Fullscreen`
下拉：`Dropdown` | String | 'Dropdown' | \n| animation | Panel 展示动画配置，内置上下左右动画
**参数说明**
`direction` 控制动画方向，分别有 `up`、`down`、`left`、`right` | Object | | \n| highPerformance | 内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render | Boolean |true|\n| noAnimation |禁用动画| Boolean|false |\n\n\n### Filter 方法\n\n|名称 | 说明 | 类型 | 默认值 |\n|:---------------|:--------|:----|:----------|\n| reset | 重置内部选中状态 | Function
**签名：**`Function(navConfig:Array
**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array
\n\n\n## 安装方法\n在命令行中执行以下命令\n```\nnpm install @rax-ui/filter -S\n```\n\n## 使用方式\n```\nimport Filter from '@rax-ui/filter';\nimport ListSelect from '@rax-ui/filter-list-select';\n\nrender(\n **效果图**
 | Array<Object> | - (必填) |\n| offsetTop | Filter组件展开面板状态下距离页面顶部的高度，有两种状态：**固定位置**和**跟随页面滚动吸附置顶**
**固定位置：**状态下距离页面顶部的高度
**跟随页面滚动吸附置顶：**状态下距离页面顶部的高度
**效果图**
 | Number | -(必填) |\n| styles | 配置样式，Filter中所有样式都可使用`styles`集合对象来配置覆盖，详见CSS API | Object | {} | \n| clickMaskClosable | 开启 mask 背景的点击隐藏 | Boolean | true |\n| onPanelVisibleChange | Panel 显示隐藏回调函数
**签名：** `Function({ visible:Boolean, triggerIndex:Number, triggerType:String }) => void`
**参数：**
`visible:Boolean` 显示隐藏标志量
`triggerIndex:Number`触发的筛选项索引值
`triggerType:String` 触发类型
**triggerType详解** 包含三种触发类型
`Navbar`:来自筛选头的点击触发
`Mask`:来自背景层的点击触发
`Panel`:来自Panel 的 onChange 回调触发 | Function | | \n| onChange | Filter 搜索变更回调函数
**签名：** `Function(params:Object, urlQuery: Object) => void`
**参数：**
`params: Object` 标准化搜索参数，必须包含`{filterKey, filterText, filterValue, filterValueChanged}`
`urlQuery:Object` URL query 对象
| Function | | \n\n#### Filter 组件 `props.navConfig` 数组配置详解\n#### navConfig\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）\n| -------- | -------- | -------- | -------- | \n| type | 筛选项类型
**三种类型**
`RelatePanel`: 【默认类型】筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
`QuickSearch`: 筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
`Custom`: 自定义类型，UI完全自定义，通过 `renderItem`函数返回 JSX | String | 'RelatePanel' |\n| text
**注意** `RelatePanel`类型生效 | 筛选头显示文案
文字溢出用`...`展示 | String | - (必填) |\n| icon
**注意** `RelatePanel`类型生效 | 筛选头 icon：normal 正常态 和 active 激活态 图标
**数据格式**
`Object`类型 :
`String`类型 :
**效果图**
 | Object or String | - | \n| options
**注意** `QuickSearch`类型生效 | 快速搜索排序类型的数据源
**数据格式**
 | Array | (必填) |\n| optionsIndex
**注意** `QuickSearch`类型生效 | 快速搜索排序类型默认选中的索引 | String | 0 |\n| optionsKey
**注意** `QuickSearch`类型生效 | 指定快速搜索排序对应的搜索 key,用到 onChange 回调中| String | 不提供默认使用当前筛选项的索引 |\n| loop
**注意** `QuickSearch`类型生效 | 点击是否依托options数组项循环 | Boolean | true |\n| formatText | 文案格式化函数
**签名：**`Function(text:String) => text`
**参数：**
`text: String` 筛选头文案 | Function | (text)=>text |\n| disabled | 禁用筛选头点击 | Boolean | true | \n| highlight | 是否保持文字图标高亮
| Boolean | false | \n| hasSeperator | 是否展示右侧分隔符
**效果图**
 | Boolean | false | \n| renderItem | 自定义渲染
**注意**
提供的配置项无法满足你的 UI 需求时使用
**签名：**`Function(isActive:Boolean, this:Element) => Element`
**参数：**
`isActive:Boolean` 筛选头是否为激活状态
`this:Element` 筛选头this实例 | Function | - |\n| animation | 动画配置，采用内置的动画
**参数说明**
**注意** 目前只内置了一种`rotate`动画类型 | Object | | \n| animationHook | 用户自定义动画的钩子函数，内置动画无法满足需求时使用
**签名：**`Function(refImg:Element, isActive:Boolean) => text`
**参数：**
`refImg:Element` 筛选头图标的 ref 实例
`isActive:Boolean` 筛选头是否为激活状态 | Function | - | \n\n### Filter.Panel Props\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）|\n| -------- | -------- | -------- | -------- | \n| displayMode | Panel 展现形式：全屏、下拉
**参数说明**
全屏：`Fullscreen`
下拉：`Dropdown` | String | 'Dropdown' | \n| animation | Panel 展示动画配置，内置上下左右动画
**参数说明**
`direction` 控制动画方向，分别有 `up`、`down`、`left`、`right` | Object | | \n| highPerformance | 内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render | Boolean |true|\n| noAnimation |禁用动画| Boolean|false |\n\n\n### Filter 方法\n\n|名称 | 说明 | 类型 | 默认值 |\n|:---------------|:--------|:----|:----------|\n| reset | 重置内部选中状态 | Function
**签名：**`Function(navConfig:Array
**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array
\n\n\n## 安装方法\n在命令行中执行以下命令\n```\nnpm install @rax-ui/filter -S\n```\n\n## 使用方式\n```\nimport Filter from '@rax-ui/filter';\nimport ListSelect from '@rax-ui/filter-list-select';\n\nrender(\n **效果图**
 | Array<Object> | - (必填) |\n| offsetTop | Filter组件展开面板状态下距离页面顶部的高度，有两种状态：**固定位置**和**跟随页面滚动吸附置顶**
**固定位置：**状态下距离页面顶部的高度
**跟随页面滚动吸附置顶：**状态下距离页面顶部的高度
**效果图**
 | Number | -(必填) |\n| styles | 配置样式，Filter中所有样式都可使用`styles`集合对象来配置覆盖，详见CSS API | Object | {} | \n| clickMaskClosable | 开启 mask 背景的点击隐藏 | Boolean | true |\n| onPanelVisibleChange | Panel 显示隐藏回调函数
**签名：** `Function({ visible:Boolean, triggerIndex:Number, triggerType:String }) => void`
**参数：**
`visible:Boolean` 显示隐藏标志量
`triggerIndex:Number`触发的筛选项索引值
`triggerType:String` 触发类型
**triggerType详解** 包含三种触发类型
`Navbar`:来自筛选头的点击触发
`Mask`:来自背景层的点击触发
`Panel`:来自Panel 的 onChange 回调触发 | Function | | \n| onChange | Filter 搜索变更回调函数
**签名：** `Function(params:Object, urlQuery: Object) => void`
**参数：**
`params: Object` 标准化搜索参数，必须包含`{filterKey, filterText, filterValue, filterValueChanged}`
`urlQuery:Object` URL query 对象
| Function | | \n\n#### Filter 组件 `props.navConfig` 数组配置详解\n#### navConfig\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）\n| -------- | -------- | -------- | -------- | \n| type | 筛选项类型
**三种类型**
`RelatePanel`: 【默认类型】筛选项关联Panel型，即筛选头和 Panel 是一对一关系，点击筛选头展示 Panel
`QuickSearch`: 筛选项快速搜索排序型，即筛选头没有对应 Panel，点击筛选头直接触发搜索
`Custom`: 自定义类型，UI完全自定义，通过 `renderItem`函数返回 JSX | String | 'RelatePanel' |\n| text
**注意** `RelatePanel`类型生效 | 筛选头显示文案
文字溢出用`...`展示 | String | - (必填) |\n| icon
**注意** `RelatePanel`类型生效 | 筛选头 icon：normal 正常态 和 active 激活态 图标
**数据格式**
`Object`类型 :
`String`类型 :
**效果图**
 | Object or String | - | \n| options
**注意** `QuickSearch`类型生效 | 快速搜索排序类型的数据源
**数据格式**
 | Array | (必填) |\n| optionsIndex
**注意** `QuickSearch`类型生效 | 快速搜索排序类型默认选中的索引 | String | 0 |\n| optionsKey
**注意** `QuickSearch`类型生效 | 指定快速搜索排序对应的搜索 key,用到 onChange 回调中| String | 不提供默认使用当前筛选项的索引 |\n| loop
**注意** `QuickSearch`类型生效 | 点击是否依托options数组项循环 | Boolean | true |\n| formatText | 文案格式化函数
**签名：**`Function(text:String) => text`
**参数：**
`text: String` 筛选头文案 | Function | (text)=>text |\n| disabled | 禁用筛选头点击 | Boolean | true | \n| highlight | 是否保持文字图标高亮
| Boolean | false | \n| hasSeperator | 是否展示右侧分隔符
**效果图**
 | Boolean | false | \n| renderItem | 自定义渲染
**注意**
提供的配置项无法满足你的 UI 需求时使用
**签名：**`Function(isActive:Boolean, this:Element) => Element`
**参数：**
`isActive:Boolean` 筛选头是否为激活状态
`this:Element` 筛选头this实例 | Function | - |\n| animation | 动画配置，采用内置的动画
**参数说明**
**注意** 目前只内置了一种`rotate`动画类型 | Object | | \n| animationHook | 用户自定义动画的钩子函数，内置动画无法满足需求时使用
**签名：**`Function(refImg:Element, isActive:Boolean) => text`
**参数：**
`refImg:Element` 筛选头图标的 ref 实例
`isActive:Boolean` 筛选头是否为激活状态 | Function | - | \n\n### Filter.Panel Props\n\n| 参数 | 说明 | 类型 | 默认值（是否必填）|\n| -------- | -------- | -------- | -------- | \n| displayMode | Panel 展现形式：全屏、下拉
**参数说明**
全屏：`Fullscreen`
下拉：`Dropdown` | String | 'Dropdown' | \n| animation | Panel 展示动画配置，内置上下左右动画
**参数说明**
`direction` 控制动画方向，分别有 `up`、`down`、`left`、`right` | Object | | \n| highPerformance | 内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render | Boolean |true|\n| noAnimation |禁用动画| Boolean|false |\n\n\n### Filter 方法\n\n|名称 | 说明 | 类型 | 默认值 |\n|:---------------|:--------|:----|:----------|\n| reset | 重置内部选中状态 | Function
**签名：**`Function(navConfig:Array
**参数：**
`navConfig:Array
**返回值：**
`Array
**签名：**`Function(fn: (navConfig: Array
**参数：**
`fn: (navConfig: Array