ph-filter
Filter 使用方法
<FilterContainer => <Panel => <ItemGroup => <Item ='f_all'> <span =>全部美食</span> </Item> <Item ='f_bbc'> 本帮江浙菜 </Item> <Item ='f_jp'> 日本菜 </Item> <Item ='f_cf'> 咖啡厅 </Item> </ItemGroup> <ItemGroup ='电影'> <Item ='m_all'> 全部电影 </Item> <Item ='m_p'> 私人影院 </Item> <Item ='m_c'> 电影院 </Item> </ItemGroup> <ItemGroup ='购物'> <Item ='s_all'> 全部购物 </Item> <Item ='s_shoes'> 服饰鞋包 </Item> <Item ='s_medicine'> 药店 </Item> <Item ='s_glasses'> 眼镜店 </Item> <Item ='s_flower'> 花店 </Item> </ItemGroup> </Panel> <PanelSimple ='筛选'> <Item ="sjgy">世纪公园</Item> <Item ="ljz">陆家嘴</Item> <Item ="bbb">八佰伴</Item> <Item ="pdxq">浦东新区</Item> </PanelSimple> </FilterContainer>
FilterCheckbox 拓展组件用法
... { console; } ... const chooseData = "3244945,13893492,5687880,18418332,6210703,24890244"; // string const filterData = shopListmsgcityShopList; return <FilterCheckbox = = ='确定' ="info" => filterData </FilterCheckbox>
注意事项
- 目前支持两种Panel,一级选择:PanelSimple 和 二级选择:Panel
- Panel全部嵌套在FilterContainer里,有几个panel,cat栏目就会被几等分
- 当使用Panel时,即表明该Panel是个二级选择Panel,所有的二级分类都会被ItemGroup标签包裹,itemGroup用于切换二级分类列表
API
View example to get more details
<FilterContainer>
Props:
- onChange 用户切换分类的时候触发的回调函数,输入参数是分类的key .
- hideCat 当设置hideCat属性的时候,cat那一栏会隐藏,第一个panel会一直显示(适用于只有一个panel并且不需要cat的场景)
<PanelSimple>
和 <Panel>
Props:
- default 当用户没有选择任何分类的时候,cat栏目里显示的默认文案 .
- readOnly 是否为只读模式 .
- selected 用户选择的分类对象,必须包含key和value属性{key:'s_flower',value:'花店'},用于高亮panel里对应的项.
<Item>
Props:
- itemKey item的唯一标识,必填参数 .
<ItemGroup>
Props:
- label 一级分类的显示文案,用于包裹二级分类列表,可以是string,也可以是react标签 .
Contributing
- Fork the project
- Run the project in development view demo:
$ npm run demo
- Make changes.
- Add appropriate tests
$ npm run test
- If tests don't pass, make them pass.
- Update README with appropriate docs.
- Rnn build
$ npm run build
- Commit and PR.
Repair
version 1.0.2
增加choose的数据是通过请求获取的情况兼容
version 1.0.1
修复没有choose时数据多一个逗号的问题
version 1.0.0
新增FilterCheckbox拓展组件
version 1.0.4
FilterCheckbox右边栏可横向滚动