Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: update cascader #1709

Merged
merged 1 commit into from
Jan 19, 2024
Merged

chore: update cascader #1709

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 26 additions & 36 deletions docs/web/design/cascader.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,50 @@


### 何时使用

当数据集合较大，且子集合数据间有结构性关联，需要多级分类以便用户选择时；


当数据信息有明确的层级结构，需要用户逐级查看、选择使用时。


### 与页面布局相关

##### 在页面中，级联选择器可放置于页面顶部，与下方数据结果产生联动。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<em></em>
</div>


</div>


##### 在表单中，级联选择器可放置于表单内容需要的顺序中，用于数据的选择和填写。


<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<em></em>
</div>

</div>


### 组件搭配使用

##### 与搜索框搭配使用，通过关键词筛选数据内容，便于用户在不同层级中快速找到所需信息。
##### 与搜索框搭配使用，通过关键词筛选数据内容，便于用户在不同层级中快速找到所需信息。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<em></em>
</div>


</div>

### 常见用法

##### 一键全部清空。在全部选项末尾使用删除按钮，便于快速取消已选对象。
##### 一键全部清空。在全部选项末尾使用删除按钮，便于快速取消已选对象。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<em></em>
</div>

Expand All @@ -65,26 +57,25 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<em></em>
</div>


</div>

### 推荐/慎用示例

##### 级联选择器的层级不宜超过4层，层级过多时应调整数据结构或改用其他交互方式。
##### 级联选择器的层级不宜超过 4 层，层级过多时应调整数据结构或改用其他交互方式。

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/designguide/cascader/cascader[email protected]" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94-[email protected]" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/[email protected]" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>

Expand All @@ -94,13 +85,13 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>

Expand All @@ -110,21 +101,20 @@

<div class="legend">
<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/good.png" />
</div>

<div class="item">
<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/%E7%BA%A7%E8%81%94[email protected]" />
<img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
<img src="https://tdesign.gtimg.com/site/design/guide/cascader/cascader[email protected]" />
<img class="tag" src="https://tdesign.gtimg.com/site/doc/bad.png" />
</div>
</div>


### 相似组件

| 组件名 | 何时使用 |
| :----- | :--------------------------------------------------------- |
| [级联选择器](./cascader) | 当数据集合较大，用户需要从有清晰层级结构的数据集合中进行选择时。 |
| [穿梭框](./transfer) | 一组数据进行两种状态的分类时；总类和子类的选项筛选时。 |
| [树](./tree) | 用于承载有父子关系的结构化内容，提供内容层级的展示。 |
| 组件名 | 何时使用 |
| :----------------------- | :--------------------------------------------------------------- |
| [级联选择器](./cascader) | 当数据集合较大，用户需要从有清晰层级结构的数据集合中进行选择时。 |
| [穿梭框](./transfer) | 一组数据进行两种状态的分类时；总类和子类的选项筛选时。 |
| [树](./tree) | 用于承载有父子关系的结构化内容，提供内容层级的展示。 |
Loading