diff --git a/.dumi/theme/builtins/ComponentMeta/index.tsx b/.dumi/theme/builtins/ComponentMeta/index.tsx new file mode 100644 index 0000000000..2cf053d874 --- /dev/null +++ b/.dumi/theme/builtins/ComponentMeta/index.tsx @@ -0,0 +1,144 @@ +/* eslint-disable lodash/import-scope */ +import React from 'react'; +import { GithubOutlined } from '@ant-design/icons'; +import { Descriptions, theme, Tooltip, Typography, type GetProp } from 'antd'; +import { createStyles, css } from 'antd-style'; +import { kebabCase } from 'lodash'; +import CopyToClipboard from 'react-copy-to-clipboard'; + +import useLocale from '../../../hooks/useLocale'; + +const locales = { + cn: { + import: '使用', + copy: '复制', + copied: '已复制', + source: '源码', + }, + en: { + import: 'Import', + copy: 'Copy', + copied: 'Copied', + source: 'Source', + }, +}; + +const useStyle = createStyles(({ token }) => ({ + code: css` + cursor: pointer; + position: relative; + display: inline-block; + border-radius: 3px; + padding-inline: ${token.paddingXS}px; + transition: all ${token.motionDurationSlow} !important; + + &:hover { + background: ${token.controlItemBgHover}; + } + `, +})); + +export interface ComponentMetaProps { + component: string; + source: string | true; +} + +const ComponentMeta = (props: ComponentMetaProps) => { + const { component, source } = props; + const { token } = theme.useToken(); + + const [locale] = useLocale(locales); + + const { styles } = useStyle(); + + // ========================= Copy ========================= + const [copied, setCopied] = React.useState(false); + + const onCopy = () => { + setCopied(true); + }; + + const onOpenChange = (open: boolean) => { + if (open) { + setCopied(false); + } + }; + + // ======================== Source ======================== + const [filledSource, abbrSource] = React.useMemo(() => { + if (String(source) === 'true') { + const kebabComponent = kebabCase(component); + return [ + `https://github.com/ant-design/ant-design/blob/master/components/${kebabComponent}`, + `components/${kebabComponent}`, + ]; + } + + if (typeof source !== 'string') { + return [null, null]; + } + + return [source, source]; + }, [component, source]); + + // ======================== Render ======================== + const importList = [ + + import + , + {` { ${component} } `}, + + from + , + + {`'antd'`} + , + + ; + , + ]; + + return ( + + + + + {importList.map((txt, index) => (index === 0 ? txt : [' ', txt]))} + + + + + ), + }, + filledSource && { + label: locale.source, + children: ( + + {abbrSource} + + ), + }, + ].filter((v) => v) as GetProp + } + /> + ); +}; + +export default ComponentMeta; diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index d927a5b281..1580b6e47d 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -6,6 +6,7 @@ import { FormattedMessage, useRouteMeta } from 'dumi'; import useLayoutState from '../../../hooks/useLayoutState'; import useLocation from '../../../hooks/useLocation'; +import ComponentMeta from '../../builtins/ComponentMeta'; import type { DemoContextProps } from '../DemoContext'; import DemoContext from '../DemoContext'; import SiteContext from '../SiteContext'; @@ -92,6 +93,13 @@ const Content: React.FC = ({ children }) => { {!meta.frontmatter.__autoDescription && meta.frontmatter.description} + + {/* Import Info */} + {meta.frontmatter.category === 'Components' && + String(meta.frontmatter.showImport) !== 'false' && ( + + )} +
{children}
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md index 1424b00085..78ad873607 100644 --- a/components/avatar/index.zh-CN.md +++ b/components/avatar/index.zh-CN.md @@ -1,7 +1,8 @@ --- category: Components -subtitle: 头像 title: Avatar +subtitle: 头像 +description: 用来代表用户或事物，支持图片、图标或字符展示。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JJBSS5lBG4IAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YbgyQaRGz-UAAAAAAAAAAAAADrJ8AQ/original demo: @@ -11,8 +12,6 @@ group: order: 5 --- -用来代表用户或事物，支持图片、图标或字符展示。 - ## 设计师专属 安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本。 diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 1635d8614c..325d290187 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -1,6 +1,7 @@ --- category: Components title: Badge +description: Small numerical value or status descriptor for UI elements. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original demo: @@ -8,8 +9,6 @@ demo: group: Data Display --- -Small numerical value or status descriptor for UI elements. - ## When To Use Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count. diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index cc774abf85..b53b26acc2 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -1,7 +1,8 @@ --- category: Components -subtitle: 徽标数 title: Badge +subtitle: 徽标数 +description: 图标右上角的圆形徽标数字。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original demo: @@ -9,8 +10,6 @@ demo: group: 数据展示 --- -图标右上角的圆形徽标数字。 - ## 何时使用 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。 diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index 1885dd6106..a6cea18b63 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Navigation title: Breadcrumb +description: Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*I5a2Tpqs3y0AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Tr90QKrE_LcAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy. - ## When To Use - When the system has more than two layers in a hierarchy. diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index 8c141cccce..5e399dd176 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 面包屑 group: 导航 title: Breadcrumb +subtitle: 面包屑 +description: 显示当前页面在系统层级结构中的位置，并能向上返回。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*I5a2Tpqs3y0AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Tr90QKrE_LcAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -显示当前页面在系统层级结构中的位置，并能向上返回。 - ## 何时使用 - 当系统拥有超过两级以上的层级结构时； diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 2b098d7621..863ef43b32 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -1,6 +1,7 @@ --- category: Components title: Button +description: To trigger an operation. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original demo: @@ -10,8 +11,6 @@ group: order: 1 --- -To trigger an operation. - ## When To Use A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic. diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 0971b8788f..9d0184df78 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -2,6 +2,7 @@ category: Components title: Button subtitle: 按钮 +description: 按钮用于开始一个即时操作。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original demo: @@ -11,8 +12,6 @@ group: order: 1 --- -按钮用于开始一个即时操作。 - ## 何时使用 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。 diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 4480bc7fff..8b61d0553b 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Data Display title: Calendar +description: A container that displays data in calendar form. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original --- -Container for displaying data in calendar form. - ## When To Use When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch. diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index dbda79cb72..89ff9ff0fe 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -1,14 +1,13 @@ --- category: Components group: 数据展示 -subtitle: 日历 title: Calendar +subtitle: 日历 +description: 按照日历形式展示数据的容器。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original --- -按照日历形式展示数据的容器。 - ## 何时使用 当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。 diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index bf119fee30..5cda821d09 100644 --- a/components/card/index.en-US.md +++ b/components/card/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Data Display title: Card +description: A container for displaying information. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QXO1SKEdIzYAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAAAAAAAAAAAADrJ8AQ/original --- -Simple rectangular container. - ## When To Use A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes. diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index e13cfe3556..6ee83ac5ff 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -3,12 +3,11 @@ category: Components group: 数据展示 title: Card subtitle: 卡片 +description: 通用卡片容器。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QXO1SKEdIzYAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAAAAAAAAAAAADrJ8AQ/original --- -通用卡片容器。 - ## 何时使用 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。 diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index 484a1d0db5..9027df75f8 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Display title: Carousel +description: A set of carousel areas. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-58QpYnqOsAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -A carousel component. Scales with its container. - ## When To Use - When there is a group of content on the same level. diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 20958ef57b..872112885e 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -3,14 +3,13 @@ category: Components group: 数据展示 title: Carousel subtitle: 走马灯 +description: 一组轮播的区域。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-58QpYnqOsAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -旋转木马，一组轮播的区域。 - ## 何时使用 - 当有一组平级的内容。 diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index 786c15813a..42d99ca596 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Entry title: Cascader +description: Cascade selection box. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ngTnQZNOcK0AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Nt8xR7afyr0AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Cascade selection box. - ## When To Use - When you need to select from a set of associated data set. Such as province/city/district, company level, things classification. diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 6bc7d57199..ff3c0276cb 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -3,14 +3,13 @@ category: Components group: 数据录入 title: Cascader subtitle: 级联选择 +description: 级联选择框。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ngTnQZNOcK0AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Nt8xR7afyr0AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -级联选择框。 - ## 何时使用 - 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。 diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md index 867068673a..c2ac376ea3 100644 --- a/components/checkbox/index.en-US.md +++ b/components/checkbox/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Entry title: Checkbox +description: Collect user's choices. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G3MjTYXL6AIAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Checkbox component. - ## When To Use - Used for selecting multiple values from several options. diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index 6f3caf508f..9c885b7ed7 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 多选框 group: 数据录入 title: Checkbox +subtitle: 多选框 +description: 收集用户的多项选择。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G3MjTYXL6AIAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -多选框。 - ## 何时使用 - 在一组可选项中进行多项选择时； diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index b0ccf90404..df65e26a8b 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Data Display title: Collapse +description: A content area which can be collapsed and expanded. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original --- -A content area which can be collapsed and expanded. - ## When To Use - Can be used to group or hide complex regions to keep the page clean. diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index 69772d8144..2a6ac2e8b9 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -3,12 +3,11 @@ category: Components group: 数据展示 title: Collapse subtitle: 折叠面板 +description: 可以折叠/展开的内容区域。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original --- -可以折叠/展开的内容区域。 - ## 何时使用 - 对复杂区域进行分组和隐藏，保持页面的整洁。 diff --git a/components/color-picker/index.en-US.md b/components/color-picker/index.en-US.md index a9ca6338a4..4d5c012bf8 100644 --- a/components/color-picker/index.en-US.md +++ b/components/color-picker/index.en-US.md @@ -1,6 +1,7 @@ --- category: Components title: ColorPicker +description: Used for color selection. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original tag: New @@ -10,7 +11,7 @@ group: title: Data Entry --- -Components providing color selection, Available since `5.5.0`. +Available since `5.5.0`. ## When To Use diff --git a/components/color-picker/index.zh-CN.md b/components/color-picker/index.zh-CN.md index 867481239f..abd1d5cff6 100644 --- a/components/color-picker/index.zh-CN.md +++ b/components/color-picker/index.zh-CN.md @@ -1,7 +1,8 @@ --- category: Components -subtitle: 颜色选择器 title: ColorPicker +subtitle: 颜色选择器 +description: 用于选择颜色。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original tag: New @@ -11,7 +12,7 @@ group: title: 数据录入 --- -提供颜色选取的组件，自 `5.5.0` 版本开始提供该组件。 +自 `5.5.0` 版本开始提供该组件。 ## 何时使用 diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 3a0dad1b97..18fbf3b5fa 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Other title: ConfigProvider +description: Provide a uniform configuration support for components. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original --- -`ConfigProvider` provides a uniform configuration support for components. - ## Usage This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config. diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index f1671af2a5..7c7e0c9e9e 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -3,12 +3,11 @@ category: Components subtitle: 全局化配置 group: 其他 title: ConfigProvider +description: 为组件提供统一的全局化配置。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original --- -为组件提供统一的全局化配置。 - ## 使用 ConfigProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。 diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md index 91969f1efa..dda104d6d8 100644 --- a/components/descriptions/index.en-US.md +++ b/components/descriptions/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Data Display title: Descriptions +description: Display multiple read-only fields in a group. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original --- -Display multiple read-only fields in groups. - ## When To Use Commonly displayed on the details page. diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index e8bd3940a8..663aaed48d 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -1,14 +1,13 @@ --- category: Components -subtitle: 描述列表 group: 数据展示 title: Descriptions +subtitle: 描述列表 +description: 展示多个只读字段的组合。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original --- -成组展示多个只读字段。 - ## 何时使用 常见于详情页的信息展示。 diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md index 76b0a34f71..a23702c73d 100644 --- a/components/divider/index.en-US.md +++ b/components/divider/index.en-US.md @@ -1,6 +1,7 @@ --- category: Components title: Divider +description: A divider line separates different content. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KPSEQ74PLg4AAAAAAAAAAAAADrJ8AQ/original demo: @@ -10,8 +11,6 @@ group: order: 2 --- -A divider line separates different content. - ## When To Use - Divide sections of article. diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index 04c4c6e6e5..5136d4751c 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -2,6 +2,7 @@ category: Components title: Divider subtitle: 分割线 +description: 区隔内容的分割线。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KPSEQ74PLg4AAAAAAAAAAAAADrJ8AQ/original demo: @@ -11,8 +12,6 @@ group: order: 2 --- -区隔内容的分割线。 - ## 何时使用 - 对不同章节的文本段落进行分割。 diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md index 458d41f607..30e57a6e8f 100644 --- a/components/drawer/index.en-US.md +++ b/components/drawer/index.en-US.md @@ -1,16 +1,14 @@ --- group: Feedback category: Components -subtitle: title: Drawer +description: A panel that slides out from the edge of the screen. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -A panel which slides in from the edge of the screen. - ## When To Use A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context. diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md index a4213a5b5b..51bceabfda 100644 --- a/components/drawer/index.zh-CN.md +++ b/components/drawer/index.zh-CN.md @@ -1,16 +1,15 @@ --- group: 反馈 category: Components -subtitle: 抽屉 title: Drawer +subtitle: 抽屉 +description: 屏幕边缘滑出的浮层面板。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -屏幕边缘滑出的浮层面板。 - ## 何时使用 抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。 diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index f8b90a3071..b3aca10101 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Navigation title: Dropdown +description: A dropdown list. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gTBySYX11WcAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k619RJ_7bKEAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -A dropdown list. - ## When To Use When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action. diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index 84e7a8e2d6..a131bfcd77 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 下拉菜单 group: 导航 title: Dropdown +subtitle: 下拉菜单 +description: 向下弹出的列表。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gTBySYX11WcAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k619RJ_7bKEAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -向下弹出的列表。 - ## 何时使用 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md index 7a904f0a72..c20f596ca8 100644 --- a/components/empty/index.en-US.md +++ b/components/empty/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Data Display title: Empty +description: Empty state placeholder. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original --- -Empty state placeholder. - ## When To Use - When there is no data provided, display for friendly tips. diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md index f2f5499fd6..9f00af9f42 100644 --- a/components/empty/index.zh-CN.md +++ b/components/empty/index.zh-CN.md @@ -1,14 +1,13 @@ --- category: Components -subtitle: 空状态 group: 数据展示 title: Empty +subtitle: 空状态 +description: 空状态时的展示占位图。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original --- -空状态时的展示占位图。 - ## 何时使用 - 当目前没有数据时，用于显式的用户提示。 diff --git a/components/flex/index.en-US.md b/components/flex/index.en-US.md index 933d489202..a0a736e3c6 100644 --- a/components/flex/index.en-US.md +++ b/components/flex/index.en-US.md @@ -2,12 +2,13 @@ category: Components group: Layout title: Flex +description: A flex layout container for alignment. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original tag: New --- -Flex. Available since `5.10.0`. +Available since `5.10.0`. ## When To Use diff --git a/components/flex/index.zh-CN.md b/components/flex/index.zh-CN.md index 965d8d63ba..9e2f96c212 100644 --- a/components/flex/index.zh-CN.md +++ b/components/flex/index.zh-CN.md @@ -1,14 +1,15 @@ --- category: Components -subtitle: 弹性布局 group: 布局 title: Flex +subtitle: 弹性布局 +description: 用于对齐的弹性布局容器。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original tag: New --- -弹性布局。自 `5.10.0` 版本开始提供该组件。 +自 `5.10.0` 版本开始提供该组件。 ## 何时使用 diff --git a/components/float-button/index.en-US.md b/components/float-button/index.en-US.md index 178a5d006b..706706e1a9 100644 --- a/components/float-button/index.en-US.md +++ b/components/float-button/index.en-US.md @@ -2,6 +2,7 @@ category: Components group: General title: FloatButton +description: A button that floats at the top of the page. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original demo: @@ -9,7 +10,7 @@ demo: tag: New --- -FloatButton. Available since `5.0.0`. +Available since `5.0.0`. ## When To Use diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 33c1d5d35c..8f00e17eb3 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -1,8 +1,9 @@ --- category: Components group: 通用 -subtitle: 悬浮按钮 title: FloatButton +subtitle: 悬浮按钮 +description: 悬浮于页面上方的按钮。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original demo: @@ -10,7 +11,7 @@ demo: tag: New --- -悬浮按钮。自 `5.0.0` 版本开始提供该组件。 +自 `5.0.0` 版本开始提供该组件。 ## 何时使用 diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index f46d9121d4..af0329af9d 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Data Entry title: Form +description: High-performance form component with data domain management. Includes data entry, validation, and corresponding styles. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original --- -High performance Form component with data scope management. Including data collection, verification, and styles. - ## When to use - When you need to create an instance or collect information. diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 9d743c7a6e..e45b555cb2 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -1,14 +1,13 @@ --- category: Components -subtitle: 表单 group: 数据录入 title: Form +subtitle: 表单 +description: 高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original --- -高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。 - ## 何时使用 - 用于创建一个实体或收集信息。 diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index 11fedc9968..9caf6b3230 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Layout title: Grid +description: 24 Grids System. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAAAAAAAAAAAADrJ8AQ/original --- -24 Grids System. - ## Design concept
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index 041afcb137..9dc2f1b384 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -1,14 +1,13 @@ --- category: Components -subtitle: 栅格 group: 布局 title: Grid +subtitle: 栅格 +description: 24 栅格系统。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAAAAAAAAAAAADrJ8AQ/original --- -24 栅格系统。 - ## 设计理念
diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md index eb6bf437f4..2be5228d14 100644 --- a/components/icon/index.en-US.md +++ b/components/icon/index.en-US.md @@ -4,6 +4,7 @@ group: General title: Icon description: Semantic vector graphics. toc: false +showImport: false cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original demo: @@ -108,8 +109,8 @@ We added a `createFromIconfontCN` function to help developer use their own icons ```jsx import React from 'react'; -import ReactDOM from 'react-dom/client'; import { createFromIconfontCN } from '@ant-design/icons'; +import ReactDOM from 'react-dom/client'; const MyIcon = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generate in iconfont.cn @@ -157,9 +158,10 @@ module.exports = { ```jsx import React from 'react'; -import ReactDOM from 'react-dom/client'; import Icon from '@ant-design/icons'; import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file. +import ReactDOM from 'react-dom/client'; + // in create-react-app: // import { ReactComponent as MessageSvg } from 'path/to/message.svg'; diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index f9274c2cc7..be949ed4ec 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -5,6 +5,7 @@ description: 语义化的矢量图形。 group: 通用 title: Icon toc: false +showImport: false cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original demo: diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index 265c91ecd3..4fbf54934a 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -2,13 +2,12 @@ category: Components group: Data Display title: Image +description: Preview-able image. cols: 2 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original --- -Previewable image. - ## When To Use - When you need to display pictures. diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 6c33b65f66..caed1d6c16 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -1,15 +1,14 @@ --- category: Components -subtitle: 图片 group: 数据展示 title: Image +subtitle: 图片 +description: 可预览的图片。 cols: 2 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original --- -可预览的图片。 - ## 何时使用 - 需要展示图片时使用。 diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 02e955ebb7..4f7fe44a6e 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Entry title: InputNumber +description: Enter a number within certain range with the mouse or keyboard. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Enter a number within certain range with the mouse or keyboard. - ## When To Use When a numeric value needs to be provided. diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index a2fe97b6e2..7b522f4369 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 数字输入框 group: 数据录入 title: InputNumber +subtitle: 数字输入框 +description: 通过鼠标或键盘，输入范围内的数值。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -通过鼠标或键盘，输入范围内的数值。 - ## 何时使用 当需要获取标准数值时。 diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index ffc1d02d3c..dfa46f103f 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Entry title: Input +description: Through mouse or keyboard input content, it is the most basic form field wrapper. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data. - ## When To Use - A user input in a form field is needed. diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index e8e7ef98af..a264d123ad 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 输入框 group: 数据录入 title: Input +subtitle: 输入框 +description: 通过鼠标或键盘输入内容，是最基础的表单域的包装。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -通过鼠标或键盘输入内容，是最基础的表单域的包装。 - ## 何时使用 - 需要用户输入表单域内容时。 diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md index 3c15fe6cdb..5b13351d4b 100644 --- a/components/layout/index.en-US.md +++ b/components/layout/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Layout title: Layout +description: Handling the overall layout of a page. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAAAAAAAAAAAADrJ8AQ/original --- -Handling the overall layout of a page. - ## Specification ### Size diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md index 5db4fdea7e..10a6b94241 100644 --- a/components/layout/index.zh-CN.md +++ b/components/layout/index.zh-CN.md @@ -1,14 +1,13 @@ --- category: Components -subtitle: 布局 group: 布局 title: Layout +subtitle: 布局 +description: 协助进行页面级整体布局。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAAAAAAAAAAAADrJ8AQ/original --- -协助进行页面级整体布局。 - ## 设计规则 ### 尺寸 diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index dc6e3df42d..c626aecef1 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Data Display title: List +description: Basic list display, which can carry text, lists, pictures, paragraphs. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original --- -Simple List. - ## When To Use A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size. diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index f532377310..289ca0aa0a 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -3,12 +3,11 @@ category: Components group: 数据展示 title: List subtitle: 列表 +description: 最基础的列表展示，可承载文字、列表、图片、段落。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original --- -通用列表。 - ## 何时使用 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。 diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md index bb99a09a2b..0598090af4 100644 --- a/components/mentions/index.en-US.md +++ b/components/mentions/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Entry title: Mentions +description: Used to mention someone or something in an input. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*pxR2S53P_xoAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Mention component. - ## When To Use When you need to mention someone or something. diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md index 39c68fca28..58c2455af8 100644 --- a/components/mentions/index.zh-CN.md +++ b/components/mentions/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 提及 group: 数据录入 title: Mentions +subtitle: 提及 +description: 用于在输入中提及某人或某事。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*pxR2S53P_xoAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -提及组件。 - ## 何时使用 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。 diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index b66c462b4b..63346bf92c 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Navigation title: Menu +description: A versatile menu for navigation. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAAAAAAAAAAAADrJ8AQ/original --- -A versatile menu for navigation. - ## When To Use Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website. diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 3321db0252..6bfe61e1c7 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -3,12 +3,11 @@ category: Components group: 导航 title: Menu subtitle: 导航菜单 +description: 为页面和功能提供导航的菜单列表。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAAAAAAAAAAAADrJ8AQ/original --- -为页面和功能提供导航的菜单列表。 - ## 何时使用 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md index c6e2985a70..cd4ec100f0 100644 --- a/components/message/index.en-US.md +++ b/components/message/index.en-US.md @@ -3,14 +3,13 @@ category: Components group: Feedback noinstant: true title: Message +description: Display global messages as feedback in response to user operations. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Xl5ORK7Iy44AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fv7mQIWdUgcAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Display global messages as feedback in response to user operations. - ## When To Use - To provide feedback such as success, warning, error etc. diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index 35ee8ca484..f2a75145aa 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -1,17 +1,16 @@ --- category: Components -subtitle: 全局提示 group: 反馈 noinstant: true title: Message +subtitle: 全局提示 +description: 全局展示操作反馈信息。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Xl5ORK7Iy44AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fv7mQIWdUgcAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -全局展示操作反馈信息。 - ## 何时使用 - 可提供成功、警告和错误等反馈信息。 diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index d4954fef2a..db81135d33 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -2,14 +2,13 @@ group: Feedback category: Components title: Modal +description: Display a modal dialog box, providing a title, content area, and action buttons. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Z9vzQZAdJDQAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WtgsSLPa1Z4AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Modal dialogs. - ## When To Use When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information. diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 6bd4375361..b2c362285d 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -1,16 +1,15 @@ --- group: 反馈 category: Components -subtitle: 对话框 title: Modal +subtitle: 对话框 +description: 展示一个对话框，提供标题、内容区、操作区。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Z9vzQZAdJDQAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WtgsSLPa1Z4AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -模态对话框。 - ## 何时使用 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。 diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index 7dc67b4670..564dc7cd4e 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -3,14 +3,13 @@ category: Components group: Feedback noinstant: true title: Notification +description: Prompt notification message globally. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cRmqTY4nKPEAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*W3RmSov-xVMAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Display a notification message globally. - ## When To Use To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases: diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index f0025f7417..c003d194db 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -4,14 +4,13 @@ group: 反馈 noinstant: true title: Notification subtitle: 通知提醒框 +description: 全局展示通知提醒信息。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cRmqTY4nKPEAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*W3RmSov-xVMAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -全局展示通知提醒信息。 - ## 何时使用 在系统四个角显示通知提醒信息。经常用于以下情况： diff --git a/components/overview/index.en-US.md b/components/overview/index.en-US.md index f4ab40dc0a..283af486c1 100644 --- a/components/overview/index.en-US.md +++ b/components/overview/index.en-US.md @@ -1,6 +1,7 @@ --- category: Components title: Components Overview +showImport: false --- `antd` provides plenty of UI components to enrich your web applications, and we will improve components experience consistently. We also recommend some great [Third-Party Libraries](/docs/react/recommendation) additionally. diff --git a/components/overview/index.zh-CN.md b/components/overview/index.zh-CN.md index 34147df048..0f96dd0c67 100644 --- a/components/overview/index.zh-CN.md +++ b/components/overview/index.zh-CN.md @@ -1,6 +1,7 @@ --- category: Components title: 组件总览 +showImport: false --- `antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation-cn)作为必要的补充，另外如果您是内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。 diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md index 525e90a0e7..db4019301a 100644 --- a/components/pagination/index.en-US.md +++ b/components/pagination/index.en-US.md @@ -2,12 +2,11 @@ category: Components group: Navigation title: Pagination +description: A long list can be divided into several pages, and only one page will be loaded at a time. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original --- -A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time. - ## When To Use - When it will take a long time to load/render all items. diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index cd390892df..7700bdea9e 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -1,14 +1,13 @@ --- category: Components -subtitle: 分页 group: 导航 title: Pagination +subtitle: 分页 +description: 分页器用于分隔长列表，每次只加载一个页面。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original --- -采用分页的形式分隔长列表，每次只加载一个页面。 - ## 何时使用 - 当加载/渲染所有数据将花费很多时间时； diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md index 68fb8d0ae9..84f39c8742 100644 --- a/components/popconfirm/index.en-US.md +++ b/components/popconfirm/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Feedback title: Popconfirm +description: Pop up a bubble confirmation box for an action. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a7tqQ6wrdeAAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*iwYsQpeFcB0AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -A simple and compact confirmation dialog of an action. - ## When To Use A simple and compact dialog used for asking for user confirmation. diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 035d517896..8e9b2ed0e4 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 气泡确认框 group: 反馈 title: Popconfirm +subtitle: 气泡确认框 +description: 点击元素，弹出气泡式的确认框。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a7tqQ6wrdeAAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*iwYsQpeFcB0AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -点击元素，弹出气泡式的确认框。 - ## 何时使用 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。 diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md index 0fd6125a5c..d5a2be331d 100644 --- a/components/popover/index.en-US.md +++ b/components/popover/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Display title: Popover +description: The floating card pops up when clicking/mouse hovering over an element. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*kfW5RrfF4L8AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6b8fSKVVtXIAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -The floating card popped by clicking or hovering. - ## When To Use A simple popup menu to provide extra information or operations. diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index d46232db08..61cf1cbe64 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 气泡卡片 group: 数据展示 title: Popover +subtitle: 气泡卡片 +description: 点击/鼠标移入元素，弹出气泡式的卡片浮层。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*kfW5RrfF4L8AAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6b8fSKVVtXIAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -点击/鼠标移入元素，弹出气泡式的卡片浮层。 - ## 何时使用 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。 diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md index 16420b5da8..3450ab2823 100644 --- a/components/progress/index.en-US.md +++ b/components/progress/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Feedback title: Progress +description: Display the current progress of the operation. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Display the current progress of an operation flow. - ## When To Use If it will take a long time to complete an operation, you can use `Progress` to show the current progress and status. diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index d6f474d4b7..9c2db49048 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 进度条 group: 反馈 title: Progress +subtitle: 进度条 +description: 展示操作的当前进度。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -展示操作的当前进度。 - ## 何时使用 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。 diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index b1e034ec38..ea9cd8adb1 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -1,6 +1,7 @@ --- category: Components title: QRCode +description: Components that can convert text into QR codes, and support custom color and logo. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original demo: @@ -11,7 +12,7 @@ group: tag: New --- -Components that can convert text into QR codes, and support custom color and logo. Available since `antd@5.1.0`. +Available since `antd@5.1.0`. :::info diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index 62f32f3124..66c1849619 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -1,7 +1,8 @@ --- category: Components -subtitle: 二维码 title: QRCode +subtitle: 二维码 +description: 能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original demo: @@ -12,7 +13,7 @@ group: tag: New --- -能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。 +自 `antd@5.1.0` 版本开始提供该组件。 :::info diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md index e173270a41..0680395752 100644 --- a/components/radio/index.en-US.md +++ b/components/radio/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Entry title: Radio +description: Used to select a single state from multiple options. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mrPVRope68wAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xPfTSphsiA0AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Radio. - ## When To Use - Used to select a single state from multiple options. diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index edb67e3d94..948650e301 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 单选框 group: 数据录入 title: Radio +subtitle: 单选框 +description: 用于在多个备选项中选中单个状态。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mrPVRope68wAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xPfTSphsiA0AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -单选框。 - ## 何时使用 - 用于在多个备选项中选中单个状态。 diff --git a/components/rate/index.en-US.md b/components/rate/index.en-US.md index 28910671ce..354f9f8a21 100644 --- a/components/rate/index.en-US.md +++ b/components/rate/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Entry title: Rate +description: Used for rating operation on something. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oyOcTrB12_YAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M7_ER7GJr6wAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Rate component. - ## When To Use - Show evaluation. diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md index d554adbf53..bf3739d25d 100644 --- a/components/rate/index.zh-CN.md +++ b/components/rate/index.zh-CN.md @@ -1,16 +1,15 @@ --- category: Components -subtitle: 评分 group: 数据录入 title: Rate +subtitle: 评分 +description: 用于对事物进行评分操作。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oyOcTrB12_YAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M7_ER7GJr6wAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -评分组件。 - ## 何时使用 - 对评价进行展示。 diff --git a/components/result/index.en-US.md b/components/result/index.en-US.md index dd5bc97292..94cc68dc5e 100644 --- a/components/result/index.en-US.md +++ b/components/result/index.en-US.md @@ -2,12 +2,11 @@ group: Feedback category: Components title: Result +description: Used to feedback the processing results of a series of operations. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original --- -Used to feed back the results of a series of operational tasks. - ## When To Use Use when important operations need to inform the user to process the results and the feedback is more complicated. diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md index 1867fb5835..641a0eca5c 100644 --- a/components/result/index.zh-CN.md +++ b/components/result/index.zh-CN.md @@ -3,12 +3,11 @@ group: 反馈 category: Components title: Result subtitle: 结果 +description: 用于反馈一系列操作任务的处理结果。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original --- -用于反馈一系列操作任务的处理结果。 - ## 何时使用 当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。 diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md index 1ccfeea297..c1eeb18764 100644 --- a/components/segmented/index.en-US.md +++ b/components/segmented/index.en-US.md @@ -2,13 +2,14 @@ category: Components group: Data Display title: Segmented +description: Display multiple options and allow users to select a single option. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Segmented Controls. This component is available since `antd@4.20.0`. +This component is available since `antd@4.20.0`. ## When To Use diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index c8e29a9999..10f396fc41 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -1,15 +1,16 @@ --- category: Components -subtitle: 分段控制器 group: 数据展示 title: Segmented +subtitle: 分段控制器 +description: 用于展示多个选项并允许用户选择其中单个选项。 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -分段控制器。自 `antd@4.20.0` 版本开始提供该组件。 +自 `antd@4.20.0` 版本开始提供该组件。 ## 何时使用 diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index 69913b4891..30ecd683d4 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -2,14 +2,13 @@ category: Components group: Data Entry title: Select +description: A dropdown menu for displaying choices. cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*qGSbQJ0POEsAAAAAAAAAAAAADrJ8AQ/original coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a6ggRInInJ4AAAAAAAAAAAAADrJ8AQ/original demo: cols: 2 --- -Select component to select value from options. - ## When To Use - A dropdown menu for displaying choices - an elegant alternative to the native `