mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
Merge branch 'master' into feature-merge-master
This commit is contained in:
栗嘉男
commit
d5207c1e23
@ -357,9 +357,9 @@ const GlobalDemoStyles: React.FC = () => {
|
||||
}
|
||||
|
||||
${antCls}-row-rtl {
|
||||
#components-tooltip-demo-placement,
|
||||
#components-popover-demo-placement,
|
||||
#components-popconfirm-demo-placement {
|
||||
#tooltip-demo-placement,
|
||||
#popover-demo-placement,
|
||||
#popconfirm-demo-placement {
|
||||
.code-box-demo {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
@ -389,7 +389,7 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
|
||||
.grid-demo,
|
||||
[id^='components-grid-demo-'] {
|
||||
[id^='grid-demo-'] {
|
||||
${antCls}-row > div,
|
||||
.code-box-demo ${antCls}-row > div {
|
||||
min-height: 30px;
|
||||
@ -467,8 +467,8 @@ const GlobalStyle: React.FC = () => {
|
||||
}
|
||||
}
|
||||
|
||||
[id='components-grid-demo-playground'],
|
||||
[id='components-grid-demo-gutter'] {
|
||||
[id='grid-demo-playground'],
|
||||
[id='grid-demo-gutter'] {
|
||||
> .code-box-demo ${antCls}-row > div {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -35,6 +35,16 @@ export const ANT_DESIGN_NOT_SHOW_BANNER = 'ANT_DESIGN_NOT_SHOW_BANNER';
|
||||
// (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[] = []) =>
|
||||
themes
|
||||
.map((theme) => {
|
||||
|
||||
@ -39,6 +39,13 @@ export const getHash = (str: string, length = 8) =>
|
||||
class AntdReactTechStack extends ReactTechStack {
|
||||
// eslint-disable-next-line class-methods-use-this
|
||||
generatePreviewerProps(...[props, opts]: any) {
|
||||
props.pkgDependencyList = { ...devDependencies, ...dependencies };
|
||||
props.jsx ??= '';
|
||||
|
||||
if (opts.type === 'code-block') {
|
||||
props.jsx = opts?.entryPointCode ? sylvanas.parseText(opts.entryPointCode) : '';
|
||||
}
|
||||
|
||||
if (opts.type === 'external') {
|
||||
// try to find md file with the same name as the demo tsx file
|
||||
const locale = opts.mdAbsPath.match(/index\.([a-z-]+)\.md$/i)?.[1];
|
||||
@ -48,7 +55,6 @@ class AntdReactTechStack extends ReactTechStack {
|
||||
const codePath = opts.fileAbsPath!.replace(/\.\w+$/, '.tsx');
|
||||
const code = fs.existsSync(codePath) ? fs.readFileSync(codePath, 'utf-8') : '';
|
||||
|
||||
props.pkgDependencyList = { ...devDependencies, ...dependencies };
|
||||
props.jsx = sylvanas.parseText(code);
|
||||
|
||||
if (md) {
|
||||
|
||||
@ -78,7 +78,13 @@ jobs:
|
||||
# Save PR id to output
|
||||
- name: save PR id
|
||||
id: pr
|
||||
run: echo "id=$(<tmp/visual-regression-pr-id.txt)" >> $GITHUB_OUTPUT
|
||||
run: |
|
||||
pr_id=$(<tmp/visual-regression-pr-id.txt)
|
||||
if ! [[ "$pr_id" =~ ^[0-9]+$ ]]; then
|
||||
echo "Error: pr-id.txt does not contain a valid numeric PR id. Please check."
|
||||
exit 1
|
||||
fi
|
||||
echo "id=$pr_id" >> $GITHUB_OUTPUT
|
||||
|
||||
# Download report artifact
|
||||
- name: download report artifact
|
||||
@ -146,13 +152,15 @@ jobs:
|
||||
- name: Reset Commit Status
|
||||
uses: actions/github-script@v7
|
||||
if: ${{ steps.report.outcome == 'success' }}
|
||||
env:
|
||||
PR_ID: ${{ steps.pr.outputs.id }}
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
script: |
|
||||
const prResponse = await github.rest.pulls.get({
|
||||
owner: context.repo.owner,
|
||||
repo: context.repo.repo,
|
||||
pull_number: ${{ steps.pr.outputs.id }},
|
||||
pull_number: process.env.PR_ID,
|
||||
});
|
||||
const prHeadSha = prResponse.data.head.sha;
|
||||
|
||||
|
||||
@ -1,4 +1 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx --no-install lint-staged
|
||||
lint-staged
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
|
||||
import type { GlobalToken } from '../theme/interface';
|
||||
import type { GlobalToken } from '../theme/internal';
|
||||
import { useToken } from '../theme/internal';
|
||||
|
||||
export type Breakpoint = 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { defaultPrefixCls } from '../../config-provider';
|
||||
import type { GlobalToken } from '../../theme';
|
||||
import type { GlobalToken } from '../../theme/internal';
|
||||
|
||||
export const TARGET_CLS = `${defaultPrefixCls}-wave-target`;
|
||||
|
||||
|
||||
@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
|
||||
{
|
||||
id: '707000085',
|
||||
label: '了解提示内容',
|
||||
link: 'components-alert-index-tab-design-demo-content',
|
||||
link: 'alert-index-tab-design-demo-content',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
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',
|
||||
label: '针对提示进行操作',
|
||||
targetType: 'extension',
|
||||
link: 'components-alert-index-tab-design-demo-action',
|
||||
link: 'alert-index-tab-design-demo-action',
|
||||
},
|
||||
],
|
||||
}}
|
||||
|
||||
@ -67,12 +67,12 @@ describe('Anchor Render', () => {
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Item Basic Demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
@ -101,8 +101,8 @@ describe('Anchor Render', () => {
|
||||
const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) =>
|
||||
(n as HTMLElement).querySelector('.ant-anchor-link-title'),
|
||||
);
|
||||
expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic');
|
||||
expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static');
|
||||
expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic');
|
||||
expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static');
|
||||
expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api');
|
||||
expect(
|
||||
(
|
||||
@ -127,12 +127,12 @@ describe('Anchor Render', () => {
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Item Basic Demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
@ -147,8 +147,8 @@ describe('Anchor Render', () => {
|
||||
const linkTitles = Array.from(container.querySelector('.ant-anchor')?.childNodes!).map((n) =>
|
||||
(n as HTMLElement).querySelector('.ant-anchor-link-title'),
|
||||
);
|
||||
expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#components-anchor-demo-basic');
|
||||
expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#components-anchor-demo-static');
|
||||
expect((linkTitles[1] as HTMLAnchorElement).href).toContain('#anchor-demo-basic');
|
||||
expect((linkTitles[2] as HTMLAnchorElement).href).toContain('#anchor-demo-static');
|
||||
expect((linkTitles[3] as HTMLAnchorElement).href).toContain('#api');
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
@ -159,7 +159,7 @@ describe('Anchor Render', () => {
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Item Basic Demo',
|
||||
},
|
||||
]}
|
||||
@ -170,7 +170,7 @@ describe('Anchor Render', () => {
|
||||
expect(container.querySelectorAll('.ant-anchor .ant-anchor-link').length).toBe(1);
|
||||
expect(
|
||||
(container.querySelector('.ant-anchor .ant-anchor-link-title') as HTMLAnchorElement).href,
|
||||
).toContain('#components-anchor-demo-basic');
|
||||
).toContain('#anchor-demo-basic');
|
||||
expect(asFragment().firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
@ -694,12 +694,12 @@ describe('Anchor Render', () => {
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Item Basic Demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
@ -725,12 +725,12 @@ describe('Anchor Render', () => {
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Item Basic Demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
@ -759,8 +759,8 @@ describe('Anchor Render', () => {
|
||||
it('nested children via jsx should be filtered out when direction is horizontal', () => {
|
||||
const { container } = render(
|
||||
<Anchor direction="horizontal">
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#anchor-demo-static" title="Static demo" />
|
||||
<Link href="#api" title="API">
|
||||
<Link href="#anchor-props" title="Anchor Props" />
|
||||
<Link href="#link-props" title="Link Props" />
|
||||
@ -904,12 +904,12 @@ describe('Anchor Render', () => {
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Item Basic Demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
@ -935,8 +935,8 @@ describe('Anchor Render', () => {
|
||||
it('deprecated jsx style', () => {
|
||||
render(
|
||||
<Anchor direction="horizontal">
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#anchor-demo-static" title="Static demo" />
|
||||
</Anchor>,
|
||||
);
|
||||
expect(errSpy).toHaveBeenCalledWith(
|
||||
@ -947,8 +947,8 @@ describe('Anchor Render', () => {
|
||||
it('deprecated jsx style for direction#vertical', () => {
|
||||
render(
|
||||
<Anchor>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#anchor-demo-static" title="Static demo" />
|
||||
</Anchor>,
|
||||
);
|
||||
expect(errSpy).toHaveBeenCalledWith(
|
||||
|
||||
@ -20,7 +20,7 @@ exports[`Anchor Render render items and ignore jsx children 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Item Basic Demo"
|
||||
>
|
||||
Item Basic Demo
|
||||
@ -52,7 +52,7 @@ exports[`Anchor Render renders items correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Item Basic Demo"
|
||||
>
|
||||
Item Basic Demo
|
||||
@ -63,7 +63,7 @@ exports[`Anchor Render renders items correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -128,7 +128,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Item Basic Demo"
|
||||
>
|
||||
Item Basic Demo
|
||||
@ -139,7 +139,7 @@ exports[`Anchor Render renders items correctly#horizontal 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
|
||||
@ -179,7 +179,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -190,7 +190,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx extend context co
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title ant-anchor-link-title-active"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -328,7 +328,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -339,7 +339,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx extend context correct
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -404,7 +404,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -415,7 +415,7 @@ exports[`renders components/anchor/demo/onChange.tsx extend context correctly 1`
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -476,7 +476,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`]
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -487,7 +487,7 @@ exports[`renders components/anchor/demo/onClick.tsx extend context correctly 1`]
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -629,7 +629,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`]
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -640,7 +640,7 @@ exports[`renders components/anchor/demo/static.tsx extend context correctly 1`]
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
|
||||
@ -172,7 +172,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -183,7 +183,7 @@ exports[`renders components/anchor/demo/customizeHighlight.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -316,7 +316,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -327,7 +327,7 @@ exports[`renders components/anchor/demo/legacy-anchor.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -386,7 +386,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -397,7 +397,7 @@ exports[`renders components/anchor/demo/onChange.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -456,7 +456,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -467,7 +467,7 @@ exports[`renders components/anchor/demo/onClick.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
@ -604,7 +604,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo"
|
||||
>
|
||||
Basic demo
|
||||
@ -615,7 +615,7 @@ exports[`renders components/anchor/demo/static.tsx correctly 1`] = `
|
||||
>
|
||||
<a
|
||||
class="ant-anchor-link-title"
|
||||
href="#components-anchor-demo-static"
|
||||
href="#anchor-demo-static"
|
||||
title="Static demo"
|
||||
>
|
||||
Static demo
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { Anchor } from 'antd';
|
||||
|
||||
const getCurrentAnchor = () => '#components-anchor-demo-static';
|
||||
const getCurrentAnchor = () => '#anchor-demo-static';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor
|
||||
@ -10,12 +10,12 @@ const App: React.FC = () => (
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Basic demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
|
||||
@ -5,8 +5,8 @@ const { Link } = Anchor;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Anchor affix={false}>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#anchor-demo-static" title="Static demo" />
|
||||
<Link href="#api" title="API">
|
||||
<Link href="#anchor-props" title="Anchor Props" />
|
||||
<Link href="#link-props" title="Link Props" />
|
||||
|
||||
@ -12,12 +12,12 @@ const App: React.FC = () => (
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Basic demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
|
||||
@ -19,12 +19,12 @@ const App: React.FC = () => (
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Basic demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
|
||||
@ -7,12 +7,12 @@ const App: React.FC = () => (
|
||||
items={[
|
||||
{
|
||||
key: '1',
|
||||
href: '#components-anchor-demo-basic',
|
||||
href: '#anchor-demo-basic',
|
||||
title: 'Basic demo',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
href: '#components-anchor-demo-static',
|
||||
href: '#anchor-demo-static',
|
||||
title: 'Static demo',
|
||||
},
|
||||
{
|
||||
|
||||
@ -46,7 +46,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | |
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
|
||||
| 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 | | |
|
||||
| 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 |
|
||||
|
||||
@ -47,7 +47,7 @@ group:
|
||||
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
||||
| showInkInFixed | `affix={false}` 时是否显示小方块 | boolean | false | |
|
||||
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetoffset) | number | - | |
|
||||
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#anchor-demo-targetoffset) | number | - | |
|
||||
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
||||
| onClick | `click` 事件的 handler | (e: MouseEvent, link: object) => void | - | |
|
||||
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }\[] [具体见](#anchoritem) | - | 5.1.0 |
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
import { Keyframes, unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import type {
|
||||
FullToken,
|
||||
GenerateStyle,
|
||||
GenStyleFn,
|
||||
GetDefaultToken,
|
||||
} from '../../theme/internal';
|
||||
import { genPresetColor, genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import type { GenStyleFn, GetDefaultToken } from '../../theme/util/genComponentStyleHook';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
|
||||
@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
|
||||
{
|
||||
id: '707000085',
|
||||
label: '了解当前页面的位置',
|
||||
link: 'components-breadcrumb-index-tab-design-demo-basic',
|
||||
link: 'breadcrumb-index-tab-design-demo-basic',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
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',
|
||||
label: '向上导航',
|
||||
targetType: 'mvp',
|
||||
link: 'components-breadcrumb-index-tab-design-demo-basic',
|
||||
link: 'breadcrumb-index-tab-design-demo-basic',
|
||||
},
|
||||
{
|
||||
id: '200000006',
|
||||
label: '快捷导航',
|
||||
targetType: 'extension',
|
||||
link: 'components-breadcrumb-index-tab-design-demo-overlay',
|
||||
link: 'breadcrumb-index-tab-design-demo-overlay',
|
||||
},
|
||||
],
|
||||
}}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
## 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
|
||||
|
||||
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).
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
|
||||
import type { FullToken, GetDefaultToken } from '../../theme/internal';
|
||||
import type {
|
||||
FullToken,
|
||||
GetDefaultToken,
|
||||
GenStyleFn,
|
||||
} from '../../theme/internal';
|
||||
import { getLineHeight, mergeToken } from '../../theme/internal';
|
||||
import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
|
||||
@ -7963,11 +7963,7 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/calendar/demo/customize-header.tsx extend context correctly 2`] = `
|
||||
[
|
||||
"Warning: [antd: Select] \`dropdownMatchSelectWidth\` is deprecated. Please use \`popupMatchSelectWidth\` instead.",
|
||||
]
|
||||
`;
|
||||
exports[`renders components/calendar/demo/customize-header.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/calendar/demo/notice-calendar.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
|
||||
@ -371,7 +371,7 @@ describe('Calendar', () => {
|
||||
return (
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
popupMatchSelectWidth={false}
|
||||
className="my-year-select"
|
||||
onChange={onYearChange}
|
||||
value={String(year)}
|
||||
@ -415,7 +415,7 @@ describe('Calendar', () => {
|
||||
return (
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
popupMatchSelectWidth={false}
|
||||
className="my-month-select"
|
||||
onChange={onMonthChange}
|
||||
value={String(month)}
|
||||
|
||||
@ -75,7 +75,7 @@ const App: React.FC = () => {
|
||||
<Col>
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
popupMatchSelectWidth={false}
|
||||
className="my-year-select"
|
||||
value={year}
|
||||
onChange={(newYear) => {
|
||||
@ -89,7 +89,7 @@ const App: React.FC = () => {
|
||||
<Col>
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
popupMatchSelectWidth={false}
|
||||
value={month}
|
||||
onChange={(newMonth) => {
|
||||
const now = value.clone().month(newMonth);
|
||||
|
||||
@ -209,7 +209,7 @@ const App: React.FC = () => {
|
||||
<Col>
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
popupMatchSelectWidth={false}
|
||||
className="my-year-select"
|
||||
value={year}
|
||||
options={options}
|
||||
@ -222,7 +222,7 @@ const App: React.FC = () => {
|
||||
<Col>
|
||||
<Select
|
||||
size="small"
|
||||
dropdownMatchSelectWidth={false}
|
||||
popupMatchSelectWidth={false}
|
||||
value={month}
|
||||
options={monthOptions}
|
||||
onChange={(newMonth) => {
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
|
||||
import { genCompactItemStyle } from '../../style/compact-item';
|
||||
import type { GlobalToken } from '../../theme';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import type { FullToken, GenerateStyle, GlobalToken } from '../../theme/internal';
|
||||
import { genStyleHooks } from '../../theme/internal';
|
||||
import getColumnsStyle from './columns';
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
Specify the trigger area of collapsible by `collapsible`.
|
||||
|
||||
<style>
|
||||
#components-collapse-demo-collapsible .ant-space {
|
||||
#collapse-demo-collapsible .ant-space {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -79,7 +79,7 @@ Common props ref：[Common props](/docs/react/common-props)
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | |
|
||||
| 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 | - | |
|
||||
|
||||
@ -80,7 +80,7 @@ const items: CollapseProps['items'] = [
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | |
|
||||
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 |
|
||||
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |
|
||||
|
||||
@ -7,7 +7,7 @@ import { Button, InputNumber, Select } from '../..';
|
||||
import { resetWarned } from '../../_util/warning';
|
||||
import { render } from '../../../tests/utils';
|
||||
import theme from '../../theme';
|
||||
import type { GlobalToken } from '../../theme';
|
||||
import type { GlobalToken } from '../../theme/internal';
|
||||
import { useToken } from '../../theme/internal';
|
||||
|
||||
const { defaultAlgorithm, darkAlgorithm, compactAlgorithm } = theme;
|
||||
|
||||
@ -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 |
|
||||
| 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 } | - | |
|
||||
| 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 | |
|
||||
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
|
||||
| iconPrefixCls | Set icon prefix className | string | `anticon` | 4.11.0 |
|
||||
|
||||
@ -56,7 +56,7 @@ export default Demo;
|
||||
| componentDisabled | 设置 antd 组件禁用状态 | boolean | - | 4.21.0 |
|
||||
| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | |
|
||||
| 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 | |
|
||||
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
|
||||
| iconPrefixCls | 设置图标统一样式前缀 | string | `anticon` | 4.11.0 |
|
||||
|
||||
@ -16,32 +16,32 @@ const BehaviorPattern: React.FC = () => (
|
||||
{
|
||||
id: '707000085',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
label: '查看日期附属信息',
|
||||
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',
|
||||
},
|
||||
],
|
||||
}}
|
||||
|
||||
@ -99,7 +99,7 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
| components | Custom panels | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
@ -149,7 +149,7 @@ The following APIs are shared by DatePicker, RangePicker.
|
||||
| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |
|
||||
| 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.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 |
|
||||
| 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) | - | |
|
||||
@ -220,7 +220,7 @@ Added in `4.1.0`.
|
||||
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
|
||||
| separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` | |
|
||||
| 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/)] | - | |
|
||||
| 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]) | - | |
|
||||
|
||||
@ -100,7 +100,7 @@ dayjs.locale('zh-cn');
|
||||
| components | 自定义面板 | Record<Panel \| 'input', React.ComponentType> | - | 5.14.0 |
|
||||
| disabled | 禁用 | boolean | false | |
|
||||
| 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 |
|
||||
| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
|
||||
| popupClassName | 额外的弹出日历 className | string | - | 4.23.0 |
|
||||
@ -150,7 +150,7 @@ dayjs.locale('zh-cn');
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
||||
| showNow | 显示当前日期时间的快捷选择 | boolean | - | |
|
||||
| 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 |
|
||||
| value | 日期 | [dayjs](https://day.js.org/) | - | |
|
||||
| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | |
|
||||
@ -221,7 +221,7 @@ dayjs.locale('zh-cn');
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` | |
|
||||
| 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/)\[] | - | |
|
||||
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
|
||||
| onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - | |
|
||||
|
||||
@ -214,6 +214,15 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
|
||||
${componentCls}-super-next-icon`]: {
|
||||
transform: 'rotate(-135deg)',
|
||||
},
|
||||
|
||||
[`${componentCls}-time-panel`]: {
|
||||
[`${componentCls}-content`]: {
|
||||
direction: 'ltr',
|
||||
'> *': {
|
||||
direction: 'rtl',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -5,12 +5,12 @@ import { initComponentToken } from '../../input/style/token';
|
||||
import type { MultipleSelectorToken, SelectorToken } from '../../select/style/token';
|
||||
import type { ArrowToken } from '../../style/roundedArrow';
|
||||
import { getArrowToken } from '../../style/roundedArrow';
|
||||
import type { GlobalToken } from '../../theme/interface';
|
||||
import type {
|
||||
GlobalToken,
|
||||
FullToken,
|
||||
GetDefaultToken,
|
||||
TokenWithCommonCls,
|
||||
} from '../../theme/util/genComponentStyleHook';
|
||||
} from '../../theme/internal';
|
||||
|
||||
export interface PanelComponentToken extends MultipleSelectorToken {
|
||||
/**
|
||||
|
||||
@ -8235,7 +8235,7 @@ exports[`renders components/form/demo/inline-login.tsx extend context correctly
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user site-form-item-icon"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -8290,7 +8290,7 @@ exports[`renders components/form/demo/inline-login.tsx extend context correctly
|
||||
>
|
||||
<span
|
||||
aria-label="lock"
|
||||
class="anticon anticon-lock site-form-item-icon"
|
||||
class="anticon anticon-lock"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -8984,6 +8984,210 @@ Array [
|
||||
|
||||
exports[`renders components/form/demo/layout-multiple.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/form/demo/login.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="login"
|
||||
style="max-width: 360px;"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="login_username"
|
||||
placeholder="Username"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="lock"
|
||||
class="anticon anticon-lock"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="lock"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="login_password"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target ant-checkbox-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-checkbox-input"
|
||||
id="login_remember"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Remember me
|
||||
</span>
|
||||
</label>
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
Forgot password
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-block"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Log in
|
||||
</span>
|
||||
</button>
|
||||
or
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
Register now!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/login.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/form/demo/nest-messages.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
@ -9275,206 +9479,6 @@ exports[`renders components/form/demo/nest-messages.tsx extend context correctly
|
||||
|
||||
exports[`renders components/form/demo/nest-messages.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/form/demo/normal-login.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal login-form"
|
||||
id="normal_login"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user site-form-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="normal_login_username"
|
||||
placeholder="Username"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="lock"
|
||||
class="anticon anticon-lock site-form-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="lock"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="normal_login_password"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target ant-checkbox-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-checkbox-input"
|
||||
id="normal_login_remember"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Remember me
|
||||
</span>
|
||||
</label>
|
||||
<a
|
||||
class="login-form-forgot"
|
||||
href=""
|
||||
>
|
||||
Forgot password
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary login-form-button"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Log in
|
||||
</span>
|
||||
</button>
|
||||
Or
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
register now!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/normal-login.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/form/demo/ref-item.tsx extend context correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
|
||||
@ -4567,7 +4567,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user site-form-item-icon"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -4622,7 +4622,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = `
|
||||
>
|
||||
<span
|
||||
aria-label="lock"
|
||||
class="anticon anticon-lock site-form-item-icon"
|
||||
class="anticon anticon-lock"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
@ -5306,6 +5306,208 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/login.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="login"
|
||||
style="max-width:360px"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="login_username"
|
||||
placeholder="Username"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="lock"
|
||||
class="anticon anticon-lock"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="lock"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="login_password"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-space-between"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target ant-checkbox-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-checkbox-input"
|
||||
id="login_remember"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Remember me
|
||||
</span>
|
||||
</label>
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
Forgot password
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary ant-btn-block"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Log in
|
||||
</span>
|
||||
</button>
|
||||
or
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
Register now!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/nest-messages.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
@ -5595,204 +5797,6 @@ exports[`renders components/form/demo/nest-messages.tsx correctly 1`] = `
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/normal-login.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal login-form"
|
||||
id="normal_login"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="user"
|
||||
class="anticon anticon-user site-form-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="user"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="normal_login_username"
|
||||
placeholder="Username"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<span
|
||||
class="ant-input-affix-wrapper ant-input-outlined"
|
||||
>
|
||||
<span
|
||||
class="ant-input-prefix"
|
||||
>
|
||||
<span
|
||||
aria-label="lock"
|
||||
class="anticon anticon-lock site-form-item-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="lock"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<input
|
||||
aria-required="true"
|
||||
class="ant-input"
|
||||
id="normal_login_password"
|
||||
placeholder="Password"
|
||||
type="password"
|
||||
value=""
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-in-form-item"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox ant-wave-target ant-checkbox-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-checkbox-input"
|
||||
id="normal_login_remember"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Remember me
|
||||
</span>
|
||||
</label>
|
||||
<a
|
||||
class="login-form-forgot"
|
||||
href=""
|
||||
>
|
||||
Forgot password
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-row ant-form-item-row"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary login-form-button"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Log in
|
||||
</span>
|
||||
</button>
|
||||
Or
|
||||
<a
|
||||
href=""
|
||||
>
|
||||
register now!
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders components/form/demo/ref-item.tsx correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
|
||||
@ -21,17 +21,13 @@ const App: React.FC = () => {
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input your username!' }]}
|
||||
>
|
||||
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
|
||||
<Input prefix={<UserOutlined />} placeholder="Username" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input your password!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<LockOutlined className="site-form-item-icon" />}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<Input prefix={<LockOutlined />} type="password" placeholder="Password" />
|
||||
</Form.Item>
|
||||
<Form.Item shouldUpdate>
|
||||
{() => (
|
||||
|
||||
9
components/form/demo/login.md
Normal file
9
components/form/demo/login.md
Normal file
@ -0,0 +1,9 @@
|
||||
## zh-CN
|
||||
|
||||
普通的登录框，可以容纳更多的元素。
|
||||
|
||||
> 🛎️ 想要 3 分钟实现登录表单？试试 [Pro Components](https://procomponents.ant.design/components/login-form)！
|
||||
|
||||
## en-US
|
||||
|
||||
Normal login form which can contain more elements.
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { Button, Checkbox, Form, Input } from 'antd';
|
||||
import { Button, Checkbox, Form, Input, Flex } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const onFinish = (values: any) => {
|
||||
@ -9,42 +9,37 @@ const App: React.FC = () => {
|
||||
|
||||
return (
|
||||
<Form
|
||||
name="normal_login"
|
||||
className="login-form"
|
||||
name="login"
|
||||
initialValues={{ remember: true }}
|
||||
style={{ maxWidth: 360 }}
|
||||
onFinish={onFinish}
|
||||
>
|
||||
<Form.Item
|
||||
name="username"
|
||||
rules={[{ required: true, message: 'Please input your Username!' }]}
|
||||
>
|
||||
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
|
||||
<Input prefix={<UserOutlined />} placeholder="Username" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="password"
|
||||
rules={[{ required: true, message: 'Please input your Password!' }]}
|
||||
>
|
||||
<Input
|
||||
prefix={<LockOutlined className="site-form-item-icon" />}
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
<Input prefix={<LockOutlined />} type="password" placeholder="Password" />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Flex justify="space-between" align="center">
|
||||
<Form.Item name="remember" valuePropName="checked" noStyle>
|
||||
<Checkbox>Remember me</Checkbox>
|
||||
</Form.Item>
|
||||
|
||||
<a className="login-form-forgot" href="">
|
||||
Forgot password
|
||||
</a>
|
||||
<a href="">Forgot password</a>
|
||||
</Flex>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" className="login-form-button">
|
||||
<Button block type="primary" htmlType="submit">
|
||||
Log in
|
||||
</Button>
|
||||
Or <a href="">register now!</a>
|
||||
or <a href="">Register now!</a>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
@ -1,24 +0,0 @@
|
||||
## zh-CN
|
||||
|
||||
普通的登录框，可以容纳更多的元素。
|
||||
|
||||
> 🛎️ 想要 3 分钟实现？试试 [ProForm](https://procomponents.ant.design/components/form/#%E7%99%BB%E5%BD%95)！
|
||||
|
||||
## en-US
|
||||
|
||||
Normal login form which can contain more elements.
|
||||
|
||||
```css
|
||||
#components-form-demo-normal-login .login-form {
|
||||
max-width: 300px;
|
||||
}
|
||||
#components-form-demo-normal-login .login-form-forgot {
|
||||
float: right;
|
||||
}
|
||||
#components-form-demo-normal-login .ant-col-rtl .login-form-forgot {
|
||||
float: left;
|
||||
}
|
||||
#components-form-demo-normal-login .login-form-button {
|
||||
width: 100%;
|
||||
}
|
||||
```
|
||||
@ -39,7 +39,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
|
||||
<code src="./demo/global-state.tsx">Store Form Data into Upper Component</code>
|
||||
<code src="./demo/form-context.tsx">Control between forms</code>
|
||||
<code src="./demo/inline-login.tsx">Inline Login Form</code>
|
||||
<code src="./demo/normal-login.tsx">Login Form</code>
|
||||
<code src="./demo/login.tsx">Login Form</code>
|
||||
<code src="./demo/register.tsx">Registration</code>
|
||||
<code src="./demo/advanced-search.tsx">Advanced search</code>
|
||||
<code src="./demo/form-in-modal.tsx">Form in Modal to Create</code>
|
||||
@ -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 | |
|
||||
| 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 | |
|
||||
| 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) | - | |
|
||||
| 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 | - | |
|
||||
@ -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 | |
|
||||
| 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 | |
|
||||
| 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 | |
|
||||
| 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 |
|
||||
| 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 | - | |
|
||||
@ -163,7 +163,7 @@ After wrapped by `Form.Item` with `name` property, `value`(or other property def
|
||||
|
||||
### 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.
|
||||
|
||||
@ -187,7 +187,7 @@ related issue: [#34500](https://github.com/ant-design/ant-design/issues/34500)
|
||||
</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:
|
||||
|
||||
@ -203,7 +203,7 @@ When `shouldUpdate` is a function, it will be called by form values update. Prov
|
||||
</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
|
||||
|
||||
@ -267,7 +267,7 @@ Some operator functions in render form of Form.List.
|
||||
|
||||
## 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 |
|
||||
| -------- | ----------- | ------------ | ------- |
|
||||
@ -275,7 +275,7 @@ New in 4.7.0. Show error messages, should only work with `rules` of Form.List. S
|
||||
|
||||
## 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 |
|
||||
| --- | --- | --- | --- |
|
||||
@ -546,7 +546,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
||||
| 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 | |
|
||||
| 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 |
|
||||
| whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean | |
|
||||
|
||||
@ -659,12 +659,6 @@ dependencies should be `['users', 0, 'name']`
|
||||
|
||||
React can not get correct interaction of controlled component with async value update. When user trigger `onChange`, component will do no response since `value` update is async. If you want to trigger value update async, you should use customize component to handle value state internal and pass sync value control to Form instead.
|
||||
|
||||
<style>
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
||||
### `scrollToFirstError` and `scrollToField` not working?
|
||||
|
||||
1. use custom form control
|
||||
|
||||
@ -40,7 +40,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
|
||||
<code src="./demo/global-state.tsx">表单数据存储于上层组件</code>
|
||||
<code src="./demo/form-context.tsx">多表单联动</code>
|
||||
<code src="./demo/inline-login.tsx">内联登录栏</code>
|
||||
<code src="./demo/normal-login.tsx">登录框</code>
|
||||
<code src="./demo/login.tsx">登录框</code>
|
||||
<code src="./demo/register.tsx">注册新用户</code>
|
||||
<code src="./demo/advanced-search.tsx">高级搜索</code>
|
||||
<code src="./demo/form-in-modal.tsx">弹出层中的新建表单</code>
|
||||
@ -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 | |
|
||||
| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
|
||||
| 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) | - | |
|
||||
| feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | [FeedbackIcons](#feedbackicons) | - | 5.9.0 |
|
||||
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |
|
||||
@ -144,10 +144,10 @@ const validateMessages = {
|
||||
| noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | |
|
||||
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
|
||||
| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | |
|
||||
| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#rule)\[] | - | |
|
||||
| rules | 校验规则，设置字段的校验逻辑。点击[此处](#form-demo-basic)查看示例 | [Rule](#rule)\[] | - | |
|
||||
| shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldupdate) | boolean \| (prevValue, curValue) => boolean | false | |
|
||||
| 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 |
|
||||
| validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
|
||||
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | |
|
||||
@ -164,7 +164,7 @@ const validateMessages = {
|
||||
|
||||
### dependencies
|
||||
|
||||
当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#components-form-demo-dependencies)。
|
||||
当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
|
||||
|
||||
`dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
|
||||
|
||||
@ -188,7 +188,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
你可以参考[示例](#components-form-demo-horizontal-login)查看具体使用场景。
|
||||
你可以参考[示例](#form-demo-horizontal-login)查看具体使用场景。
|
||||
|
||||
当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：
|
||||
|
||||
@ -204,7 +204,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
|
||||
</Form.Item>
|
||||
```
|
||||
|
||||
你可以参考[示例](#components-form-demo-control-hooks)查看具体使用场景。
|
||||
你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
|
||||
|
||||
### messageVariables
|
||||
|
||||
@ -266,7 +266,7 @@ Form.List 渲染表单相关操作函数。
|
||||
|
||||
## 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
|
||||
|
||||
提供表单间联动功能，其下设置 `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 | |
|
||||
| type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/react-component/async-validator#type) | 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 |
|
||||
| whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean | |
|
||||
|
||||
@ -658,12 +658,6 @@ Form.List 下的字段需要包裹 Form.List 本身的 `name`，比如：
|
||||
|
||||
React 中异步更新会导致受控组件交互行为异常。当用户交互触发 `onChange` 后，通过异步改变值会导致组件 `value` 不会立刻更新，使得组件呈现假死状态。如果你需要异步触发变更，请通过自定义组件实现内部异步状态。
|
||||
|
||||
<style>
|
||||
.site-form-item-icon {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
</style>
|
||||
|
||||
### `scrollToFirstError` 和 `scrollToField` 失效？
|
||||
|
||||
1. 使用了自定义表单控件
|
||||
|
||||
@ -4,9 +4,14 @@ import { unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { resetComponent } from '../../style';
|
||||
import { genCollapseMotion, zoomIn } from '../../style/motion';
|
||||
import type { AliasToken, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import type {
|
||||
AliasToken,
|
||||
FullToken,
|
||||
GenerateStyle,
|
||||
GetDefaultToken,
|
||||
GenStyleFn,
|
||||
} from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
|
||||
import genFormValidateMotionStyle from './explain';
|
||||
|
||||
export interface ComponentToken {
|
||||
@ -314,7 +319,6 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
|
||||
'&-content': {
|
||||
flex: 'auto',
|
||||
maxWidth: '100%',
|
||||
lineHeight: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
Child elements vertically aligned.
|
||||
|
||||
```css
|
||||
#components-grid-demo-flex-align [class~='ant-row'] {
|
||||
#grid-demo-flex-align [class~='ant-row'] {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
}
|
||||
```
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
To change the element sort by `order`.
|
||||
|
||||
```css
|
||||
#components-grid-demo-flex-order [class~='ant-row'] {
|
||||
#grid-demo-flex-order [class~='ant-row'] {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
}
|
||||
```
|
||||
|
||||
@ -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.
|
||||
|
||||
```css
|
||||
#components-grid-demo-flex [class~='ant-row'] {
|
||||
#grid-demo-flex [class~='ant-row'] {
|
||||
background: rgba(128, 128, 128, 0.08);
|
||||
}
|
||||
```
|
||||
|
||||
@ -7,27 +7,27 @@
|
||||
A simple playground for column count and gutter.
|
||||
|
||||
```css
|
||||
#components-grid-demo-playground [class~='ant-col'] {
|
||||
#grid-demo-playground [class~='ant-col'] {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
#components-grid-demo-playground [class~='ant-col'] > div {
|
||||
#grid-demo-playground [class~='ant-col'] > div {
|
||||
height: 120px;
|
||||
font-size: 14px;
|
||||
line-height: 120px;
|
||||
background: #0092ff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#components-grid-demo-playground pre {
|
||||
#grid-demo-playground pre {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 6px;
|
||||
}
|
||||
#components-grid-demo-playground pre.demo-code {
|
||||
#grid-demo-playground pre.demo-code {
|
||||
direction: ltr;
|
||||
}
|
||||
#components-grid-demo-playground .ant-col {
|
||||
#grid-demo-playground .ant-col {
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
@ -657,7 +657,7 @@ const genSearchInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
|
||||
},
|
||||
|
||||
// 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`]: {
|
||||
lineHeight: token.calc(token.lineHeightLG).sub(0.0002).equal(),
|
||||
},
|
||||
|
||||
@ -33,6 +33,11 @@ const localeValues: Locale = {
|
||||
triggerAsc: 'Trier par ordre croissant',
|
||||
cancelSort: 'Annuler le tri',
|
||||
},
|
||||
Tour: {
|
||||
Next: 'Étape suivante',
|
||||
Previous: 'Étape précédente',
|
||||
Finish: 'Fin de la visite guidée',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Annuler',
|
||||
|
||||
@ -33,16 +33,16 @@ const localeValues: Locale = {
|
||||
triggerAsc: 'Trier par ordre croissant',
|
||||
cancelSort: 'Annuler le tri',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Annuler',
|
||||
justOkText: 'OK',
|
||||
},
|
||||
Tour: {
|
||||
Next: 'Étape suivante',
|
||||
Previous: 'Étape précédente',
|
||||
Finish: 'Fin de la visite guidée',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Annuler',
|
||||
justOkText: 'OK',
|
||||
},
|
||||
Popconfirm: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Annuler',
|
||||
|
||||
@ -34,6 +34,11 @@ const localeValues: Locale = {
|
||||
triggerAsc: 'Klik om oplopend te sorteren',
|
||||
triggerDesc: 'Klik om aflopend te sorteren',
|
||||
},
|
||||
Tour: {
|
||||
Next: 'Volgende',
|
||||
Previous: 'Vorige',
|
||||
Finish: 'Voltooien',
|
||||
},
|
||||
Modal: {
|
||||
okText: 'OK',
|
||||
cancelText: 'Annuleer',
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
内嵌菜单可以被缩起/展开。
|
||||
|
||||
你可以在 [Layout](/components/layout-cn/#components-layout-demo-side) 里查看侧边布局结合的完整示例。
|
||||
你可以在 [Layout](/components/layout-cn/#layout-demo-side) 里查看侧边布局结合的完整示例。
|
||||
|
||||
## en-US
|
||||
|
||||
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.
|
||||
|
||||
@ -455,10 +455,10 @@ export default () => {
|
||||
style={{ marginTop: 16 }}
|
||||
/>
|
||||
<Anchor>
|
||||
<Link href="#components-anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#components-anchor-demo-static" title="Static demo" />
|
||||
<Link href="#anchor-demo-basic" title="Basic demo" />
|
||||
<Link href="#anchor-demo-static" title="Static demo" />
|
||||
<Link
|
||||
href="#components-anchor-demo-basic"
|
||||
href="#anchor-demo-basic"
|
||||
title="Basic demo with Target"
|
||||
target="_blank"
|
||||
/>
|
||||
|
||||
@ -3,10 +3,15 @@ import { unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { genFocusStyle, resetComponent } from '../../style';
|
||||
import { initFadeMotion, initZoomMotion } from '../../style/motion';
|
||||
import type { GlobalToken } from '../../theme';
|
||||
import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import type {
|
||||
AliasToken,
|
||||
FullToken,
|
||||
GenerateStyle,
|
||||
GlobalToken,
|
||||
GenStyleFn,
|
||||
TokenWithCommonCls,
|
||||
} from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import type { GenStyleFn, TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
|
||||
@ -76,6 +76,8 @@ The properties of config are as follows:
|
||||
| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
|
||||
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body | |
|
||||
| placement | Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | |
|
||||
| showProgress | Show progress bar for auto-closing notification | boolean | | 5.18.0 |
|
||||
| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 |
|
||||
| rtl | Whether to enable RTL mode | boolean | false | |
|
||||
| stack | Notifications will be stacked when amount is over threshold | boolean \| `{ threshold: number }` | `{ threshold: 3 }` | 5.10.0 |
|
||||
| top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 | |
|
||||
@ -109,6 +111,8 @@ notification.config({
|
||||
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | |
|
||||
| getContainer | Return the mount node for Notification, but still display at fullScreen | () => HTMLNode | () => document.body | |
|
||||
| placement | Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | |
|
||||
| showProgress | Show progress bar for auto-closing notification | boolean | | 5.18.0 |
|
||||
| pauseOnHover | keep the timer running or not on hover | boolean | true | 5.18.0 |
|
||||
| rtl | Whether to enable RTL mode | boolean | false | |
|
||||
| top | Distance from the top of the viewport, when `placement` is `top` `topRight` or `topLeft` (unit: pixels) | number | 24 | |
|
||||
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 |
|
||||
|
||||
@ -55,6 +55,8 @@ config 参数如下：
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
||||
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
||||
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
||||
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
||||
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
||||
| icon | 自定义图标 | ReactNode | - | - |
|
||||
| key | 当前通知唯一标志 | string | - | - |
|
||||
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
||||
@ -75,6 +77,8 @@ config 参数如下：
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
||||
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
||||
| placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` | |
|
||||
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
||||
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
||||
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| `{ threshold: number }` | `{ threshold: 3 }` | 5.10.0 |
|
||||
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
||||
|
||||
@ -3,9 +3,13 @@ import { Keyframes, unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
|
||||
import { genFocusStyle, resetComponent } from '../../style';
|
||||
import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import type {
|
||||
AliasToken,
|
||||
FullToken,
|
||||
GenerateStyle,
|
||||
GenStyleFn,
|
||||
} from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
|
||||
import genNotificationPlacementStyle from './placement';
|
||||
import genStackStyle from './stack';
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
Mini size pagination.
|
||||
|
||||
<style>
|
||||
#components-pagination-demo-mini .ant-pagination:not(:last-child) {
|
||||
#pagination-demo-mini .ant-pagination:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -17,19 +17,19 @@ const BehaviorPattern: React.FC = () => (
|
||||
id: '200000005',
|
||||
label: '调整单页展示条数',
|
||||
targetType: 'extension',
|
||||
link: 'components-pagination-index-tab-design-demo-page-size',
|
||||
link: 'pagination-index-tab-design-demo-page-size',
|
||||
},
|
||||
{
|
||||
id: '200000006',
|
||||
label: '快速跳转',
|
||||
targetType: 'extension',
|
||||
link: 'components-pagination-index-tab-design-demo-quick-jump',
|
||||
link: 'pagination-index-tab-design-demo-quick-jump',
|
||||
},
|
||||
{
|
||||
id: '200000007',
|
||||
label: '了解数据总量',
|
||||
targetType: 'extension',
|
||||
link: 'components-pagination-index-tab-design-demo-total',
|
||||
link: 'pagination-index-tab-design-demo-total',
|
||||
},
|
||||
],
|
||||
}}
|
||||
|
||||
@ -3,7 +3,7 @@ import { unit } from '@ant-design/cssinjs';
|
||||
import type { PaginationToken } from '.';
|
||||
import { prepareComponentToken, prepareToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/interface';
|
||||
import { genSubStyleComponent } from '../../theme/util/genComponentStyleHook';
|
||||
import { genSubStyleComponent } from '../../theme/internal';
|
||||
|
||||
const genBorderedStyle: GenerateStyle<PaginationToken> = (token) => {
|
||||
const { componentCls } = token;
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenStyleFn } from 'antd/es/theme/util/genComponentStyleHook';
|
||||
|
||||
import {
|
||||
genBasicInputStyle,
|
||||
@ -11,7 +10,12 @@ import {
|
||||
import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';
|
||||
import { genBaseOutlinedStyle, genDisabledStyle } from '../../input/style/variants';
|
||||
import { genFocusOutline, genFocusStyle, resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import type {
|
||||
FullToken,
|
||||
GenerateStyle,
|
||||
GetDefaultToken,
|
||||
GenStyleFn,
|
||||
} from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
|
||||
@ -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.
|
||||
|
||||
<style>
|
||||
#components-popconfirm-demo-placement .ant-btn {
|
||||
#popconfirm-demo-placement .ant-btn {
|
||||
margin-left: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
@ -15,7 +15,7 @@ There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }`
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
#components-popconfirm-demo-placement .ant-btn-rtl {
|
||||
#popconfirm-demo-placement .ant-btn-rtl {
|
||||
margin-left: 8px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -16,12 +16,12 @@ const BehaviorPattern: React.FC = () => (
|
||||
{
|
||||
id: '707000085',
|
||||
label: '了解任务进度',
|
||||
link: 'components-progress-index-tab-design-demo-progress',
|
||||
link: 'progress-index-tab-design-demo-progress',
|
||||
},
|
||||
{
|
||||
id: '707000086',
|
||||
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',
|
||||
label: '查看进度相关描述',
|
||||
targetType: 'extension',
|
||||
link: 'components-progress-index-tab-design-demo-info',
|
||||
link: 'progress-index-tab-design-demo-info',
|
||||
},
|
||||
],
|
||||
}}
|
||||
|
||||
@ -9126,11 +9126,7 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/select/demo/placement.tsx extend context correctly 2`] = `
|
||||
[
|
||||
"Warning: [antd: Select] \`dropdownMatchSelectWidth\` is deprecated. Please use \`popupMatchSelectWidth\` instead.",
|
||||
]
|
||||
`;
|
||||
exports[`renders components/select/demo/placement.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/select/demo/placement-debug.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
|
||||
@ -24,7 +24,7 @@ const App: React.FC = () => {
|
||||
<Select
|
||||
defaultValue="HangZhou"
|
||||
style={{ width: 120 }}
|
||||
dropdownMatchSelectWidth={false}
|
||||
popupMatchSelectWidth={false}
|
||||
placement={placement}
|
||||
options={[
|
||||
{
|
||||
|
||||
@ -3,8 +3,7 @@ import { unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { resetIcon } from '../../style';
|
||||
import { mergeToken } from '../../theme/internal';
|
||||
import type { AliasToken } from '../../theme/internal';
|
||||
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
||||
import type { AliasToken, TokenWithCommonCls } from '../../theme/internal';
|
||||
import type { SelectToken } from './token';
|
||||
|
||||
type SelectItemToken = Pick<
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { FullToken, GetDefaultToken } from 'antd/es/theme/util/genComponentStyleHook';
|
||||
import type { FullToken, GetDefaultToken } from 'antd/es/theme/internal';
|
||||
|
||||
export interface MultipleSelectorToken {
|
||||
/**
|
||||
|
||||
@ -1,9 +1,13 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes, unit } from '@ant-design/cssinjs';
|
||||
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import type {
|
||||
FullToken,
|
||||
GenerateStyle,
|
||||
GetDefaultToken,
|
||||
CSSUtil,
|
||||
} from '../../theme/internal';
|
||||
import { genStyleHooks, mergeToken } from '../../theme/internal';
|
||||
import type { CSSUtil } from '../../theme/util/genComponentStyleHook';
|
||||
|
||||
export type ComponentToken = {
|
||||
/** @deprecated use gradientFromColor instead. */
|
||||
|
||||
@ -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.
|
||||
|
||||
<style>
|
||||
#components-slider-demo-mark h4 {
|
||||
#slider-demo-mark h4 {
|
||||
margin: 0 0 16px;
|
||||
}
|
||||
#components-slider-demo-mark .ant-slider-with-marks {
|
||||
#slider-demo-mark .ant-slider-with-marks {
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user