mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-23 18:50:06 +08:00
docs: Fix component doc alignment & support import usage (#48004)
* docs: init ref * docs all support * docs: fix link show
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
be1d14d4cb
commit
20561d6f9d
144
.dumi/theme/builtins/ComponentMeta/index.tsx
Normal file
144
.dumi/theme/builtins/ComponentMeta/index.tsx
Normal file
@ -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 = [
|
||||
<span key="import" style={{ color: token.magenta8 }}>
|
||||
import
|
||||
</span>,
|
||||
<span key="component" style={{ color: token.colorText }}>{` { ${component} } `}</span>,
|
||||
<span key="from" style={{ color: token.magenta8 }}>
|
||||
from
|
||||
</span>,
|
||||
<span key="antd" style={{ color: token.green8 }}>
|
||||
{`'antd'`}
|
||||
</span>,
|
||||
<span key="semicolon" style={{ color: token.colorText }}>
|
||||
;
|
||||
</span>,
|
||||
];
|
||||
|
||||
return (
|
||||
<Descriptions
|
||||
size="small"
|
||||
colon={false}
|
||||
column={1}
|
||||
style={{ marginTop: token.margin }}
|
||||
labelStyle={{
|
||||
paddingInlineEnd: token.padding,
|
||||
}}
|
||||
items={
|
||||
[
|
||||
{
|
||||
label: locale.import,
|
||||
children: (
|
||||
<Tooltip
|
||||
placement="right"
|
||||
title={copied ? locale.copied : locale.copy}
|
||||
onOpenChange={onOpenChange}
|
||||
>
|
||||
<span>
|
||||
<CopyToClipboard text={`import { ${component} } from 'antd';`} onCopy={onCopy}>
|
||||
<Typography.Text className={styles.code} onClick={onCopy}>
|
||||
{importList.map((txt, index) => (index === 0 ? txt : [' ', txt]))}
|
||||
</Typography.Text>
|
||||
</CopyToClipboard>
|
||||
</span>
|
||||
</Tooltip>
|
||||
),
|
||||
},
|
||||
filledSource && {
|
||||
label: locale.source,
|
||||
children: (
|
||||
<Typography.Link className={styles.code} href={filledSource} target="_blank">
|
||||
<GithubOutlined /> {abbrSource}
|
||||
</Typography.Link>
|
||||
),
|
||||
},
|
||||
].filter((v) => v) as GetProp<typeof Descriptions, 'items'>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default ComponentMeta;
|
||||
@ -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<React.PropsWithChildren> = ({ children }) => {
|
||||
<DocMeta />
|
||||
</InViewSuspense>
|
||||
{!meta.frontmatter.__autoDescription && meta.frontmatter.description}
|
||||
|
||||
{/* Import Info */}
|
||||
{meta.frontmatter.category === 'Components' &&
|
||||
String(meta.frontmatter.showImport) !== 'false' && (
|
||||
<ComponentMeta component={meta.frontmatter.title} source />
|
||||
)}
|
||||
|
||||
<div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
|
||||
<InViewSuspense>
|
||||
<ColumnCard
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
title: Util
|
||||
description: Utilities are used to assist development and provide some common utility methods.
|
||||
showImport: false
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -10,8 +12,6 @@ group:
|
||||
order: 99
|
||||
---
|
||||
|
||||
Utilities are used to assist development and provide some common utility methods.
|
||||
|
||||
## GetRef
|
||||
|
||||
Get the `ref` property definition of the component, which is very useful for components that are not directly exposed or child components.
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
category: Components
|
||||
title: Util
|
||||
subtitle: 工具类
|
||||
description: 辅助开发，提供一些常用的工具方法。
|
||||
showImport: false
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -11,8 +13,6 @@ group:
|
||||
order: 99
|
||||
---
|
||||
|
||||
工具类用于辅助开发，提供一些常用的工具方法。
|
||||
|
||||
## GetRef
|
||||
|
||||
获取组件的 `ref` 属性定义，这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
title: Affix
|
||||
description: Stick an element to the viewport.
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -10,8 +11,6 @@ group:
|
||||
order: 7
|
||||
---
|
||||
|
||||
Wrap Affix around another component to make it stick the viewport.
|
||||
|
||||
## When To Use
|
||||
|
||||
On longer web pages, it's helpful to stick component into the viewport. This is common for menus and actions.
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
category: Components
|
||||
title: Affix
|
||||
subtitle: 固钉
|
||||
description: 将页面元素钉在可视范围。
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -11,8 +12,6 @@ group:
|
||||
order: 7
|
||||
---
|
||||
|
||||
将页面元素钉在可视范围。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
title: Alert
|
||||
description: Display warning messages that require attention.
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QsvtS41m45UAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gOTISoMFZV0AAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -10,8 +11,6 @@ group:
|
||||
order: 6
|
||||
---
|
||||
|
||||
Alert component for feedback.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need to show alert messages to users.
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 警告提示
|
||||
title: Alert
|
||||
subtitle: 警告提示
|
||||
description: 警告提示，展现需要关注的信息。
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QsvtS41m45UAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gOTISoMFZV0AAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -11,8 +12,6 @@ group:
|
||||
order: 6
|
||||
---
|
||||
|
||||
警告提示，展现需要关注的信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当某个页面需要向用户显示警告的信息时。
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
title: Anchor
|
||||
description: Hyperlinks to scroll on one page.
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ufP1TLS5VvIAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_9_eTrgvHNQAAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -9,8 +10,6 @@ group:
|
||||
order: 3
|
||||
---
|
||||
|
||||
Hyperlinks to scroll on one page.
|
||||
|
||||
## When To Use
|
||||
|
||||
For displaying anchor hyperlinks on page and jumping between them.
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
category: Components
|
||||
title: Anchor
|
||||
subtitle: 锚点
|
||||
description: 用于跳转到页面指定位置。
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ufP1TLS5VvIAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_9_eTrgvHNQAAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -10,8 +11,6 @@ group:
|
||||
order: 3
|
||||
---
|
||||
|
||||
用于跳转到页面指定位置。
|
||||
|
||||
## 何时使用
|
||||
|
||||
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
category: Components
|
||||
group: Other
|
||||
title: App
|
||||
description: Application wrapper for some global usages.
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -9,8 +10,6 @@ demo:
|
||||
tag: New
|
||||
---
|
||||
|
||||
Application wrapper for some global usages.
|
||||
|
||||
## When To Use
|
||||
|
||||
- Provide reset styles based on `.ant-app` element.
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 包裹组件
|
||||
group: 其他
|
||||
title: App
|
||||
subtitle: 包裹组件
|
||||
description: 提供重置样式和提供消费上下文的默认环境。
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
|
||||
demo:
|
||||
@ -10,8 +11,6 @@ demo:
|
||||
tag: New
|
||||
---
|
||||
|
||||
新的包裹组件，提供重置样式和提供消费上下文的默认环境。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
title: AutoComplete
|
||||
description: Autocomplete function of input field.
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g8THS4NpV6sAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WERTQ6qvgEYAAAAAAAAAAAAADrJ8AQ/original
|
||||
group:
|
||||
@ -10,8 +11,6 @@ demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
Autocomplete function of input field.
|
||||
|
||||
## When To Use
|
||||
|
||||
- When you need an input box instead of a selector.
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 自动完成
|
||||
title: AutoComplete
|
||||
subtitle: 自动完成
|
||||
description: 输入框自动完成功能。
|
||||
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g8THS4NpV6sAAAAAAAAAAAAADrJ8AQ/original
|
||||
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WERTQ6qvgEYAAAAAAAAAAAAADrJ8AQ/original
|
||||
group:
|
||||
@ -11,8 +12,6 @@ demo:
|
||||
cols: 2
|
||||
---
|
||||
|
||||
输入框自动完成功能。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要一个输入框而不是选择器。
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
title: Avatar
|
||||
description: Used to represent users or things, supporting the display of images, icons, or characters.
|
||||
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:
|
||||
@ -10,8 +11,6 @@ group:
|
||||
order: 5
|
||||
---
|
||||
|
||||
Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
|
||||
|
||||
## Examples
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
|
||||
@ -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)，一键填充高逼格头像和文本。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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: 数据展示
|
||||
---
|
||||
|
||||
图标右上角的圆形徽标数字。
|
||||
|
||||
## 何时使用
|
||||
|
||||
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
显示当前页面在系统层级结构中的位置，并能向上返回。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当系统拥有超过两级以上的层级结构时；
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
按钮用于开始一个即时操作。
|
||||
|
||||
## 何时使用
|
||||
|
||||
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
按照日历形式展示数据的容器。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
通用卡片容器。
|
||||
|
||||
## 何时使用
|
||||
|
||||
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
旋转木马，一组轮播的区域。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当有一组平级的内容。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
级联选择框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
多选框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 在一组可选项中进行多项选择时；
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
可以折叠/展开的内容区域。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 对复杂区域进行分组和隐藏，保持页面的整洁。
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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) 特性，只需在应用外围包裹一次即可全局生效。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
成组展示多个只读字段。
|
||||
|
||||
## 何时使用
|
||||
|
||||
常见于详情页的信息展示。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
区隔内容的分割线。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 对不同章节的文本段落进行分割。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
屏幕边缘滑出的浮层面板。
|
||||
|
||||
## 何时使用
|
||||
|
||||
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
向下弹出的列表。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
空状态时的展示占位图。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当目前没有数据时，用于显式的用户提示。
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 用于创建一个实体或收集信息。
|
||||
|
||||
@ -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
|
||||
|
||||
<div class="grid-demo">
|
||||
|
||||
@ -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 栅格系统。
|
||||
|
||||
## 设计理念
|
||||
|
||||
<div class="grid-demo">
|
||||
|
||||
@ -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';
|
||||
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
可预览的图片。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要展示图片时使用。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
通过鼠标或键盘，输入范围内的数值。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当需要获取标准数值时。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
通过鼠标或键盘输入内容，是最基础的表单域的包装。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 需要用户输入表单域内容时。
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
协助进行页面级整体布局。
|
||||
|
||||
## 设计规则
|
||||
|
||||
### 尺寸
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
通用列表。
|
||||
|
||||
## 何时使用
|
||||
|
||||
最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
提及组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
为页面和功能提供导航的菜单列表。
|
||||
|
||||
## 何时使用
|
||||
|
||||
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
全局展示操作反馈信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 可提供成功、警告和错误等反馈信息。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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` 在当前页面正中打开一个浮层，承载相应的操作。
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
全局展示通知提醒信息。
|
||||
|
||||
## 何时使用
|
||||
|
||||
在系统四个角显示通知提醒信息。经常用于以下情况：
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
---
|
||||
category: Components
|
||||
title: 组件总览
|
||||
showImport: false
|
||||
---
|
||||
|
||||
`antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation-cn)作为必要的补充，另外如果您是内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
采用分页的形式分隔长列表，每次只加载一个页面。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 当加载/渲染所有数据将花费很多时间时；
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
点击元素，弹出气泡式的确认框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
点击/鼠标移入元素，弹出气泡式的卡片浮层。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
展示操作的当前进度。
|
||||
|
||||
## 何时使用
|
||||
|
||||
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
|
||||
|
||||
@ -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`.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
:::info
|
||||
|
||||
@ -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` 版本开始提供该组件。
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
:::info
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
单选框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 用于在多个备选项中选中单个状态。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
评分组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 对评价进行展示。
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
用于反馈一系列操作任务的处理结果。
|
||||
|
||||
## 何时使用
|
||||
|
||||
当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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` 版本开始提供该组件。
|
||||
|
||||
## 何时使用
|
||||
|
||||
|
||||
@ -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 `<select>` element.
|
||||
|
||||
@ -1,16 +1,15 @@
|
||||
---
|
||||
category: Components
|
||||
subtitle: 选择器
|
||||
group: 数据录入
|
||||
title: Select
|
||||
subtitle: 选择器
|
||||
description: 下拉选择器。
|
||||
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
|
||||
---
|
||||
|
||||
下拉选择器。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user