mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 12:39:49 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

docs: unify component export file as index.tsx (#50013)

Browse Source 
* docs: unify component export file as index.tsx

* docs: compatible with old anchors

* chore: clean

* test: update snapshot

* fix: window env

---------

Co-authored-by: Peach <scdzwyxst@gmail.com>
This commit is contained in:
vagusX 2024-07-23 22:22:24 +08:00 committed by GitHub
parent f6e9f8540c
commit 38cf5e8a75
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
89 changed files with 176 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.dumi/theme/common/styles/Demo.tsx
View File

@ -357,9 +357,9 @@ const GlobalDemoStyles: React.FC = () => {
} }
${antCls}-row-rtl { ${antCls}-row-rtl {
#components-tooltip-demo-placement, #tooltip-demo-placement,
#components-popover-demo-placement, #popover-demo-placement,
#components-popconfirm-demo-placement { #popconfirm-demo-placement {
.code-box-demo { .code-box-demo {
direction: ltr; direction: ltr;
} }

6
.dumi/theme/common/styles/Markdown.tsx
View File

@ -389,7 +389,7 @@ const GlobalStyle: React.FC = () => {
} }
.grid-demo, .grid-demo,
[id^='components-grid-demo-'] { [id^='grid-demo-'] {
${antCls}-row > div, ${antCls}-row > div,
.code-box-demo ${antCls}-row > div { .code-box-demo ${antCls}-row > div {
min-height: 30px; min-height: 30px;
@ -467,8 +467,8 @@ const GlobalStyle: React.FC = () => {
} }
} }
[id='components-grid-demo-playground'], [id='grid-demo-playground'],
[id='components-grid-demo-gutter'] { [id='grid-demo-gutter'] {
> .code-box-demo ${antCls}-row > div { > .code-box-demo ${antCls}-row > div {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;

10
.dumi/theme/layouts/GlobalLayout.tsx
View File

@ -35,6 +35,16 @@ export const ANT_DESIGN_NOT_SHOW_BANNER = 'ANT_DESIGN_NOT_SHOW_BANNER';
// (global as any).styleCache = styleCache; // (global as any).styleCache = styleCache;
// } // }
// Compatible with old anchors
if (typeof window !== 'undefined') {
const hashId = location.hash.slice(1);
if (hashId.startsWith('components-')) {
if (!document.querySelector(`#${hashId}`)) {
location.hash = `#${hashId.replace(/^components-/, '')}`;
}
}
}
const getAlgorithm = (themes: ThemeName[] = []) => const getAlgorithm = (themes: ThemeName[] = []) =>
themes themes
.map((theme) => { .map((theme) => {

6
components/alert/design/behavior-pattern.tsx
View File

@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
{ {
id: '707000085', id: '707000085',
label: '了解提示内容', label: '了解提示内容',
link: 'components-alert-index-tab-design-demo-content', link: 'alert-index-tab-design-demo-content',
}, },
{ {
id: '707000086', id: '707000086',
label: '了解提示类型', label: '了解提示类型',
link: 'components-alert-index-tab-design-demo-type', link: 'alert-index-tab-design-demo-type',
}, },
], ],
}, },
@ -29,7 +29,7 @@ const BehaviorPattern: React.FC = () => (
id: '200000005', id: '200000005',
label: '针对提示进行操作', label: '针对提示进行操作',
targetType: 'extension', targetType: 'extension',
link: 'components-alert-index-tab-design-demo-action', link: 'alert-index-tab-design-demo-action',
}, },
], ],
}} }}

0
components/alert/index.ts → components/alert/index.tsx
View File

44
components/anchor/__tests__/Anchor.test.tsx
View File

