mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-15 13:38:29 +02:00
docs: add anchor for when-to-use section (#53318)
* docs: add anchor for when-to-use section * Delete scripts/update-docs.js Signed-off-by: afc163 <afc163@gmail.com> --------- Signed-off-by: afc163 <afc163@gmail.com>
This commit is contained in:
afc163
GitHub
parent
0530d5685d
commit
3ef3434052
64 changed files with 66 additions and 66 deletions
|
|
@ -12,7 +12,7 @@ group:
|
|||
order: 7
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ group:
|
|||
order: 6
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ group:
|
|||
order: 3
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ demo:
|
|||
tag: 5.1.0
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
|
||||
- 提供基于 `.ant-app` 的默认重置样式，解决原生元素没有 antd 规范样式的问题。
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 需要一个输入框而不是选择器。
|
||||
- 需要输入建议/辅助提示。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
group: 数据展示
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
- 当需要告知用户『你在哪里』时；
|
||||
|
|
@ -129,7 +129,7 @@ function itemRender(currentRoute, params, items, paths) {
|
|||
return isLast ? (
|
||||
<span>{currentRoute.title}</span>
|
||||
) : (
|
||||
<Link to={`/${paths.join("/")}`}>{currentRoute.title}</Link>
|
||||
<Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QXO1SKEdIzYAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当有一组平级的内容。
|
||||
- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
|
||||
- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 在一组可选项中进行多项选择时；
|
||||
- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 对复杂区域进行分组和隐藏，保持页面的整洁。
|
||||
- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ group:
|
|||
title: 数据录入
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当用户需要自定义颜色选择的时候使用。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
常见于详情页的信息展示。
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ group:
|
|||
order: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 对不同章节的文本段落进行分割。
|
||||
- 对行内文字/链接进行分割，例如表格的操作列。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当目前没有数据时，用于显式的用户提示。
|
||||
- 初始化场景时的引导创建流程。
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAA
|
|||
tag: 5.10.0
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 适合设置元素之间的间距。
|
||||
- 适合设置各种水平、垂直对齐方式。
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ demo:
|
|||
tag: 5.0.0
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 用于网站上的全局功能；
|
||||
- 无论浏览到何处都可以看见的按钮。
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## When to use
|
||||
## When to use {#when-to-use}
|
||||
|
||||
- When you need to create an instance or collect information.
|
||||
- When you need to validate fields in certain rules.
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 用于创建一个实体或收集信息。
|
||||
- 需要对输入的数据类型进行校验时。
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 需要展示图片时使用。
|
||||
- 加载显示大图或加载失败时容错处理。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当需要获取标准数值时。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 需要用户输入表单域内容时。
|
||||
- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 可提供成功、警告和错误等反馈信息。
|
||||
- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
在系统四个角显示通知提醒信息。经常用于以下情况：
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当加载/渲染所有数据将花费很多时间时；
|
||||
- 可切换页码浏览数据。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ group:
|
|||
tag: 5.1.0
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当需要将文本转换成为二维码时使用。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 用于在多个备选项中选中单个状态。
|
||||
- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 对评价进行展示。
|
||||
- 对事物进行快速的评级操作。
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ demo:
|
|||
|
||||
自 `antd@4.20.0` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 用于展示多个选项并允许用户选择其中单个选项；
|
||||
- 当切换选中选项时，关联区域的内容会发生变化。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
|
||||
- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*uae3QbkNCm8AAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 网络较慢，需要长时间等待加载处理的情况下。
|
||||
- 图文信息内容较多的列表/卡片中。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZiJ3SbOH9SUAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
避免组件紧贴在一起，拉开统一的空间。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ demo:
|
|||
tag: 5.21.0
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 可以水平或垂直地分隔区域。
|
||||
- 当需要自由拖拽调整各区域大小。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当需要突出某个或某组数字时。
|
||||
- 当需要展示带描述的统计类数据时使用。
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 需要表示开关状态/两种状态之间的切换时；
|
||||
- 和 `checkbox` 的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3yz3QqMlShYAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Sv8XQ50NB40AAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当有大量结构化的数据需要展现时；
|
||||
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*72NDQqXkyOEAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8HMoTZUoSGoAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 用于标记事物的属性和维度。
|
||||
- 进行分类。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当有一系列信息需按时间排列时，可正序和倒序。
|
||||
- 需要有一条时间轴进行视觉上的串联时。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ demo:
|
|||
tag: 5.0.0
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
常用于引导用户了解产品功能。
|
||||
|
||||
|
|
@ -61,7 +61,7 @@ tag: 5.0.0
|
|||
| cover | 展示的图片或者视频 | `ReactNode` | - | |
|
||||
| title | 标题 | `ReactNode` | - | |
|
||||
| description | 主要描述部分 | `ReactNode` | - | |
|
||||
| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
||||
| placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
|
||||
| onClose | 关闭引导时的回调函数 | `Function` | - | |
|
||||
| mask | 是否启用蒙层，也可传入配置改变蒙层样式和填充色，默认跟随 Tour 的 `mask` 属性 | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |
|
||||
| type | 类型，影响底色与文字颜色 | `default` \| `primary` | `default` | |
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fkfzT5BbwNIAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g9vUQq2nkpEAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 需要在多个可选项中进行多选时。
|
||||
- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 `树控件` 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*MLt3R6m9huoAAAAAAA
|
|||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAAAAAAAAAAAADrJ8AQ/original
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。
|
||||
- 当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ demo:
|
|||
cols: 2
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ demo:
|
|||
tag: 5.1.0
|
||||
---
|
||||
|
||||
## 何时使用
|
||||
## 何时使用 {#when-to-use}
|
||||
|
||||
- 页面需要添加水印标识版权时使用。
|
||||
- 适用于防止信息盗用。
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue