@rax-ui/filter-list-select

--- display: FilterListSelect family: other ---

Usage no npm install needed!

<script type="module">
  import raxUiFilterListSelect from 'https://cdn.skypack.dev/@rax-ui/filter-list-select';
</script>

README

display: FilterListSelect family: other

FilterListSelect

配合 Filter 使用的下拉列表面板，列表个数超过支持滚动，滚动场景容器高度可配置，参考 CSS API

API

Props

名称 说明 类型 默认值
styles 自定义样式 Object {}
dataSource 数据源 Array []
格式:
[{ name: '全部', value: '100' }]
filterKey 搜索使用的 key String ''
filterValue 选中值 String Number
defaultValue 默认值（通过将默认值和选中值进行比较得到当前 Filter 面板是否有 filterValueChanged） String Number
selectedImg list选中图标 String //gw.alicdn.com/tfs/TB1Jn2_SFXXXXaVXXXXXXXXXXXX-40-40.png
onChange 搜索回调函数
注意
在 Filter 中使用时，父组件会注入该 prop		 Function ()=>{}

方法

名称 说明 类型 默认值
reset 重置内部选中状态 Function
rootRef 根节点 ref Object

CSS API

名称 说明
list 最外层容器样式(容器高度超过Panel 最大高度自动支持滚动，也可通过此样式来配置高度)
list__row 单个 list row 样式
list__row_active 选中的单个 list row 样式
list__icon 选中图标样式
list__text 单个 list 文本样式
list__text_active 单个 list 文本选中样式