@ -67,12 +67,12 @@ describe('Anchor Render', () => {
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Item Basic Demo', title: 'Item Basic Demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {
@ -101,8 +101,8 @@ describe('Anchor Render', () => {
const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) => const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) =>
(n as HTMLElement).querySelector('.ant-anchor-link-title'), (n as HTMLElement).querySelector('.ant-anchor-link-title'),
); );
expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic'); expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic');
expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static'); expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static');
expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api'); expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api');
expect( expect(
( (
@ -127,12 +127,12 @@ describe('Anchor Render', () => {
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Item Basic Demo', title: 'Item Basic Demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {
@ -147,8 +147,8 @@ describe('Anchor Render', () => {
const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) => const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) =>
(n as HTMLElement).querySelector('.ant-anchor-link-title'), (n as HTMLElement).querySelector('.ant-anchor-link-title'),
); );
expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic'); expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic');
expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static'); expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static');
expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api'); expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api');
expect(asFragment().firstChild).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
}); });
@ -159,7 +159,7 @@ describe('Anchor Render', () => {
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Item Basic Demo', title: 'Item Basic Demo',
}, },
]} ]}
@ -170,7 +170,7 @@ describe('Anchor Render', () => {
expect(container.querySelectorAll('.ant-anchor .ant-anchor-link').length).toBe(1); expect(container.querySelectorAll('.ant-anchor .ant-anchor-link').length).toBe(1);
expect( expect(
(container.querySelector('.ant-anchor .ant-anchor-link-title') as HTMLAnchorElement).href, (container.querySelector('.ant-anchor .ant-anchor-link-title') as HTMLAnchorElement).href,
).toContain('#components-anchor-demo-basic'); ).toContain('#anchor-demo-basic');
expect(asFragment().firstChild).toMatchSnapshot(); expect(asFragment().firstChild).toMatchSnapshot();
}); });
@ -694,12 +694,12 @@ describe('Anchor Render', () => {
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Item Basic Demo', title: 'Item Basic Demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {
@ -725,12 +725,12 @@ describe('Anchor Render', () => {
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Item Basic Demo', title: 'Item Basic Demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {
@ -759,8 +759,8 @@ describe('Anchor Render', () => {
it('nested children via jsx should be filtered out when direction is horizontal', () => { it('nested children via jsx should be filtered out when direction is horizontal', () => {
const { container } = render( const { container } = render(
<Anchor direction="horizontal"> <Anchor direction="horizontal">
<Link href="#components-anchor-demo-basic" title="Basic demo" /> <Link href="#anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" /> <Link href="#anchor-demo-static" title="Static demo" />
<Link href="#api" title="API"> <Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" /> <Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" /> <Link href="#link-props" title="Link Props" />
@ -904,12 +904,12 @@ describe('Anchor Render', () => {
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Item Basic Demo', title: 'Item Basic Demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {
@ -935,8 +935,8 @@ describe('Anchor Render', () => {
it('deprecated jsx style', () => { it('deprecated jsx style', () => {
render( render(
<Anchor direction="horizontal"> <Anchor direction="horizontal">
<Link href="#components-anchor-demo-basic" title="Basic demo" /> <Link href="#anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" /> <Link href="#anchor-demo-static" title="Static demo" />
</Anchor>, </Anchor>,
); );
expect(errSpy).toHaveBeenCalledWith( expect(errSpy).toHaveBeenCalledWith(
@ -947,8 +947,8 @@ describe('Anchor Render', () => {
it('deprecated jsx style for direction#vertical', () => { it('deprecated jsx style for direction#vertical', () => {
render( render(
<Anchor> <Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" /> <Link href="#anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" /> <Link href="#anchor-demo-static" title="Static demo" />
</Anchor>, </Anchor>,
); );
expect(errSpy).toHaveBeenCalledWith( expect(errSpy).toHaveBeenCalledWith(

10
components/anchor/__tests__/__snapshots__/Anchor.test.tsx.snap
View File

@ -20,7 +20,7 @@ exports[`Anchor Render render items and ignore jsx children 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Item Basic Demo" title="Item Basic Demo"
> >
Item Basic Demo Item Basic Demo
@ -52,7 +52,7 @@ exports[`Anchor Render renders items correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Item Basic Demo" title="Item Basic Demo"
> >
Item Basic Demo Item Basic Demo
@ -63,7 +63,7 @@ exports[`Anchor Render renders items correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -128,7 +128,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Item Basic Demo" title="Item Basic Demo"
> >
Item Basic Demo Item Basic Demo
@ -139,7 +139,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo

20
components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -179,7 +179,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -190,7 +190,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co
> >
<a <a
class="ant-anchor-link-title ant-anchor-link-title-active" class="ant-anchor-link-title ant-anchor-link-title-active"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -328,7 +328,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -339,7 +339,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -404,7 +404,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -415,7 +415,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -476,7 +476,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`]
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -487,7 +487,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`]
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -629,7 +629,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`]
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -640,7 +640,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`]
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo

20
components/anchor/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -172,7 +172,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -183,7 +183,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -316,7 +316,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -327,7 +327,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -386,7 +386,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -397,7 +397,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -456,7 +456,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -467,7 +467,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo
@ -604,7 +604,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo" title="Basic demo"
> >
Basic demo Basic demo
@ -615,7 +615,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
> >
<a <a
class="ant-anchor-link-title" class="ant-anchor-link-title"
href="#components-anchor-demo-static" href="#anchor-demo-static"
title="Static demo" title="Static demo"
> >
Static demo Static demo

6
components/anchor/demo/customizeHighlight.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { Anchor } from 'antd'; import { Anchor } from 'antd';
const getCurrentAnchor = () => '#components-anchor-demo-static'; const getCurrentAnchor = () => '#anchor-demo-static';
const App: React.FC = () => ( const App: React.FC = () => (
<Anchor <Anchor
@ -10,12 +10,12 @@ const App: React.FC = () => (
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Basic demo', title: 'Basic demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {

4
components/anchor/demo/legacy-anchor.tsx
View File

@ -5,8 +5,8 @@ const { Link } = Anchor;
const App: React.FC = () => ( const App: React.FC = () => (
<Anchor affix={false}> <Anchor affix={false}>
<Link href="#components-anchor-demo-basic" title="Basic demo" /> <Link href="#anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" /> <Link href="#anchor-demo-static" title="Static demo" />
<Link href="#api" title="API"> <Link href="#api" title="API">
<Link href="#anchor-props" title="Anchor Props" /> <Link href="#anchor-props" title="Anchor Props" />
<Link href="#link-props" title="Link Props" /> <Link href="#link-props" title="Link Props" />

4
components/anchor/demo/onChange.tsx
View File

@ -12,12 +12,12 @@ const App: React.FC = () => (
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Basic demo', title: 'Basic demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {

4
components/anchor/demo/onClick.tsx
View File

@ -19,12 +19,12 @@ const App: React.FC = () => (
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Basic demo', title: 'Basic demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {

4
components/anchor/demo/static.tsx
View File

@ -7,12 +7,12 @@ const App: React.FC = () => (
items={[ items={[
{ {
key: '1', key: '1',
href: '#components-anchor-demo-basic', href: '#anchor-demo-basic',
title: 'Basic demo', title: 'Basic demo',
}, },
{ {
key: '2', key: '2',
href: '#components-anchor-demo-static', href: '#anchor-demo-static',
title: 'Static demo', title: 'Static demo',
}, },
{ {

2
components/anchor/index.en-US.md
View File

@ -46,7 +46,7 @@ Common props ref：[Common props](/docs/react/common-props)
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | | | getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | | | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| showInkInFixed | Whether show ink-square when `affix={false}` | boolean | false | | | showInkInFixed | Whether show ink-square when `affix={false}` | boolean | false | |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetoffset) | number | - | | | targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#anchor-demo-targetoffset) | number | - | |
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | | | onChange | Listening for anchor link change | (currentActiveLink: string) => void | | |
| onClick | Set the handler to handle `click` event | (e: MouseEvent, link: object) => void | - | | | onClick | Set the handler to handle `click` event | (e: MouseEvent, link: object) => void | - | |
| items | Data configuration option content, support nesting through children | { key, href, title, target, children }\[] [see](#anchoritem) | - | 5.1.0 | | items | Data configuration option content, support nesting through children | { key, href, title, target, children }\[] [see](#anchoritem) | - | 5.1.0 |

0
components/anchor/index.ts → components/anchor/index.tsx
View File

2
components/anchor/index.zh-CN.md
View File

@ -47,7 +47,7 @@ group:
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | | | getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| showInkInFixed | `affix={false}` 时是否显示小方块 | boolean | false | | | showInkInFixed | `affix={false}` 时是否显示小方块 | boolean | false | |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetoffset) | number | - | | | targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#anchor-demo-targetoffset) | number | - | |
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | | | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
| onClick | `click` 事件的 handler | (e: MouseEvent, link: object) => void | - | | | onClick | `click` 事件的 handler | (e: MouseEvent, link: object) => void | - | |
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }\[] [具体见](#anchoritem) | - | 5.1.0 | | items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }\[] [具体见](#anchoritem) | - | 5.1.0 |

0
components/avatar/index.ts → components/avatar/index.tsx
View File

8
components/breadcrumb/design/behavior-pattern.tsx
View File

@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
{ {
id: '707000085', id: '707000085',
label: '了解当前页面的位置', label: '了解当前页面的位置',
link: 'components-breadcrumb-index-tab-design-demo-basic', link: 'breadcrumb-index-tab-design-demo-basic',
}, },
{ {
id: '707000086', id: '707000086',
label: '了解系统层级结构', label: '了解系统层级结构',
link: 'components-breadcrumb-index-tab-design-demo-basic', link: 'breadcrumb-index-tab-design-demo-basic',
}, },
], ],
}, },
@ -29,13 +29,13 @@ const BehaviorPattern: React.FC = () => (
id: '200000005', id: '200000005',
label: '向上导航', label: '向上导航',
targetType: 'mvp', targetType: 'mvp',
link: 'components-breadcrumb-index-tab-design-demo-basic', link: 'breadcrumb-index-tab-design-demo-basic',
}, },
{ {
id: '200000006', id: '200000006',
label: '快捷导航', label: '快捷导航',
targetType: 'extension', targetType: 'extension',
link: 'components-breadcrumb-index-tab-design-demo-overlay', link: 'breadcrumb-index-tab-design-demo-overlay',
}, },
], ],
}} }}

0
components/breadcrumb/index.ts → components/breadcrumb/index.tsx
View File

4
components/button/demo/multiple.md
View File

@ -1,7 +1,7 @@
## zh-CN ## zh-CN
按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#components-dropdown-demo-dropdown-button) 中组合使用。 按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown-cn/#dropdown-demo-dropdown-button) 中组合使用。
## en-US ## en-US
If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button). If you need several buttons, we recommend that you use 1 primary button + n secondary buttons. If there are more than three operations, you can group some of them into a [Dropdown.Button](/components/dropdown/#dropdown-demo-dropdown-button).

0
components/button/index.ts → components/button/index.tsx
View File

0
components/calendar/index.ts → components/calendar/index.tsx
View File

0
components/card/index.ts → components/card/index.tsx
View File

0
components/checkbox/index.ts → components/checkbox/index.tsx
View File

0
components/col/index.ts → components/col/index.tsx
View File

2
components/collapse/demo/collapsible.md
View File

@ -7,7 +7,7 @@
Specify the trigger area of collapsible by `collapsible`. Specify the trigger area of collapsible by `collapsible`.
<style> <style>
#components-collapse-demo-collapsible .ant-space { #collapse-demo-collapsible .ant-space {
width: 100%; width: 100%;
} }
</style> </style>

2
components/collapse/index.en-US.md
View File

@ -79,7 +79,7 @@ Common props ref：[Common props](/docs/react/common-props)
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| accordion | If true, Collapse renders as Accordion | boolean | false | | | accordion | If true, Collapse renders as Accordion | boolean | false | |
| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In [accordion mode](#components-collapse-demo-accordion), it's the key of the first panel | | | activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In [accordion mode](#collapse-demo-accordion), it's the key of the first panel | |
| bordered | Toggles rendering of the border around the collapse block | boolean | true | | | bordered | Toggles rendering of the border around the collapse block | boolean | true | |
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 | | collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - | 4.9.0 |
| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - | | | defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - | |

0
components/collapse/index.ts → components/collapse/index.tsx
View File

2
components/collapse/index.zh-CN.md
View File

@ -80,7 +80,7 @@ const items: CollapseProps['items'] = [
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| accordion | 手风琴模式 | boolean | false | | | accordion | 手风琴模式 | boolean | false | |
| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | [手风琴模式](#components-collapse-demo-accordion)下默认第一个元素 | | | activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | [手风琴模式](#collapse-demo-accordion)下默认第一个元素 | |
| bordered | 带边框风格的折叠面板 | boolean | true | | | bordered | 带边框风格的折叠面板 | boolean | true | |
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 | | collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | | | defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |

0
components/color-picker/index.ts → components/color-picker/index.tsx
View File

2
components/config-provider/index.en-US.md
View File

@ -55,7 +55,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
| componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 | | componentDisabled | Config antd component `disabled` | boolean | - | 4.21.0 |
| componentSize | Config antd component size | `small` \| `middle` \| `large` | - | | | componentSize | Config antd component size | `small` \| `middle` \| `large` | - | |
| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | | | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | |
| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | | direction | Set direction of layout. See [demo](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
| getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | | | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | |
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 | | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
| iconPrefixCls | Set icon prefix className | string | `anticon` | 4.11.0 | | iconPrefixCls | Set icon prefix className | string | `anticon` | 4.11.0 |

2
components/config-provider/index.zh-CN.md
View File

@ -56,7 +56,7 @@ export default Demo;
| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 | | componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | | | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | |
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | | | csp | 设置 [Content Security Policy](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | | direction | 设置文本展示方向。 [示例](#config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | | | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | |
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 | | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
| iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 | | iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |

30
components/date-picker/design/behavior-pattern.tsx
View File

@ -16,32 +16,32 @@ const BehaviorPattern: React.FC = () => (
{ {
id: '707000085', id: '707000085',
label: '选择某天', label: '选择某天',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date', link: 'date-picker-index-tab-design-zh-cn-demo-pick-date',
}, },
{ {
id: '707000086', id: '707000086',
label: '选择某周', label: '选择某周',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week', link: 'date-picker-index-tab-design-zh-cn-demo-pick-week',
}, },
{ {
id: '707000087', id: '707000087',
label: '选择某月', label: '选择某月',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month', link: 'date-picker-index-tab-design-zh-cn-demo-pick-month',
}, },
{ {
id: '707000088', id: '707000088',
label: '选择某季度', label: '选择某季度',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter', link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter',
}, },
{ {
id: '707000089', id: '707000089',
label: '选择某年', label: '选择某年',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year', link: 'date-picker-index-tab-design-zh-cn-demo-pick-year',
}, },
{ {
id: '707000090', id: '707000090',
label: '选择某时间', label: '选择某时间',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time', link: 'date-picker-index-tab-design-zh-cn-demo-pick-time',
}, },
], ],
}, },
@ -53,32 +53,32 @@ const BehaviorPattern: React.FC = () => (
{ {
id: '7070000851', id: '7070000851',
label: '选择某天至某天', label: '选择某天至某天',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date-range', link: 'date-picker-index-tab-design-zh-cn-demo-pick-date-range',
}, },
{ {
id: '7070000861', id: '7070000861',
label: '选择某周至某周', label: '选择某周至某周',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week-range', link: 'date-picker-index-tab-design-zh-cn-demo-pick-week-range',
}, },
{ {
id: '7070000871', id: '7070000871',
label: '选择某月至某月', label: '选择某月至某月',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month-range', link: 'date-picker-index-tab-design-zh-cn-demo-pick-month-range',
}, },
{ {
id: '7070000881', id: '7070000881',
label: '选择某季度至某季度', label: '选择某季度至某季度',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter-range', link: 'date-picker-index-tab-design-zh-cn-demo-pick-quarter-range',
}, },
{ {
id: '7070000891', id: '7070000891',
label: '选择某年至某年', label: '选择某年至某年',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year-range', link: 'date-picker-index-tab-design-zh-cn-demo-pick-year-range',
}, },
{ {
id: '7070000901', id: '7070000901',
label: '选择某时间至某时间', label: '选择某时间至某时间',
link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time-range', link: 'date-picker-index-tab-design-zh-cn-demo-pick-time-range',
}, },
], ],
}, },
@ -90,12 +90,12 @@ const BehaviorPattern: React.FC = () => (
{ {
id: '70700008912', id: '70700008912',
label: '快捷选择时间点', label: '快捷选择时间点',
link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-time', link: 'date-picker-index-tab-design-zh-cn-demo-preset-time',
}, },
{ {
id: '70700009012', id: '70700009012',
label: '快捷选择时间段', label: '快捷选择时间段',
link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-range', link: 'date-picker-index-tab-design-zh-cn-demo-preset-range',
}, },
], ],
}, },
@ -103,7 +103,7 @@ const BehaviorPattern: React.FC = () => (
id: '200000007', id: '200000007',
label: '查看日期附属信息', label: '查看日期附属信息',
targetType: 'extension', targetType: 'extension',
link: 'components-date-picker-index-tab-design-zh-cn-demo-date-extra-info', link: 'date-picker-index-tab-design-zh-cn-demo-date-extra-info',
}, },
], ],
}} }}

6
components/date-picker/index.en-US.md
View File

@ -99,7 +99,7 @@ The following APIs are shared by DatePicker, RangePicker.
| components | Custom panels | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 | | components | Custom panels | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
| disabled | Determine whether the DatePicker is disabled | boolean | false | | | disabled | Determine whether the DatePicker is disabled | boolean | false | |
| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs }) => boolean | - | `info`: 5.14.0 | | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs, info: { from?: dayjs }) => boolean | - | `info`: 5.14.0 |
| format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | | | format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | |
| order | Auto order date when multiple or range selection | boolean | true | 5.14.0 | | order | Auto order date when multiple or range selection | boolean | true | 5.14.0 |
| popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 | | popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 |
| preserveInvalidOnBlur | Not clean input on blur even when the typing is invalidate | boolean | false | 5.14.0 | | preserveInvalidOnBlur | Not clean input on blur even when the typing is invalidate | boolean | false | 5.14.0 |
@ -149,7 +149,7 @@ The following APIs are shared by DatePicker, RangePicker.
| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |
| showNow | Show the fast access of current datetime | boolean | - | 4.4.0 | | showNow | Show the fast access of current datetime | boolean | - | 4.4.0 |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | | | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | |
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | | showTime.defaultValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
| showWeek | Show week info when in DatePicker | boolean | false | 5.14.0 | | showWeek | Show week info when in DatePicker | boolean | false | 5.14.0 |
| value | To set date | [dayjs](https://day.js.org/) | - | | | value | To set date | [dayjs](https://day.js.org/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | | | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - | |
@ -220,7 +220,7 @@ Added in `4.1.0`.
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` | | | separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` | |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | | | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) | |
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | | showTime.defaultValue | To set default time of selected date, [demo](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
| value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | | | value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | | onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | | | onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | |

0
components/date-picker/index.ts → components/date-picker/index.tsx
View File

6
components/date-picker/index.zh-CN.md
View File

@ -100,7 +100,7 @@ dayjs.locale('zh-cn');
| components | 自定义面板 | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 | | components | 自定义面板 | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
| disabled | 禁用 | boolean | false | | | disabled | 禁用 | boolean | false | |
| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs }) => boolean | - | `info`: 5.14.0 | | disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs }) => boolean | - | `info`: 5.14.0 |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | | | format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) | |
| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 | | order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 | | preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
| popupClassName | 额外的弹出日历 className | string | - | 4.23.0 | | popupClassName | 额外的弹出日历 className | string | - | 4.23.0 |
@ -150,7 +150,7 @@ dayjs.locale('zh-cn');
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
| showNow | 显示当前日期时间的快捷选择 | boolean | - | | | showNow | 显示当前日期时间的快捷选择 | boolean | - | |
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker-cn#api) | | | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker-cn#api) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | | | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() | |
| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 | | showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
| value | 日期 | [dayjs](https://day.js.org/) | - | | | value | 日期 | [dayjs](https://day.js.org/) | - | |
| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | | | onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | |
@ -221,7 +221,7 @@ dayjs.locale('zh-cn');
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` | | | separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` | |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn#api) | | | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker-cn#api) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | | | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] | |
| value | 日期 | [dayjs](https://day.js.org/)\[] | - | | | value | 日期 | [dayjs](https://day.js.org/)\[] | - | |
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | | onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
| onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | | | onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | |

0
components/dropdown/index.ts → components/dropdown/index.tsx
View File

0
components/float-button/index.ts → components/float-button/index.tsx
View File

18
components/form/index.en-US.md
View File

@ -69,7 +69,7 @@ Common props ref：[Common props](/docs/react/common-props)
| colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | | | colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | |
| disabled | Set form component disable, only available for antd components | boolean | false | 4.21.0 | | disabled | Set form component disable, only available for antd components | boolean | false | 4.21.0 |
| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | | | component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | |
| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - | | | fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#form-demo-global-state) | [FieldData](#fielddata)\[] | - | |
| form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#forminstance) | - | | | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#forminstance) | - | |
| feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | [FeedbackIcons](#feedbackicons) | - | 5.9.0 | | feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | [FeedbackIcons](#feedbackicons) | - | 5.9.0 |
| initialValues | Set value by Form initialization or reset | object | - | | | initialValues | Set value by Form initialization or reset | object | - | |
@ -143,10 +143,10 @@ Form field component for data bidirectional binding, validation, layout, and so
| noStyle | No style for `true`, used as a pure field control. Will inherit parent Form.Item `validateStatus` if self `validateStatus` not configured | boolean | false | | | noStyle | No style for `true`, used as a pure field control. Will inherit parent Form.Item `validateStatus` if self `validateStatus` not configured | boolean | false | |
| preserve | Keep field value even when field removed | boolean | true | 4.4.0 | | preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
| required | Display required style. It will be generated by the validation rule | boolean | false | | | required | Display required style. It will be generated by the validation rule | boolean | false | |
| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#rule)\[] | - | | | rules | Rules for field validation. Click [here](#form-demo-basic) to see an example | [Rule](#rule)\[] | - | |
| shouldUpdate | Custom field update logic. See [below](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false | | | shouldUpdate | Custom field update logic. See [below](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false | |
| tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#api) | - | 4.7.0 | | tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#api) | - | 4.7.0 |
| trigger | When to collect the value of children node. Click [here](#components-form-demo-customized-form-controls) to see an example | string | `onChange` | | | trigger | When to collect the value of children node. Click [here](#form-demo-customized-form-controls) to see an example | string | `onChange` | |
| validateDebounce | Delay milliseconds to start validation | number | - | 5.9.0 | | validateDebounce | Delay milliseconds to start validation | number | - | 5.9.0 |
| validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured | boolean \| `parallel` | false | `parallel`: 4.5.0 |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | |
@ -163,7 +163,7 @@ After wrapped by `Form.Item` with `name` property, `value`(or other property def
### dependencies ### dependencies
Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#components-form-demo-dependencies). Used when there are dependencies between fields. If a field has the `dependencies` prop, this field will automatically trigger updates and validations when upstream is updated. A common scenario is a user registration form with "password" and "confirm password" fields. The "Confirm Password" validation depends on the "Password" field. After setting `dependencies`, the "Password" field update will re-trigger the validation of "Check Password". You can refer [examples](#form-demo-dependencies).
`dependencies` shouldn't be used together with `shouldUpdate`, since it may result in conflicting update logic. `dependencies` shouldn't be used together with `shouldUpdate`, since it may result in conflicting update logic.
@ -187,7 +187,7 @@ related issue: [#34500](https://github.com/ant-design/ant-design/issues/34500)
</Form.Item> </Form.Item>
``` ```
You can ref [example](#components-form-demo-horizontal-login) to see detail. You can ref [example](#form-demo-horizontal-login) to see detail.
When `shouldUpdate` is a function, it will be called by form values update. Providing original values and current value to compare. This is very helpful for rendering additional fields based on values: When `shouldUpdate` is a function, it will be called by form values update. Providing original values and current value to compare. This is very helpful for rendering additional fields based on values:
@ -203,7 +203,7 @@ When `shouldUpdate` is a function, it will be called by form values update. Prov
</Form.Item> </Form.Item>
``` ```
You can ref [example](#components-form-demo-control-hooks) to see detail. You can ref [example](#form-demo-control-hooks) to see detail.
### messageVariables ### messageVariables
@ -267,7 +267,7 @@ Some operator functions in render form of Form.List.
## Form.ErrorList ## Form.ErrorList
New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#components-form-demo-dynamic-form-item). New in 4.7.0. Show error messages, should only work with `rules` of Form.List. See [example](#form-demo-dynamic-form-item).
| Property | Description | Type | Default | | Property | Description | Type | Default |
| -------- | ----------- | ------------ | ------- | | -------- | ----------- | ------------ | ------- |
@ -275,7 +275,7 @@ New in 4.7.0. Show error messages, should only work with `rules` of Form.List. S
## Form.Provider ## Form.Provider
Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#components-form-demo-form-context). Provide linkage between forms. If a sub form with `name` prop update, it will auto trigger Provider related events. See [example](#form-demo-form-context).
| Property | Description | Type | Default | | Property | Description | Type | Default |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -546,7 +546,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| transform | Transform value to the rule before validation | (value) => any | | | transform | Transform value to the rule before validation | (value) => any | |
| type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/react-component/async-validator#type) | string | | | type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/react-component/async-validator#type) | string | |
| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string\[] | | | validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string\[] | |
| validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#rule), value) => Promise | | | validator | Customize validation rule. Accept Promise as return. See [example](#form-demo-register) | ([rule](#rule), value) => Promise | |
| warningOnly | Warning only. Not block form submit | boolean | 4.17.0 | | warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
| whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean | | | whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean | |

0
components/form/index.ts → components/form/index.tsx
View File

18
components/form/index.zh-CN.md
View File

@ -70,7 +70,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
| colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true | | | colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true | |
| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 | | disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
| component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form | | | component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form | |
| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - | | | fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#form-demo-global-state) | [FieldData](#fielddata)\[] | - | |
| form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#forminstance) | - | | | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#forminstance) | - | |
| feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | [FeedbackIcons](#feedbackicons) | - | 5.9.0 | | feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | [FeedbackIcons](#feedbackicons) | - | 5.9.0 |
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | | | initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |
@ -144,10 +144,10 @@ const validateMessages = {
| noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | | | noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | |
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | | | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | |
| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#rule)\[] | - | | | rules | 校验规则，设置字段的校验逻辑。点击[此处](#form-demo-basic)查看示例 | [Rule](#rule)\[] | - | |
| shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false | | | shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false | |
| tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip-cn#api) | - | 4.7.0 | | tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip-cn#api) | - | 4.7.0 |
| trigger | 设置收集字段值变更的时机。点击[此处](#components-form-demo-customized-form-controls)查看示例 | string | `onChange` | | | trigger | 设置收集字段值变更的时机。点击[此处](#form-demo-customized-form-controls)查看示例 | string | `onChange` | |
| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 |
| validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 | | validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | |
@ -164,7 +164,7 @@ const validateMessages = {
### dependencies ### dependencies
当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#components-form-demo-dependencies)。 当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
`dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。 `dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
@ -188,7 +188,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
</Form.Item> </Form.Item>
``` ```
你可以参考[示例](#components-form-demo-horizontal-login)查看具体使用场景。 你可以参考[示例](#form-demo-horizontal-login)查看具体使用场景。
当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助： 当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：
@ -204,7 +204,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
</Form.Item> </Form.Item>
``` ```
你可以参考[示例](#components-form-demo-control-hooks)查看具体使用场景。 你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
### messageVariables ### messageVariables
@ -266,7 +266,7 @@ Form.List 渲染表单相关操作函数。
## Form.ErrorList ## Form.ErrorList
4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#components-form-demo-dynamic-form-item)。 4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ------ | -------- | ------------ | ------ | | ------ | -------- | ------------ | ------ |
@ -274,7 +274,7 @@ Form.List 渲染表单相关操作函数。
## Form.Provider ## Form.Provider
提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#components-form-demo-form-context)。 提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#form-demo-form-context)。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- | | --- | --- | --- | --- |
@ -545,7 +545,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| transform | 将字段值转换成目标值后进行校验 | (value) => any | | | transform | 将字段值转换成目标值后进行校验 | (value) => any | |
| type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/react-component/async-validator#type) | string | | | type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/react-component/async-validator#type) | string | |
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string\[] | | | validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string\[] | |
| validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#rule), value) => Promise | | | validator | 自定义校验，接收 Promise 作为返回值。[示例](#form-demo-register)参考 | ([rule](#rule), value) => Promise | |
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 | | warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
| whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean | | | whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean | |

2
components/grid/demo/flex-align.md
View File

@ -7,7 +7,7 @@
Child elements vertically aligned. Child elements vertically aligned.
```css ```css
#components-grid-demo-flex-align [class~='ant-row'] { #grid-demo-flex-align [class~='ant-row'] {
background: rgba(128, 128, 128, 0.08); background: rgba(128, 128, 128, 0.08);
} }
``` ```

2
components/grid/demo/flex-order.md
View File

@ -7,7 +7,7 @@
To change the element sort by `order`. To change the element sort by `order`.
```css ```css
#components-grid-demo-flex-order [class~='ant-row'] { #grid-demo-flex-order [class~='ant-row'] {
background: rgba(128, 128, 128, 0.08); background: rgba(128, 128, 128, 0.08);
} }
``` ```

2
components/grid/demo/flex.md
View File

@ -9,7 +9,7 @@
Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode. Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
```css ```css
#components-grid-demo-flex [class~='ant-row'] { #grid-demo-flex [class~='ant-row'] {
background: rgba(128, 128, 128, 0.08); background: rgba(128, 128, 128, 0.08);
} }
``` ```

10
components/grid/demo/playground.md
View File

@ -7,27 +7,27 @@
A simple playground for column count and gutter. A simple playground for column count and gutter.
```css ```css
#components-grid-demo-playground [class~='ant-col'] { #grid-demo-playground [class~='ant-col'] {
background: transparent; background: transparent;
border: 0; border: 0;
} }
#components-grid-demo-playground [class~='ant-col'] > div { #grid-demo-playground [class~='ant-col'] > div {
height: 120px; height: 120px;
font-size: 14px; font-size: 14px;
line-height: 120px; line-height: 120px;
background: #0092ff; background: #0092ff;
border-radius: 4px; border-radius: 4px;
} }
#components-grid-demo-playground pre { #grid-demo-playground pre {
padding: 8px 16px; padding: 8px 16px;
font-size: 14px; font-size: 14px;
background: #f9f9f9; background: #f9f9f9;
border-radius: 6px; border-radius: 6px;
} }
#components-grid-demo-playground pre.demo-code { #grid-demo-playground pre.demo-code {
direction: ltr; direction: ltr;
} }
#components-grid-demo-playground .ant-col { #grid-demo-playground .ant-col {
padding: 0; padding: 0;
} }
``` ```

0
components/grid/index.ts → components/grid/index.tsx
View File

0
components/icon/index.ts → components/icon/index.tsx
View File

0
components/input/index.ts → components/input/index.tsx
View File

2
components/input/style/index.ts
View File

@ -657,7 +657,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
}, },
// fix slight height diff in Firefox: // fix slight height diff in Firefox:
// https://ant.design/components/auto-complete-cn/#components-auto-complete-demo-certain-category // https://ant.design/components/auto-complete-cn/#auto-complete-demo-certain-category
[`${componentCls}-lg`]: { [`${componentCls}-lg`]: {
lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal(), lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal(),
}, },

0
components/layout/index.ts → components/layout/index.tsx
View File

4
components/menu/demo/inline-collapsed.md
View File

@ -2,10 +2,10 @@
内嵌菜单可以被缩起/展开。 内嵌菜单可以被缩起/展开。
你可以在 [Layout](/components/layout-cn/#components-layout-demo-side) 里查看侧边布局结合的完整示例。 你可以在 [Layout](/components/layout-cn/#layout-demo-side) 里查看侧边布局结合的完整示例。
## en-US ## en-US
Inline menu could be collapsed. Inline menu could be collapsed.
Here is [a complete demo](/components/layout/#components-layout-demo-side) with sider layout. Here is [a complete demo](/components/layout/#layout-demo-side) with sider layout.

6
components/modal/demo/dark.tsx
View File

@ -455,10 +455,10 @@ export default () => {
style={{ marginTop: 16 }} style={{ marginTop: 16 }}
/> />
<Anchor> <Anchor>
<Link href="#components-anchor-demo-basic" title="Basic demo" /> <Link href="#anchor-demo-basic" title="Basic demo" />
<Link href="#components-anchor-demo-static" title="Static demo" /> <Link href="#anchor-demo-static" title="Static demo" />
<Link <Link
href="#components-anchor-demo-basic" href="#anchor-demo-basic"
title="Basic demo with Target" title="Basic demo with Target"
target="_blank" target="_blank"
/> />

0
components/modal/index.ts → components/modal/index.tsx
View File

2
components/pagination/demo/mini.md
View File

@ -7,7 +7,7 @@
Mini size pagination. Mini size pagination.
<style> <style>
#components-pagination-demo-mini .ant-pagination:not(:last-child) { #pagination-demo-mini .ant-pagination:not(:last-child) {
margin-bottom: 24px; margin-bottom: 24px;
} }
</style> </style>

6
components/pagination/design/behavior-pattern.tsx
View File

@ -17,19 +17,19 @@ const BehaviorPattern: React.FC = () => (
id: '200000005', id: '200000005',
label: '调整单页展示条数', label: '调整单页展示条数',
targetType: 'extension', targetType: 'extension',
link: 'components-pagination-index-tab-design-demo-page-size', link: 'pagination-index-tab-design-demo-page-size',
}, },
{ {
id: '200000006', id: '200000006',
label: '快速跳转', label: '快速跳转',
targetType: 'extension', targetType: 'extension',
link: 'components-pagination-index-tab-design-demo-quick-jump', link: 'pagination-index-tab-design-demo-quick-jump',
}, },
{ {
id: '200000007', id: '200000007',
label: '了解数据总量', label: '了解数据总量',
targetType: 'extension', targetType: 'extension',
link: 'components-pagination-index-tab-design-demo-total', link: 'pagination-index-tab-design-demo-total',
}, },
], ],
}} }}

0
components/pagination/index.ts → components/pagination/index.tsx
View File

4
components/popconfirm/demo/placement.md
View File

@ -7,7 +7,7 @@
There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }` if you want the arrow to point at the center of target. There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }` if you want the arrow to point at the center of target.
<style> <style>
#components-popconfirm-demo-placement .ant-btn { #popconfirm-demo-placement .ant-btn {
margin-left: 0; margin-left: 0;
margin-right: 8px; margin-right: 8px;
margin-bottom: 8px; margin-bottom: 8px;
@ -15,7 +15,7 @@ There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }`
text-align: center; text-align: center;
padding: 0; padding: 0;
} }
#components-popconfirm-demo-placement .ant-btn-rtl { #popconfirm-demo-placement .ant-btn-rtl {
margin-left: 8px; margin-left: 8px;
margin-right: 0; margin-right: 0;
} }

6
components/progress/design/behavior-pattern.tsx
View File

@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
{ {
id: '707000085', id: '707000085',
label: '了解任务进度', label: '了解任务进度',
link: 'components-progress-index-tab-design-demo-progress', link: 'progress-index-tab-design-demo-progress',
}, },
{ {
id: '707000086', id: '707000086',
label: '了解任务状态', label: '了解任务状态',
link: 'components-progress-index-tab-design-demo-status', link: 'progress-index-tab-design-demo-status',
}, },
], ],
}, },
@ -29,7 +29,7 @@ const BehaviorPattern: React.FC = () => (
id: '200000005', id: '200000005',
label: '查看进度相关描述', label: '查看进度相关描述',
targetType: 'extension', targetType: 'extension',
link: 'components-progress-index-tab-design-demo-info', link: 'progress-index-tab-design-demo-info',
}, },
], ],
}} }}

0
components/progress/index.ts → components/progress/index.tsx
View File

0
components/qrcode/index.ts → components/qrcode/index.tsx
View File

0
components/radio/index.ts → components/radio/index.tsx
View File

0
components/row/index.ts → components/row/index.tsx
View File

4
components/slider/demo/mark.md
View File

@ -7,10 +7,10 @@
Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb. When `included` is false, means that different thumbs are coordinative. when `step` is null, users can only slide the thumbs onto marks. Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb. When `included` is false, means that different thumbs are coordinative. when `step` is null, users can only slide the thumbs onto marks.
<style> <style>
#components-slider-demo-mark h4 { #slider-demo-mark h4 {
margin: 0 0 16px; margin: 0 0 16px;
} }
#components-slider-demo-mark .ant-slider-with-marks { #slider-demo-mark .ant-slider-with-marks {
margin-bottom: 44px; margin-bottom: 44px;
} }
</style> </style>

0
components/statistic/index.ts → components/statistic/index.tsx
View File

0
components/style/index.ts → components/style/index.tsx
View File

6
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -867,7 +867,7 @@ exports[`renders components/table/demo/colspan-rowspan.tsx extend context correc
exports[`renders components/table/demo/component-token.tsx extend context correctly 1`] = ` exports[`renders components/table/demo/component-token.tsx extend context correctly 1`] = `
Array [ Array [
<form <form
class="ant-form ant-form-inline components-table-demo-control-bar" class="ant-form ant-form-inline table-demo-control-bar"
style="margin-bottom: 16px;" style="margin-bottom: 16px;"
> >
<div <div
@ -4996,7 +4996,7 @@ exports[`renders components/table/demo/drag-sorting-handler.tsx extend context c
exports[`renders components/table/demo/dynamic-settings.tsx extend context correctly 1`] = ` exports[`renders components/table/demo/dynamic-settings.tsx extend context correctly 1`] = `
Array [ Array [
<form <form
class="ant-form ant-form-inline components-table-demo-control-bar" class="ant-form ant-form-inline table-demo-control-bar"
style="margin-bottom: 16px;" style="margin-bottom: 16px;"
> >
<div <div
@ -18923,7 +18923,7 @@ exports[`renders components/table/demo/narrow.tsx extend context correctly 2`] =
exports[`renders components/table/demo/nest-table-border-debug.tsx extend context correctly 1`] = ` exports[`renders components/table/demo/nest-table-border-debug.tsx extend context correctly 1`] = `
Array [ Array [
<form <form
class="ant-form ant-form-inline components-table-demo-control-bar" class="ant-form ant-form-inline table-demo-control-bar"
style="margin-bottom: 16px;" style="margin-bottom: 16px;"
> >
<div <div

6
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -867,7 +867,7 @@ exports[`renders components/table/demo/colspan-rowspan.tsx correctly 1`] = `
exports[`renders components/table/demo/component-token.tsx correctly 1`] = ` exports[`renders components/table/demo/component-token.tsx correctly 1`] = `
Array [ Array [
<form <form
class="ant-form ant-form-inline components-table-demo-control-bar" class="ant-form ant-form-inline table-demo-control-bar"
style="margin-bottom:16px" style="margin-bottom:16px"
> >
<div <div
@ -4452,7 +4452,7 @@ exports[`renders components/table/demo/drag-sorting-handler.tsx correctly 1`] =
exports[`renders components/table/demo/dynamic-settings.tsx correctly 1`] = ` exports[`renders components/table/demo/dynamic-settings.tsx correctly 1`] = `
Array [ Array [
<form <form
class="ant-form ant-form-inline components-table-demo-control-bar" class="ant-form ant-form-inline table-demo-control-bar"
style="margin-bottom:16px" style="margin-bottom:16px"
> >
<div <div
@ -15590,7 +15590,7 @@ exports[`renders components/table/demo/narrow.tsx correctly 1`] = `
exports[`renders components/table/demo/nest-table-border-debug.tsx correctly 1`] = ` exports[`renders components/table/demo/nest-table-border-debug.tsx correctly 1`] = `
Array [ Array [
<form <form
class="ant-form ant-form-inline components-table-demo-control-bar" class="ant-form ant-form-inline table-demo-control-bar"
style="margin-bottom:16px" style="margin-bottom:16px"
> >
<div <div

2
components/table/demo/component-token.tsx
View File

@ -178,7 +178,7 @@ const App: React.FC = () => {
<> <>
<Form <Form
layout="inline" layout="inline"
className="components-table-demo-control-bar" className="table-demo-control-bar"
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
> >
<Form.Item label="Bordered"> <Form.Item label="Bordered">

2
components/table/demo/dynamic-settings.md
View File

@ -7,7 +7,7 @@
Select different settings to see the result. Select different settings to see the result.
<style> <style>
.components-table-demo-control-bar .ant-form-item { .table-demo-control-bar .ant-form-item {
margin-right: 16px !important; margin-right: 16px !important;
margin-bottom: 8px !important; margin-bottom: 8px !important;
} }

2
components/table/demo/dynamic-settings.tsx
View File

@ -178,7 +178,7 @@ const App: React.FC = () => {
<> <>
<Form <Form
layout="inline" layout="inline"
className="components-table-demo-control-bar" className="table-demo-control-bar"
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
> >
<Form.Item label="Bordered"> <Form.Item label="Bordered">

2
components/table/demo/nest-table-border-debug.tsx
View File

@ -101,7 +101,7 @@ const App: React.FC = () => {
<> <>
<Form <Form
layout="inline" layout="inline"
className="components-table-demo-control-bar" className="table-demo-control-bar"
style={{ marginBottom: 16 }} style={{ marginBottom: 16 }}
> >
<Form.Item label="Root Table Bordered"> <Form.Item label="Root Table Bordered">

4
components/table/demo/resizable-column.md
View File

@ -7,12 +7,12 @@
Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable). When sort needed, you can use [additional mark](https://codesandbox.io/s/zrj8xvyzxx) to prevent resize trigger sort. Implement resizable column by integrate with [react-resizable](https://github.com/STRML/react-resizable). When sort needed, you can use [additional mark](https://codesandbox.io/s/zrj8xvyzxx) to prevent resize trigger sort.
```css ```css
#components-table-demo-resizable-column .react-resizable { #table-demo-resizable-column .react-resizable {
position: relative; position: relative;
background-clip: padding-box; background-clip: padding-box;
} }
#components-table-demo-resizable-column .react-resizable-handle { #table-demo-resizable-column .react-resizable-handle {
position: absolute; position: absolute;
right: -5px; right: -5px;
bottom: 0; bottom: 0;

2
components/table/demo/size.md
View File

@ -6,4 +6,4 @@
There are two compacted table sizes: `middle` and `small`. The `small` size is used in Modals only. There are two compacted table sizes: `middle` and `small`. The `small` size is used in Modals only.
<style>#components-table-demo-size h4 { margin-bottom: 16px; }</style> <style>#table-demo-size h4 { margin-bottom: 16px; }</style>

0
components/table/index.ts → components/table/index.tsx
View File

2
components/tabs/index.en-US.md
View File

@ -13,7 +13,7 @@ Ant Design has 3 types of Tabs for different situations.
- Card Tabs: for managing too many closeable views. - Card Tabs: for managing too many closeable views.
- Normal Tabs: for functional aspects of a page. - Normal Tabs: for functional aspects of a page.
- [Radio.Button](/components/radio/#components-radio-demo-radiobutton): for secondary tabs. - [Radio.Button](/components/radio/#radio-demo-radiobutton): for secondary tabs.
## Examples ## Examples

2
components/tabs/index.zh-CN.md
View File

@ -16,7 +16,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。 - 卡片式的页签，提供可关闭的样式，常用于容器顶部。
- 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。 - 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
- [Radio.Button](/components/radio-cn/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。 - [Radio.Button](/components/radio-cn/#radio-demo-radiobutton) 可作为更次级的页签来使用。
## 代码演示 ## 代码演示

0
components/theme/index.ts → components/theme/index.tsx
View File

0
components/timeline/index.ts → components/timeline/index.tsx
View File

2
components/tree-select/index.en-US.md
View File

@ -76,7 +76,7 @@ Common props ref：[Common props](/docs/react/common-props)
| treeExpandedKeys | Set expanded keys | string\[] | - | | | treeExpandedKeys | Set expanded keys | string\[] | - | |
| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | | | treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | |
| treeLoadedKeys | (Controlled) Set loaded tree nodes, work with `loadData` only | string[] | [] | | | treeLoadedKeys | (Controlled) Set loaded tree nodes, work with `loadData` only | string[] | [] | |
| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 4.17.0 | | treeLine | Show the line. Ref [Tree - showLine](/components/tree/#tree-demo-line) | boolean \| object | false | 4.17.0 |
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | | | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | |
| treeNodeLabelProp | Will render as content of select | string | `title` | | | treeNodeLabelProp | Will render as content of select | string | `title` | |
| value | To set the current selected treeNode(s) | string \| string\[] | - | | | value | To set the current selected treeNode(s) | string \| string\[] | - | |

2
components/tree-select/index.zh-CN.md
View File

@ -76,7 +76,7 @@ demo:
| treeExpandAction | 点击节点 title 时的展开逻辑，可选：false \| `click` \| `doubleClick` | string \| boolean | false | 4.21.0 | | treeExpandAction | 点击节点 title 时的展开逻辑，可选：false \| `click` \| `doubleClick` | string \| boolean | false | 4.21.0 |
| treeExpandedKeys | 设置展开的树节点 | string\[] | - | | | treeExpandedKeys | 设置展开的树节点 | string\[] | - | |
| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | | | treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |
| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree-cn#components-tree-demo-line) | boolean \| object | false | 4.17.0 | | treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree-cn#tree-demo-line) | boolean \| object | false | 4.17.0 |
| treeLoadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string[] | [] | | | treeLoadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string[] | [] | |
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | | | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | |
| treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | | | treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | |

0
components/tree/index.ts → components/tree/index.tsx
View File

0
components/typography/index.ts → components/typography/index.tsx
View File

0
components/upload/index.ts → components/upload/index.tsx
View File

0
components/version/index.ts → components/version/index.tsx
View File

2
docs/blog/virtual-table.en-US.md
View File

@ -31,7 +31,7 @@ Table supports virtual scrolling by setting the `virtual` prop. At the same time
![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original) ![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original)
You can visit the [virtual list](/components/table#components-table-demo-virtual-list) example to experience it. You can visit the [virtual list](/components/table#table-demo-virtual-list) example to experience it.
## Some details ## Some details

2
docs/blog/virtual-table.zh-CN.md
View File

@ -31,7 +31,7 @@ Table 通过 `virtual` 属性即可开启虚拟滚动能力。同时，原 Table
![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original) ![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original)
你可以直接访问 [虚拟列表](/components/table#components-table-demo-virtual-list) 示例进行体验。 你可以直接访问 [虚拟列表](/components/table#table-demo-virtual-list) 示例进行体验。
## 一些细节 ## 一些细节

2
docs/react/faq.en-US.md
View File

@ -177,7 +177,7 @@ Or you can simply upgrade to [antd@4.0](https://github.com/ant-design/ant-design
Static methods like message/notification/Modal.confirm are not using the same render tree as `<Button />`, but rendered to independent DOM node created by `ReactDOM.render`, which cannot access React context from ConfigProvider. Consider two solutions here: Static methods like message/notification/Modal.confirm are not using the same render tree as `<Button />`, but rendered to independent DOM node created by `ReactDOM.render`, which cannot access React context from ConfigProvider. Consider two solutions here:
1. Replace original usages with [message.useMessage](/components/message/#components-message-demo-hooks), [notification.useNotification](/components/notification/#why-i-can-not-access-context-redux-configprovider-localeprefixcls-in-notification) and [Modal.useModal](/components/modal/#why-i-can-not-access-context-redux-configprovider-localeprefixcls-in-modalxxx). 1. Replace original usages with [message.useMessage](/components/message/#message-demo-hooks), [notification.useNotification](/components/notification/#why-i-can-not-access-context-redux-configprovider-localeprefixcls-in-notification) and [Modal.useModal](/components/modal/#why-i-can-not-access-context-redux-configprovider-localeprefixcls-in-modalxxx).
2. Use [App.useApp](/components/app-cn#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95) to get message/notification/modal instance. 2. Use [App.useApp](/components/app-cn#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95) to get message/notification/modal instance.

4
docs/react/faq.zh-CN.md
View File

@ -151,7 +151,7 @@ type InputRef = GetRef<typeof Input>;
## 我的组件默认语言是英文的？如何切回中文的。 ## 我的组件默认语言是英文的？如何切回中文的。
请尝试使用 [ConfigProvider](/components/config-provider-cn#components-config-provider-demo-locale) 组件来包裹你的应用。 请尝试使用 [ConfigProvider](/components/config-provider-cn#config-provider-demo-locale) 组件来包裹你的应用。
如果日期组件的国际化仍未生效，请配置 `dayjs.locale('zh-cn')` 并**检查你本地的 `dayjs` 版本和 `antd` 依赖的 `dayjs` 版本是否一致**。 如果日期组件的国际化仍未生效，请配置 `dayjs.locale('zh-cn')` 并**检查你本地的 `dayjs` 版本和 `antd` 依赖的 `dayjs` 版本是否一致**。
@ -200,7 +200,7 @@ npm ls dayjs
message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式，是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上，无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式： message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式，是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上，无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式：
1. 使用官方提供的 [message.useMessage](/components/message-cn/#components-message-demo-hooks)、[notification.useNotification](/components/notification-cn#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。 1. 使用官方提供的 [message.useMessage](/components/message-cn/#message-demo-hooks)、[notification.useNotification](/components/notification-cn#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。
2. 使用 [App.useApp](/components/app-cn#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95) 直接调用 message、notification、modal 实例方法。 2. 使用 [App.useApp](/components/app-cn#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95) 直接调用 message、notification、modal 实例方法。