@alicd/crui-search-area

React components based on next

Usage no npm install needed!

<script type="module">
  import alicdCruiSearchArea from 'https://cdn.skypack.dev/@alicd/crui-search-area';
</script>

README

name: 筛选区
tag_name: SearchArea
terminal: pc
category: form
scene: common

符合 Rookie 设计标准的筛选区组件。

规则

筛选条件可设置展开和收起

API

SeachArea

属性	说明	类型	默认值	是否必填
className	自定义 class	`string`	N/A	否
style	自定义内联样式	`object`	N/A	否
defaultSearchFields	默认直接展示出搜索项,对应Item中的dataIndex值,不填则全部展示,否则未在此值中的搜索项将会放入收起区	`array<string>`	N/A	否
searchFields	直接展示的搜索项,使用后变为受控类型	`array<string>`	N/A	否
defaultActiveFields	默认生效的搜索项,对应Item中的dataIndex值,不填则全部生效,否则未在此值中的搜索项将不生效且也不展示在界面上	`array<string>`	N/A	否
activeFields	生效的搜索项,使用后变为受控类型	`array<string>`	N/A	否
size	尺寸	`large/medium/small`	medium	否
field	Field示例	`object<Field>`	N/A	是
tarsHabitKey	tars习惯中的标识,设置后将会出现存储历史搜索记录的按钮,需配合tars系统使用	`string`	N/A	否
historySelectSearch	历史搜索记录选择后直接搜索与否	`boolean`	true	否
canSearchByEnter	是否支持按回车键搜索	`boolean`	true	否
onSearch	点击搜索按钮后的回调	`(values: 表单填写的值) => {}`	noop	否
onReset	点击重置按钮后的回调	`() => {}`	N/A	否
locale	自定义的多语言文案数据	`object`	中文文案	否

PS. children只能为SeachArea.Group与SeachArea.Item

SeachArea.Group

属性	说明	类型	默认值	是否必填
label	分组label	`string`	N/A	否

PS. children只能为SearchArea.Item

SeachArea.Item

属性	说明	类型	默认值	是否必填
label	搜索项label	`string`	N/A	否
dataIndex	搜索项索引,保证唯一性	`string`	N/A	是
colSpan	占的列数	`number`	1	否
canSearchByEnter	按回车键搜索, SearchArea整体设置成false时不生效, 多行文本框等组件建议手动设置成false	`boolean`	true	否

其余属性与Form.Item一致 children为对应的Input/Select等表单元素