antd-components-mcp

[{"name":"Affix","dirName":"affix","description":"将页面元素钉在可视范围。","whenToUse":"## 何时使用\n\n当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。\n\n页面可视范围过小时，慎用此功能以免出现遮挡页面内容的情况。\n\n> 开发者注意事项：\n>\n> 自 `5.10.0` 起，由于 Affix 组件由 class 重构为 FC，之前获取 `ref` 并调用内部实例方法的写法都会失效。"},{"name":"Alert","dirName":"alert","description":"警告提示，展现需要关注的信息。","whenToUse":"## 何时使用\n\n- 当某个页面需要向用户显示警告的信息时。\n- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。"},{"name":"Anchor","dirName":"anchor","description":"用于跳转到页面指定位置。","whenToUse":"## 何时使用\n\n需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。\n\n> 开发者注意事项：\n>\n> 自 `4.24.0` 起，由于组件从 class 重构成 FC，之前一些获取 `ref` 并调用内部实例方法的写法都会失效"},{"name":"App","dirName":"app","validVersion":"自 5.1.0 起支持","description":"提供重置样式和提供消费上下文的默认环境。","whenToUse":"## 何时使用\n\n- 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。\n- 提供基于 `.ant-app` 的默认重置样式，解决原生元素没有 antd 规范样式的问题。"},{"name":"AutoComplete","dirName":"auto-complete","description":"输入框自动完成功能。","whenToUse":"## 何时使用\n\n- 需要一个输入框而不是选择器。\n- 需要输入建议/辅助提示。\n\n和 Select 的区别是：\n\n- AutoComplete 是一个带提示的文本输入框，用户可以自由输入，关键词是辅助**输入**。\n- Select 是在限定的可选项中进行选择，关键词是**选择**。"},{"name":"Avatar","dirName":"avatar","description":"用来代表用户或事物，支持图片、图标或字符展示。"},{"name":"Badge","dirName":"badge","description":"图标右上角的圆形徽标数字。","whenToUse":"## 何时使用\n\n一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。"},{"name":"Breadcrumb","dirName":"breadcrumb","description":"显示当前页面在系统层级结构中的位置，并能向上返回。","whenToUse":"## 何时使用\n\n- 当系统拥有超过两级以上的层级结构时；\n- 当需要告知用户『你在哪里』时；\n- 当需要向上导航的功能时。\n\n```jsx\n// >=5.3.0 可用，推荐的写法 ✅\nreturn <Breadcrumb items={[{ title: 'sample' }]} />;\n\n// <5.3.0 可用，>=5.3.0 时不推荐 🙅🏻‍♀️\nreturn (\n <Breadcrumb>\n <Breadcrumb.Item>sample</Breadcrumb.Item>\n </Breadcrumb>\n);\n\n// 或\n\nreturn <Breadcrumb routes={[{ breadcrumbName: 'sample' }]} />;\n```"},{"name":"Button","dirName":"button","description":"按钮用于开始一个即时操作。","whenToUse":"## 何时使用\n\n标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。\n\n在 Ant Design 中我们提供了五种按钮。\n\n- 🔵 主按钮：用于主行动点，一个操作区域只能有一个主按钮。\n- ⚪️ 默认按钮：用于没有主次之分的一组行动点。\n- 😶 虚线按钮：常用于添加操作。\n- 🔤 文本按钮：用于最次级的行动点。\n- 🔗 链接按钮：一般用于链接，即导航至某位置。\n\n以及四种状态属性与上面配合使用。\n\n- ⚠️ 危险：删除/移动/修改权限等危险操作，一般需要二次确认。\n- 👻 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。\n- 🚫 禁用：行动点不可用的时候，一般需要文案解释。\n- 🔃 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。"},{"name":"Calendar","dirName":"calendar","description":"按照日历形式展示数据的容器。","whenToUse":"## 何时使用\n\n当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。"},{"name":"Card","dirName":"card","description":"通用卡片容器。","whenToUse":"## 何时使用\n\n最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。"},{"name":"Carousel","dirName":"carousel","description":"一组轮播的区域。","whenToUse":"## 何时使用\n\n- 当有一组平级的内容。\n- 当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。\n- 常用于一组图片或卡片轮播。"},{"name":"Cascader","dirName":"cascader","description":"级联选择框。","whenToUse":"## 何时使用\n\n- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。\n- 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。\n- 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。"},{"name":"Checkbox","dirName":"checkbox","description":"收集用户的多项选择。","whenToUse":"## 何时使用\n\n- 在一组可选项中进行多项选择时；\n- 单独使用可以表示两种状态之间的切换，和 `switch` 类似。区别在于切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。"},{"name":"Collapse","dirName":"collapse","description":"可以折叠/展开的内容区域。","whenToUse":"## 何时使用\n\n- 对复杂区域进行分组和隐藏，保持页面的整洁。\n- `手风琴` 是一种特殊的折叠面板，只允许单个内容区域展开。\n\n```tsx | pure\n// >= 5.6.0 可用，推荐的写法 ✅\nconst text = `\n A dog is a type of domesticated animal.\n Known for its loyalty and faithfulness,\n it can be found as a welcome guest in many households across the world.\n`;\n\nconst items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header 1',\n children: <p>{text}</p>,\n },\n {\n key: '2',\n label: 'This is panel header 2',\n children: <p>{text}</p>,\n },\n {\n key: '3',\n label: 'This is panel header 3',\n children: <p>{text}</p>,\n },\n];\n\n<Collapse items={items} defaultActiveKey={['1']} />;\n\n// <5.6.0 可用，>=5.6.0 时不推荐 🙅🏻‍♀️\n\n<Collapse defaultActiveKey={['1']} onChange={onChange}>\n <Panel header=\"This is panel header 1\" key=\"1\">\n <p>{text}</p>\n </Panel>\n <Panel header=\"This is panel header 2\" key=\"2\">\n <p>{text}</p>\n </Panel>\n <Panel header=\"This is panel header 3\" key=\"3\">\n <p>{text}</p>\n </Panel>\n</Collapse>;\n```"},{"name":"ColorPicker","dirName":"color-picker","validVersion":"自 5.5.0 起支持","description":"用于选择颜色。","whenToUse":"## 何时使用\n\n当用户需要自定义颜色选择的时候使用。"},{"name":"ConfigProvider","dirName":"config-provider","description":"为组件提供统一的全局化配置。"},{"name":"DatePicker","dirName":"date-picker","description":"输入或选择日期的控件。","whenToUse":"## 何时使用\n\n当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。"},{"name":"Descriptions","dirName":"descriptions","description":"展示多个只读字段的组合。","whenToUse":"## 何时使用\n\n常见于详情页的信息展示。\n\n```tsx | pure\n// >= 5.8.0 可用，推荐的写法 ✅\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'UserName',\n children: <p>Zhou Maomao</p>,\n },\n {\n key: '2',\n label: 'Telephone',\n children: <p>1810000000</p>,\n },\n {\n key: '3',\n label: 'Live',\n children: <p>Hangzhou, Zhejiang</p>,\n },\n {\n key: '4',\n label: 'Remark',\n children: <p>empty</p>,\n },\n {\n key: '5',\n label: 'Address',\n children: <p>No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China</p>,\n },\n];\n\n<Descriptions title=\"User Info\" items={items} />;\n\n// <5.8.0 可用，>=5.8.0 时不推荐 🙅🏻‍♀️\n\n<Descriptions title=\"User Info\">\n <Descriptions.Item label=\"UserName\">Zhou Maomao</Descriptions.Item>\n <Descriptions.Item label=\"Telephone\">1810000000</Descriptions.Item>\n <Descriptions.Item label=\"Live\">Hangzhou, Zhejiang</Descriptions.Item>\n <Descriptions.Item label=\"Remark\">empty</Descriptions.Item>\n <Descriptions.Item label=\"Address\">\n No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China\n </Descriptions.Item>\n</Descriptions>;\n```"},{"name":"Divider","dirName":"divider","description":"区隔内容的分割线。","whenToUse":"## 何时使用\n\n- 对不同章节的文本段落进行分割。\n- 对行内文字/链接进行分割，例如表格的操作列。"},{"name":"Drawer","dirName":"drawer","description":"屏幕边缘滑出的浮层面板。","whenToUse":"## 何时使用\n\n抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。\n\n- 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。\n- 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。\n\n> 开发者注意事项：\n>\n> 自 `5.17.0` 版本，我们提供了 `loading` 属性，内置 Spin 组件作为加载状态，但是自 `5.18.0` 版本开始，我们修复了设计失误，将内置的 Spin 组件替换成了 Skeleton 组件，同时收窄了 `loading` api 的类型范围，只能接收 boolean 类型。"},{"name":"Dropdown","dirName":"dropdown","description":"向下弹出的列表。","whenToUse":"## 何时使用\n\n当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。\n\n- 用于收罗一组命令操作。\n- Select 用于选择，而 Dropdown 是命令集合。"},{"name":"Empty","dirName":"empty","description":"空状态时的展示占位图。","whenToUse":"## 何时使用\n\n- 当目前没有数据时，用于显式的用户提示。\n- 初始化场景时的引导创建流程。"},{"name":"Flex","dirName":"flex","validVersion":"自 5.10.0 起支持","description":"用于对齐的弹性布局容器。","whenToUse":"## 何时使用\n\n- 适合设置元素之间的间距。\n- 适合设置各种水平、垂直对齐方式。\n\n### 与 Space 组件的区别\n\n- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。\n- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。"},{"name":"FloatButton","dirName":"float-button","validVersion":"自 5.0.0 起支持","description":"悬浮于页面上方的按钮。","whenToUse":"## 何时使用\n\n- 用于网站上的全局功能；\n- 无论浏览到何处都可以看见的按钮。"},{"name":"Form","dirName":"form","description":"高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。","whenToUse":"## 何时使用\n\n- 用于创建一个实体或收集信息。\n- 需要对输入的数据类型进行校验时。"},{"name":"Grid","dirName":"grid","description":"24 栅格系统。"},{"name":"Icon","dirName":"icon","description":"语义化的矢量图形。"},{"name":"Image","dirName":"image","description":"可预览的图片。","whenToUse":"## 何时使用\n\n- 需要展示图片时使用。\n- 加载显示大图或加载失败时容错处理。"},{"name":"Input","dirName":"input","description":"通过鼠标或键盘输入内容，是最基础的表单域的包装。","whenToUse":"## 何时使用\n\n- 需要用户输入表单域内容时。\n- 提供组合型输入框，带搜索的输入框，还可以进行大小选择。"},{"name":"InputNumber","dirName":"input-number","description":"通过鼠标或键盘，输入范围内的数值。","whenToUse":"## 何时使用\n\n当需要获取标准数值时。"},{"name":"Layout","dirName":"layout","description":"协助进行页面级整体布局。"},{"name":"List","dirName":"list","description":"最基础的列表展示，可承载文字、列表、图片、段落。","whenToUse":"## 何时使用\n\n最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。"},{"name":"Mentions","dirName":"mentions","description":"用于在输入中提及某人或某事。","whenToUse":"## 何时使用\n\n用于在输入中提及某人或某事，常用于发布、聊天或评论功能。\n\n### 用法升级 <Badge>5.1.0+</Badge>\n\n<!-- prettier-ignore -->\n:::warning{title=\"升级提示\"}\n在 5.1.0 版本后，我们提供了 `<Mentions options={[...]} />` 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。\n同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。\n:::\n\n```jsx\n// >=5.1.0 可用，推荐的写法 ✅\nconst options = [{ value: 'sample', label: 'sample' }];\nreturn <Mentions options={options} />;\n\n// <5.1.0 可用，>=5.1.0 时不推荐 🙅🏻‍♀️\nreturn (\n <Mentions onChange={onChange}>\n <Mentions.Option value=\"sample\">Sample</Mentions.Option>\n </Mentions>\n);\n```"},{"name":"Menu","dirName":"menu","description":"为页面和功能提供导航的菜单列表。","whenToUse":"## 何时使用\n\n导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。\n\n更多布局和导航的使用可以参考：[通用布局](/components/layout-cn)。"},{"name":"Message","dirName":"message","description":"全局展示操作反馈信息。","whenToUse":"## 何时使用\n\n- 可提供成功、警告和错误等反馈信息。\n- 顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。"},{"name":"Modal","dirName":"modal","description":"展示一个对话框，提供标题、内容区、操作区。","whenToUse":"## 何时使用\n\n需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。\n\n另外当需要一个简洁的确认框询问用户时，可以使用 [`App.useApp`](/components/app-cn/) 封装的语法糖方法。"},{"name":"Notification","dirName":"notification","description":"全局展示通知提醒信息。","whenToUse":"## 何时使用\n\n在系统四个角显示通知提醒信息。经常用于以下情况：\n\n- 较为复杂的通知内容。\n- 带有交互的通知，给出用户下一步的行动点。\n- 系统主动推送。"},{"name":"Overview","dirName":"overview"},{"name":"Pagination","dirName":"pagination","description":"分页器用于分隔长列表，每次只加载一个页面。","whenToUse":"## 何时使用\n\n- 当加载/渲染所有数据将花费很多时间时；\n- 可切换页码浏览数据。"},{"name":"Popconfirm","dirName":"popconfirm","description":"点击元素，弹出气泡式的确认框。","whenToUse":"## 何时使用\n\n目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。\n\n和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。"},{"name":"Popover","dirName":"popover","description":"点击/鼠标移入元素，弹出气泡式的卡片浮层。","whenToUse":"## 何时使用\n\n当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。\n\n和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。"},{"name":"Progress","dirName":"progress","description":"展示操作的当前进度。","whenToUse":"## 何时使用\n\n在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。\n\n- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过 2 秒时；\n- 当需要显示一个操作完成的百分比时。"},{"name":"QrCode","dirName":"qr-code","validVersion":"自 5.1.0 起支持","description":"能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。","whenToUse":"## 何时使用\n\n当需要将文本转换成为二维码时使用。"},{"name":"Radio","dirName":"radio","description":"用于在多个备选项中选中单个状态。","whenToUse":"## 何时使用\n\n- 用于在多个备选项中选中单个状态。\n- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。\n\n```tsx\n// 使用 Radio.Group 组件时，推荐的写法 ✅\nreturn (\n <Radio.Group\n value={value}\n options={[\n { value: 1, label: 'A' },\n { value: 2, label: 'B' },\n { value: 3, label: 'C' },\n ]}\n />\n);\n\n// 不推荐的写法 🙅🏻‍♀️\nreturn (\n <Radio.Group value={value}>\n <Radio value={1}>A</Radio>\n <Radio value={2}>B</Radio>\n <Radio value={3}>C</Radio>\n </Radio.Group>\n);\n```"},{"name":"Rate","dirName":"rate","description":"用于对事物进行评分操作。","whenToUse":"## 何时使用\n\n- 对评价进行展示。\n- 对事物进行快速的评级操作。"},{"name":"Result","dirName":"result","description":"用于反馈一系列操作任务的处理结果。","whenToUse":"## 何时使用\n\n当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。"},{"name":"Segmented","dirName":"segmented","description":"用于展示多个选项并允许用户选择其中单个选项。","whenToUse":"## 何时使用\n\n- 用于展示多个选项并允许用户选择其中单个选项；\n- 当切换选中选项时，关联区域的内容会发生变化。"},{"name":"Select","dirName":"select","description":"下拉选择器。","whenToUse":"## 何时使用\n\n- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。\n- 当选项少时（少于 5 项），建议直接将选项平铺，使用 [Radio](/components/radio-cn/) 是更好的选择。\n- 如果你在寻找一个可输可选的输入框，那你可能需要 [AutoComplete](/components/auto-complete-cn/)。\n\n### 用法升级 <Badge>5.11.0+</Badge>\n\n<!-- prettier-ignore -->\n:::warning{title=\"升级提示\"}\n在 5.11.0 版本后，我们提供了 `<Select options={[...]} />` 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。\n同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。\n:::\n\n```jsx\n// >=5.11.0 可用，推荐的写法 ✅\nreturn <Select options={[{ value: 'sample', label: <span>sample</span> }]} />;\n\n// 5.x 都可用，>=5.11.0 时不推荐 🙅🏻‍♀️\nreturn (\n <Select onChange={onChange}>\n <Select.Option value=\"sample\">Sample</Select.Option>\n </Select>\n);\n```"},{"name":"Skeleton","dirName":"skeleton","description":"在需要等待加载内容的位置提供一个占位图形组合。","whenToUse":"## 何时使用\n\n- 网络较慢，需要长时间等待加载处理的情况下。\n- 图文信息内容较多的列表/卡片中。\n- 只在第一次加载数据的时候使用。\n- 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。"},{"name":"Slider","dirName":"slider","description":"滑动型输入器，展示当前值和可选范围。","whenToUse":"## 何时使用\n\n当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。"},{"name":"Space","dirName":"space","description":"设置组件之间的间距。","whenToUse":"## 何时使用\n\n避免组件紧贴在一起，拉开统一的空间。\n\n- 适合行内元素的水平间距。\n- 可以设置各种水平对齐方式。\n- 需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact（自 `antd@4.24.0` 版本开始提供该组件）。\n\n### 与 Flex 组件的区别\n\n- Space 为内联元素提供间距，其本身会为每一个子元素添加包裹元素用于内联对齐。适用于行、列中多个子元素的等距排列。\n- Flex 为块级元素提供间距，其本身不会添加包裹元素。适用于垂直或水平方向上的子元素布局，并提供了更多的灵活性和控制能力。"},{"name":"Spin","dirName":"spin","description":"用于页面和区块的加载中状态。","whenToUse":"## 何时使用\n\n页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。"},{"name":"Splitter","dirName":"splitter","validVersion":"自 5.21.0 起支持","description":"自由切分指定区域","whenToUse":"## 何时使用\n\n- 可以水平或垂直地分隔区域。\n- 当需要自由拖拽调整各区域大小。\n- 当需要指定区域的最大最小宽高时。"},{"name":"Statistic","dirName":"statistic","description":"展示统计数值。","whenToUse":"## 何时使用\n\n- 当需要突出某个或某组数字时。\n- 当需要展示带描述的统计类数据时使用。"},{"name":"Steps","dirName":"steps","description":"引导用户按照流程完成任务的导航条。","whenToUse":"## 何时使用\n\n当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。"},{"name":"Switch","dirName":"switch","description":"使用开关切换两种状态之间。","whenToUse":"## 何时使用\n\n- 需要表示开关状态/两种状态之间的切换时；\n- 和 `checkbox` 的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。"},{"name":"Table","dirName":"table","description":"展示行列数据。","whenToUse":"## 何时使用\n\n- 当有大量结构化的数据需要展现时；\n- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。"},{"name":"Tabs","dirName":"tabs","description":"选项卡切换组件。","whenToUse":"## 何时使用\n\n提供平级的区域将大块内容进行收纳和展现，保持界面整洁。\n\nAnt Design 依次提供了三级选项卡，分别用于不同的场景。\n\n- 卡片式的页签，提供可关闭的样式，常用于容器顶部。\n- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。\n- [Radio.Button](/components/radio-cn/#radio-demo-radiobutton) 可作为更次级的页签来使用。"},{"name":"Tag","dirName":"tag","description":"进行标记和分类的小标签。","whenToUse":"## 何时使用\n\n- 用于标记事物的属性和维度。\n- 进行分类。"},{"name":"TimePicker","dirName":"time-picker","description":"输入或选择时间的控件。","whenToUse":"## 何时使用\n\n当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。"},{"name":"Timeline","dirName":"timeline","description":"垂直展示的时间流信息。","whenToUse":"## 何时使用\n\n- 当有一系列信息需按时间排列时，可正序和倒序。\n- 需要有一条时间轴进行视觉上的串联时。\n\n<!-- prettier-ignore -->\n:::warning{title=\"升级提示\"}\n5.2.0 版本之后，我们提供了更简单的用法 `<Timeline items={[...]} />` 以获得更好的性能，使您能在应用中编写更简单的代码。\n与此同时，我们弃用了旧的用法，并且将在下一个 major 版本中删除它。\n:::\n\n```jsx\n// >=5.2.0 可用，推荐的写法 ✅\nconst items = [{ children: 'sample', label: 'sample' }];\nreturn <Timeline items={items} />;\n\n// <5.2.0 可用，>=5.2.0 时不推荐 🙅🏻‍♀️\nreturn (\n <Timeline onChange={onChange}>\n <Timeline.Item>Sample</Timeline.Item>\n </Timeline>\n);\n```"},{"name":"Tooltip","dirName":"tooltip","description":"简单的文字提示气泡框。","whenToUse":"## 何时使用\n\n鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。\n\n可用来代替系统默认的 `title` 提示，提供一个 `按钮/文字/操作` 的文案解释。"},{"name":"Tour","dirName":"tour","validVersion":"自 5.0.0 起支持","description":"用于分步引导用户了解产品功能的气泡组件。","whenToUse":"## 何时使用\n\n常用于引导用户了解产品功能。"},{"name":"Transfer","dirName":"transfer","description":"双栏穿梭选择框。","whenToUse":"## 何时使用\n\n- 需要在多个可选项中进行多选时。\n- 比起 Select 和 TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。\n\n穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。\n\n选择一个或以上的选项后，点击对应的方向键，可以把选中的选项移动到另一栏。其中，左边一栏为 `source`，右边一栏为 `target`，API 的设计也反映了这两个概念。\n\n> 注意：穿梭框组件只支持受控使用，不支持非受控模式。"},{"name":"Tree","dirName":"tree","description":"多层次的结构列表。","whenToUse":"## 何时使用\n\n文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 `树控件` 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。"},{"name":"TreeSelect","dirName":"tree-select","description":"树型选择控件。","whenToUse":"## 何时使用\n\n类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。"},{"name":"Typography","dirName":"typography","description":"文本的基本格式。","whenToUse":"## 何时使用\n\n- 当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。\n- 当需要一列基于文本的基础操作时，如拷贝/省略/可编辑。"},{"name":"Upload","dirName":"upload","description":"文件选择上传和拖拽上传控件。","whenToUse":"## 何时使用\n\n上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。\n\n- 当需要上传一个或一些文件时。\n- 当需要展现上传的进度时。\n- 当需要使用拖拽交互时。"},{"name":"Watermark","dirName":"watermark","validVersion":"自 5.1.0 起支持","description":"给页面的某个区域加上水印。","whenToUse":"## 何时使用\n\n- 页面需要添加水印标识版权时使用。\n- 适用于防止信息盗用。"}]