|
|
|
|
---
|
|
|
|
|
order: 6
|
|
|
|
|
chinese: 高级搜索
|
|
|
|
|
english: Advanced Search
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
借助『高级搜索』，用户可以缩小复杂列表／表格等的展示范围。
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 常规型
|
|
|
|
|
|
|
|
|
|
### 交互
|
|
|
|
|
|
|
|
|
|
<img class="preview-img" align="right" alt="交互示例" description="在收起状态时，用户点击『高级搜索』展开；如果此前用户已经输入过文案，需要将值带到对应的输入框中。" src="https://os.alipayobjects.com/rmsportal/NpRKspdYRDwsKnw.png">
|
|
|
|
|
|
|
|
|
|
常规型常和表格搭配使用，适合在搜索条件多以及搜索值个数不确定的场景中。
|
|
|
|
|
|
|
|
|
|
『高级搜索』功能一般开放给中间用户／专家用户使用，一般通过点击『高级搜索』触发；如果非常高频使用，可以默认展开『高级搜索』。
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
<img class="preview-img" align="right" alt="交互示例" description="在『高级搜索』顶部放置 Alert ，用于展现已经输入的值；用户点击『清空』可以清空所有输入值；点击『高级搜索』可以再次展开『高级搜索』。" src="https://os.alipayobjects.com/rmsportal/gKiZtjopvLufqSP.png">
|
|
|
|
|
|
|
|
|
|
当已经输入了值的『高级搜索』被隐藏时，需要展示检索条件和值。
|
|
|
|
|
|
|
|
|
|
### 排列规则
|
|
|
|
|
|
|
|
|
|
<img class="preview-img" align="right" alt="排列示例" src="https://os.alipayobjects.com/rmsportal/TsdXCWLPIETykye.png">
|
|
|
|
|
|
|
|
|
|
搜索条件的排布顺序需要和表格中的标题顺序，尽可能保持一致；如果非常高频使用的搜索条件，可以放在最前面。
|
|
|
|
|
|
|
|
|
|
### 规格
|
|
|
|
|
|
|
|
|
|
<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/fuPcwZCYiohhdSt.png">
|
|
|
|
|
|
|
|
|
|
<img class="preview-img" align="right" alt="规格示例" src="https://os.alipayobjects.com/rmsportal/bFLUSbwoNoakKYS.png">
|
|
|
|
|
|
|
|
|
|
- 横向排版
|
|
|
|
|
|
|
|
|
|
在一行不要放置 3 列以上的输入框；标签和输入框应该落在栅格上。
|
|
|
|
|
|
|
|
|
|
- 纵向排版
|
|
|
|
|
|
|
|
|
|
使用 `16px` 作为间距。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 字段型
|
|
|
|
|
|
|
|
|
|
### 交互
|
|
|
|
|
|
|
|
|
|
<img class="preview-img" align="right" alt="交互示例" src="https://os.alipayobjects.com/rmsportal/TUxfnHjfTJeKaDq.png">
|
|
|
|
|
|
|
|
|
|
字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h2><span class="waiting">案例（敬请期待）</span></h2>
|
