记一个复杂组件（Filter）的从设计到开发 (3)

注意 如果 navConfig 内置的UI参数不满足您的需求，请使用renderItem自定义渲染函数来控制筛选头 UI

参数 说明 类型 默认值（是否必填）
type   筛选项类型

三种类型
RelatePanel: 筛选项关联数据面板类型
QuickSearch: 筛选项快速搜索排序类型
PureUI: 纯 UI占位类型   String   'RelatePanel'  
text


注意 RelatePanel类型生效   筛选头显示文案
文字溢出用...展示   String   - (必填)  
icons


注意 RelatePanel类型生效   筛选头 icon：normal 正常态 和 active 激活态 图标
数据格式
Object类型 :

String类型 :

效果图

  Object or String   -  
options


注意 QuickSearch类型生效   快速搜索排序类型的数据源
数据格式

  Array   (必填)  
optionsIndex


注意 QuickSearch类型生效   快速搜索排序类型默认选中的索引   String   0  
optionsKey


注意 QuickSearch类型生效   指定快速搜索排序对应的搜索 key,用到 onChange 回调中   String   不提供默认使用当前筛选项的索引  
formatText   文案格式化函数
签名：Function(text:String) => text
参数：
text: String 筛选头文案   Function   (text)=>text  
disabled   禁用筛选头点击   Boolean   true  
hasSeperator   是否展示右侧分隔符

效果图

  Boolean   false  
hasPanel   当前筛选头是否有对应的 panel   Boolean   true  
renderItem   自定义渲染
注意
提供的配置项无法满足你的 UI 需求时使用
签名：Function(isActive:Boolean, this:Element) => Element
参数：
isActive:Boolean 筛选头是否为激活状态
this:Element 筛选头this实例   Function   -  
animation   动画配置，采用内置的动画
参数说明

注意 目前只内置了一种rotate动画类型   Object    
animationHook   用户自定义动画的钩子函数，内置动画无法满足需求时使用
签名：Function(refImg:Element, isActive:Boolean) => text
参数：
refImg:Element 筛选头图标的 ref 实例
isActive:Boolean 筛选头是否为激活状态   Function   -  
Filter.Panel API 参数 说明 类型 默认值（是否必填）
styles   配置样式
Filter中所有样式都可使用styles集合对象来配置覆盖   Object   {}  
displayMode   Panel 展现形式：全屏、下拉
参数说明
全屏：Fullscreen
下拉：Dropdown   String   'Dropdown'  
noAnimation   禁止动画   Boolean   true  
highPerformance   内部通过 Panel 的显示隐藏控制 panel 的 render 次数，避免不必要的 render，高性能模式下，只会在 Panel 展示 或者 展示隐藏状态变化时才会重新 render   Boolean   true  
animation   Panel 展示动画配置，内置上下左右动画
参数说明

direction 控制动画方向，分别有 up、down、left、right   Object    
Filter 的代码使用