mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
feat: component token rename (#42184)
* feat: component token naming rules * dcos: update * feat: modal token rename * feat: rename result token * feat: statsitic token rename * feat: steps token remane * chore: update snapshot * chore: fix lint * feat: semantic part component * revert: button & notification * revert: files * chore: code clean
This commit is contained in:
MadCcc
GitHub
parent
5904f80a9a
commit
34af3ec550
@ -7,14 +7,13 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
import genGroupStyle from './group';
|
||||
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
buttonFontWeight: number;
|
||||
}
|
||||
export interface ComponentToken {}
|
||||
|
||||
export interface ButtonToken extends FullToken<'Button'> {
|
||||
colorOutlineDefault: string;
|
||||
buttonPaddingHorizontal: number;
|
||||
buttonIconOnlyFontSize: number;
|
||||
buttonFontWeight: number;
|
||||
}
|
||||
|
||||
// ============================== Shared ==============================
|
||||
@ -504,41 +503,36 @@ const genBlockButtonStyle: GenerateStyle<ButtonToken> = (token) => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Button',
|
||||
(token) => {
|
||||
const { controlTmpOutline, paddingContentHorizontal } = token;
|
||||
export default genComponentStyleHook('Button', (token) => {
|
||||
const { controlTmpOutline, paddingContentHorizontal } = token;
|
||||
|
||||
const buttonToken = mergeToken<ButtonToken>(token, {
|
||||
colorOutlineDefault: controlTmpOutline,
|
||||
buttonPaddingHorizontal: paddingContentHorizontal,
|
||||
buttonIconOnlyFontSize: token.fontSizeLG,
|
||||
});
|
||||
|
||||
return [
|
||||
// Shared
|
||||
genSharedButtonStyle(buttonToken),
|
||||
|
||||
// Size
|
||||
genSizeSmallButtonStyle(buttonToken),
|
||||
genSizeBaseButtonStyle(buttonToken),
|
||||
genSizeLargeButtonStyle(buttonToken),
|
||||
|
||||
// Block
|
||||
genBlockButtonStyle(buttonToken),
|
||||
|
||||
// Group (type, ghost, danger, disabled, loading)
|
||||
genTypeButtonStyle(buttonToken),
|
||||
|
||||
// Button Group
|
||||
genGroupStyle(buttonToken),
|
||||
|
||||
// Space Compact
|
||||
genCompactItemStyle(token),
|
||||
genCompactItemVerticalStyle(token),
|
||||
];
|
||||
},
|
||||
{
|
||||
const buttonToken = mergeToken<ButtonToken>(token, {
|
||||
colorOutlineDefault: controlTmpOutline,
|
||||
buttonPaddingHorizontal: paddingContentHorizontal,
|
||||
buttonIconOnlyFontSize: token.fontSizeLG,
|
||||
buttonFontWeight: 400,
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
return [
|
||||
// Shared
|
||||
genSharedButtonStyle(buttonToken),
|
||||
|
||||
// Size
|
||||
genSizeSmallButtonStyle(buttonToken),
|
||||
genSizeBaseButtonStyle(buttonToken),
|
||||
genSizeLargeButtonStyle(buttonToken),
|
||||
|
||||
// Block
|
||||
genBlockButtonStyle(buttonToken),
|
||||
|
||||
// Group (type, ghost, danger, disabled, loading)
|
||||
genTypeButtonStyle(buttonToken),
|
||||
|
||||
// Button Group
|
||||
genGroupStyle(buttonToken),
|
||||
|
||||
// Space Compact
|
||||
genCompactItemStyle(token),
|
||||
genCompactItemVerticalStyle(token),
|
||||
];
|
||||
});
|
||||
|
||||
@ -99,6 +99,70 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/drawer/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
style="padding: 32px; background: rgb(230, 230, 230);"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-pure ant-drawer-right"
|
||||
style="height: 300px;"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
Hello Title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Hello Content
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-footer"
|
||||
>
|
||||
Footer!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/drawer/demo/config-provider.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="site-drawer-render-in-current-wrapper"
|
||||
|
||||
@ -11,6 +11,70 @@ exports[`renders components/drawer/demo/basic-right.tsx correctly 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders components/drawer/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
style="padding:32px;background:#e6e6e6"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-pure ant-drawer-right"
|
||||
style="height:300px"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-wrapper-body"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header"
|
||||
>
|
||||
<div
|
||||
class="ant-drawer-header-title"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-drawer-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer-title"
|
||||
>
|
||||
Hello Title
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-body"
|
||||
>
|
||||
Hello Content
|
||||
</div>
|
||||
<div
|
||||
class="ant-drawer-footer"
|
||||
>
|
||||
Footer!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/drawer/demo/config-provider.tsx correctly 1`] = `
|
||||
<div
|
||||
class="site-drawer-render-in-current-wrapper"
|
||||
|
||||
7
components/drawer/demo/component-token.md
Normal file
7
components/drawer/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug.
|
||||
17
components/drawer/demo/component-token.tsx
Normal file
17
components/drawer/demo/component-token.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
import { ConfigProvider, Drawer } from 'antd';
|
||||
|
||||
/** Test usage. Do not use in your production. */
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{ components: { Drawer: { footerPaddingBlock: 0, footerPaddingInline: 0 } } }}
|
||||
>
|
||||
<div style={{ padding: 32, background: '#e6e6e6' }}>
|
||||
<InternalDrawer title="Hello Title" style={{ height: 300 }} footer="Footer!">
|
||||
Hello Content
|
||||
</InternalDrawer>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
@ -34,6 +34,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
<code src="./demo/no-mask.tsx" debug>No mask</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/scroll-debug.tsx" debug>Scroll Debug</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -33,6 +33,7 @@ demo:
|
||||
<code src="./demo/no-mask.tsx" debug>无遮罩</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/scroll-debug.tsx" debug>滚动锁定调试</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -4,8 +4,8 @@ import genMotionStyle from './motion';
|
||||
|
||||
export interface ComponentToken {
|
||||
zIndexPopup: number;
|
||||
drawerFooterPaddingVertical: number;
|
||||
drawerFooterPaddingHorizontal: number;
|
||||
footerPaddingBlock: number;
|
||||
footerPaddingInline: number;
|
||||
}
|
||||
|
||||
export interface DrawerToken extends FullToken<'Drawer'> {}
|
||||
@ -31,8 +31,8 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
|
||||
colorIconHover,
|
||||
colorText,
|
||||
fontWeightStrong,
|
||||
drawerFooterPaddingVertical,
|
||||
drawerFooterPaddingHorizontal,
|
||||
footerPaddingBlock,
|
||||
footerPaddingInline,
|
||||
} = token;
|
||||
|
||||
const wrapperCls = `${componentCls}-content-wrapper`;
|
||||
@ -200,7 +200,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
|
||||
// Footer
|
||||
[`${componentCls}-footer`]: {
|
||||
flexShrink: 0,
|
||||
padding: `${drawerFooterPaddingVertical}px ${drawerFooterPaddingHorizontal}px`,
|
||||
padding: `${footerPaddingBlock}px ${footerPaddingInline}px`,
|
||||
borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
|
||||
},
|
||||
|
||||
@ -222,7 +222,7 @@ export default genComponentStyleHook(
|
||||
},
|
||||
(token) => ({
|
||||
zIndexPopup: token.zIndexPopupBase,
|
||||
drawerFooterPaddingVertical: token.paddingXS,
|
||||
drawerFooterPaddingHorizontal: token.padding,
|
||||
footerPaddingBlock: token.paddingXS,
|
||||
footerPaddingInline: token.padding,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -1,5 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/message/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-message-notice ant-message-notice-pure-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-message-notice-content"
|
||||
>
|
||||
<div
|
||||
class="ant-message-custom-content ant-message-error"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Hello World!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/message/demo/custom-style.tsx extend context correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
|
||||
@ -1,5 +1,42 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders components/message/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-message-notice ant-message-notice-pure-panel"
|
||||
>
|
||||
<div
|
||||
class="ant-message-notice-content"
|
||||
>
|
||||
<div
|
||||
class="ant-message-custom-content ant-message-error"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Hello World!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/message/demo/custom-style.tsx correctly 1`] = `
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
|
||||
7
components/message/demo/component-token.md
Normal file
7
components/message/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug
|
||||
20
components/message/demo/component-token.tsx
Normal file
20
components/message/demo/component-token.tsx
Normal file
@ -0,0 +1,20 @@
|
||||
import React from 'react';
|
||||
import { ConfigProvider, message } from 'antd';
|
||||
|
||||
/** Test usage. Do not use in your production. */
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Message: {
|
||||
contentPadding: 40,
|
||||
contentBg: '#e6f4ff',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<InternalPanel content="Hello World!" type="error" />
|
||||
</ConfigProvider>
|
||||
);
|
||||
@ -28,10 +28,11 @@ Display global messages as feedback in response to user operations.
|
||||
<code src="./demo/update.tsx">Update Message Content</code>
|
||||
<code src="./demo/info.tsx">Normal prompt</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
This components provides some static methods, with usage and arguments as following:
|
||||
This component provides some static methods, with usage and arguments as following:
|
||||
|
||||
- `message.success(content, [duration], onClose)`
|
||||
- `message.error(content, [duration], onClose)`
|
||||
|
||||
@ -29,6 +29,7 @@ demo:
|
||||
<code src="./demo/update.tsx">更新消息内容</code>
|
||||
<code src="./demo/info.tsx">普通提示</code>
|
||||
<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
// deps-lint-skip-all
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
@ -8,14 +9,14 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
// Component token here
|
||||
height: number;
|
||||
zIndexPopup: number;
|
||||
messageNoticeContentBg: string;
|
||||
messageNoticeContentPadding: string;
|
||||
contentBg: string;
|
||||
contentPadding: CSSProperties['padding'];
|
||||
}
|
||||
|
||||
interface MessageToken extends FullToken<'Message'> {
|
||||
// Custom token here
|
||||
height: number;
|
||||
}
|
||||
|
||||
const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
|
||||
@ -24,7 +25,6 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
|
||||
iconCls,
|
||||
boxShadow,
|
||||
colorText,
|
||||
colorBgElevated,
|
||||
colorSuccess,
|
||||
colorError,
|
||||
colorWarning,
|
||||
@ -37,7 +37,8 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
|
||||
borderRadiusLG,
|
||||
zIndexPopup,
|
||||
// Custom token
|
||||
messageNoticeContentPadding,
|
||||
contentPadding,
|
||||
contentBg,
|
||||
} = token;
|
||||
|
||||
const noticeCls = `${componentCls}-notice`;
|
||||
@ -81,8 +82,8 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
|
||||
|
||||
[`${noticeCls}-content`]: {
|
||||
display: 'inline-block',
|
||||
padding: messageNoticeContentPadding,
|
||||
background: colorBgElevated,
|
||||
padding: contentPadding,
|
||||
background: contentBg,
|
||||
borderRadius: borderRadiusLG,
|
||||
boxShadow,
|
||||
pointerEvents: 'all',
|
||||
@ -176,15 +177,16 @@ export default genComponentStyleHook(
|
||||
'Message',
|
||||
(token) => {
|
||||
// Gen-style functions here
|
||||
const combinedToken = mergeToken<MessageToken>(token, {});
|
||||
const combinedToken = mergeToken<MessageToken>(token, {
|
||||
height: 150,
|
||||
});
|
||||
return [genMessageStyle(combinedToken)];
|
||||
},
|
||||
(token) => ({
|
||||
height: 150,
|
||||
zIndexPopup: token.zIndexPopupBase + 10,
|
||||
messageNoticeContentBg: token.colorBgElevated,
|
||||
messageNoticeContentPadding: `${
|
||||
(token.controlHeightLG - token.fontSize * token.lineHeight) / 2
|
||||
}px ${token.paddingSM}px`,
|
||||
contentBg: token.colorBgElevated,
|
||||
contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${
|
||||
token.paddingSM
|
||||
}px`,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -33,6 +33,332 @@ exports[`renders components/modal/demo/button-props.tsx extend context correctly
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders components/modal/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
style="display: flex; flex-direction: column; row-gap: 16px;"
|
||||
>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel"
|
||||
role="dialog"
|
||||
style="width: 100%; height: 200px;"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-modal-close-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-header"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-footer"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel"
|
||||
role="dialog"
|
||||
style="width: 100%; height: 200px;"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-modal-close-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-header"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-footer"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
|
||||
role="dialog"
|
||||
style="width: 200px; height: 150px;"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-confirm-body-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-confirm-body"
|
||||
>
|
||||
<span
|
||||
aria-label="check-circle"
|
||||
class="anticon anticon-check-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-modal-confirm-content"
|
||||
>
|
||||
A good news!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-confirm-btns"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
|
||||
role="dialog"
|
||||
style="width: 300px; height: 200px;"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-confirm-body-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-confirm-body"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-modal-confirm-title"
|
||||
>
|
||||
Confirm This?
|
||||
</span>
|
||||
<div
|
||||
class="ant-modal-confirm-content"
|
||||
>
|
||||
Some descriptions.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-confirm-btns"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width: 0px; height: 0px; overflow: hidden; outline: none;"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/modal/demo/confirm.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
|
||||
@ -33,6 +33,332 @@ exports[`renders components/modal/demo/button-props.tsx correctly 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders components/modal/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
style="display:flex;flex-direction:column;row-gap:16px"
|
||||
>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel"
|
||||
role="dialog"
|
||||
style="width:100%;height:200px"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-modal-close-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-header"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-footer"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel"
|
||||
role="dialog"
|
||||
style="width:100%;height:200px"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="ant-modal-close"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-modal-close-x"
|
||||
>
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-modal-close-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
class="ant-modal-header"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-title"
|
||||
>
|
||||
Hello World!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
Hello World?!
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-footer"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-success"
|
||||
role="dialog"
|
||||
style="width:200px;height:150px"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-confirm-body-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-confirm-body"
|
||||
>
|
||||
<span
|
||||
aria-label="check-circle"
|
||||
class="anticon anticon-check-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<div
|
||||
class="ant-modal-confirm-content"
|
||||
>
|
||||
A good news!
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-confirm-btns"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="ant-modal ant-modal-pure-panel ant-modal-confirm ant-modal-confirm-confirm"
|
||||
role="dialog"
|
||||
style="width:300px;height:200px"
|
||||
>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="ant-modal-content"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-body"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-confirm-body-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-modal-confirm-body"
|
||||
>
|
||||
<span
|
||||
aria-label="exclamation-circle"
|
||||
class="anticon anticon-exclamation-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="exclamation-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="ant-modal-confirm-title"
|
||||
>
|
||||
Confirm This?
|
||||
</span>
|
||||
<div
|
||||
class="ant-modal-confirm-content"
|
||||
>
|
||||
Some descriptions.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-modal-confirm-btns"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Cancel
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OK
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style="width:0;height:0;overflow:hidden;outline:none"
|
||||
tabindex="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/modal/demo/confirm.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
|
||||
7
components/modal/demo/component-token.md
Normal file
7
components/modal/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug.
|
||||
39
components/modal/demo/component-token.tsx
Normal file
39
components/modal/demo/component-token.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { ConfigProvider, Modal } from 'antd';
|
||||
|
||||
/** Test usage. Do not use in your production. */
|
||||
const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Modal: {
|
||||
footerBg: '#f6ffed',
|
||||
contentBg: '#e6fffb',
|
||||
headerBg: '#f9f0ff',
|
||||
titleLineHeight: 3,
|
||||
titleFontSize: 12,
|
||||
titleColor: '#1d39c4',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
|
||||
<InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
|
||||
Hello World?!
|
||||
</InternalPanel>
|
||||
<ConfigProvider theme={{ token: { wireframe: true } }}>
|
||||
<InternalPanel title="Hello World!" style={{ width: '100%', height: 200 }}>
|
||||
Hello World?!
|
||||
</InternalPanel>
|
||||
</ConfigProvider>
|
||||
<InternalPanel type="success" style={{ width: 200, height: 150 }}>
|
||||
A good news!
|
||||
</InternalPanel>
|
||||
<InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>
|
||||
Some descriptions.
|
||||
</InternalPanel>
|
||||
</div>
|
||||
</ConfigProvider>
|
||||
);
|
||||
@ -36,6 +36,7 @@ Additionally, if you need show a simple confirmation dialog, you can use [`App.u
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/custom-mouse-position.tsx" debug>Control modal's animation origin position</code>
|
||||
<code src="./demo/wireframe.tsx" debug>Wireframe</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -37,6 +37,7 @@ demo:
|
||||
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
||||
<code src="./demo/custom-mouse-position.tsx" debug>控制弹框动画原点</code>
|
||||
<code src="./demo/wireframe.tsx" debug>线框风格</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -8,15 +8,12 @@ import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'
|
||||
/** Component only token. Which will handle additional calculation of alias token */
|
||||
export interface ComponentToken {
|
||||
// Component token here
|
||||
modalHeaderBg: string;
|
||||
modalHeaderTitleLineHeight: number;
|
||||
modalHeaderTitleFontSize: number;
|
||||
modalHeadingColor: string;
|
||||
modalCloseIconColor: string;
|
||||
modalContentBg: string;
|
||||
modalFooterBg: string;
|
||||
modalCloseBtnSize: number;
|
||||
modalConfirmIconSize: number;
|
||||
headerBg: string;
|
||||
titleLineHeight: number;
|
||||
titleFontSize: number;
|
||||
titleColor: string;
|
||||
contentBg: string;
|
||||
footerBg: string;
|
||||
}
|
||||
|
||||
export interface ModalToken extends FullToken<'Modal'> {
|
||||
@ -33,6 +30,9 @@ export interface ModalToken extends FullToken<'Modal'> {
|
||||
modalFooterPaddingHorizontal: number;
|
||||
modalFooterBorderWidth: number;
|
||||
modalIconHoverColor: string;
|
||||
modalCloseIconColor: string;
|
||||
modalCloseBtnSize: number;
|
||||
modalConfirmIconSize: number;
|
||||
}
|
||||
|
||||
function box(position: React.CSSProperties['position']): React.CSSProperties {
|
||||
@ -155,16 +155,16 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
|
||||
[`${componentCls}-title`]: {
|
||||
margin: 0,
|
||||
color: token.modalHeadingColor,
|
||||
color: token.titleColor,
|
||||
fontWeight: token.fontWeightStrong,
|
||||
fontSize: token.modalHeaderTitleFontSize,
|
||||
lineHeight: token.modalHeaderTitleLineHeight,
|
||||
fontSize: token.titleFontSize,
|
||||
lineHeight: token.titleLineHeight,
|
||||
wordWrap: 'break-word',
|
||||
},
|
||||
|
||||
[`${componentCls}-content`]: {
|
||||
position: 'relative',
|
||||
backgroundColor: token.modalContentBg,
|
||||
backgroundColor: token.contentBg,
|
||||
backgroundClip: 'padding-box',
|
||||
border: 0,
|
||||
borderRadius: token.borderRadiusLG,
|
||||
@ -185,19 +185,19 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
textDecoration: 'none',
|
||||
background: 'transparent',
|
||||
borderRadius: token.borderRadiusSM,
|
||||
width: token.modalConfirmIconSize,
|
||||
height: token.modalConfirmIconSize,
|
||||
width: token.modalCloseBtnSize,
|
||||
height: token.modalCloseBtnSize,
|
||||
border: 0,
|
||||
outline: 0,
|
||||
cursor: 'pointer',
|
||||
transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
|
||||
|
||||
'&-x': {
|
||||
display: 'block',
|
||||
display: 'flex',
|
||||
fontSize: token.fontSizeLG,
|
||||
fontStyle: 'normal',
|
||||
lineHeight: `${token.modalCloseBtnSize}px`,
|
||||
textAlign: 'center',
|
||||
justifyContent: 'center',
|
||||
textTransform: 'none',
|
||||
textRendering: 'auto',
|
||||
},
|
||||
@ -217,7 +217,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
|
||||
[`${componentCls}-header`]: {
|
||||
color: token.colorText,
|
||||
background: token.modalHeaderBg,
|
||||
background: token.headerBg,
|
||||
borderRadius: `${token.borderRadiusLG}px ${token.borderRadiusLG}px 0 0`,
|
||||
marginBottom: token.marginXS,
|
||||
},
|
||||
@ -230,7 +230,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
|
||||
[`${componentCls}-footer`]: {
|
||||
textAlign: 'end',
|
||||
background: token.modalFooterBg,
|
||||
background: token.footerBg,
|
||||
marginTop: token.marginSM,
|
||||
|
||||
[`${token.antCls}-btn + ${token.antCls}-btn:not(${token.antCls}-dropdown-trigger)`]: {
|
||||
@ -297,8 +297,8 @@ const genModalConfirmStyle: GenerateStyle<ModalToken> = (token) => {
|
||||
overflow: 'hidden',
|
||||
color: token.colorTextHeading,
|
||||
fontWeight: token.fontWeightStrong,
|
||||
fontSize: token.modalHeaderTitleFontSize,
|
||||
lineHeight: token.modalHeaderTitleLineHeight,
|
||||
fontSize: token.titleFontSize,
|
||||
lineHeight: token.titleLineHeight,
|
||||
|
||||
[`+ ${confirmComponentCls}-content`]: {
|
||||
marginBlockStart: token.marginXS,
|
||||
@ -442,6 +442,9 @@ export default genComponentStyleHook(
|
||||
modalFooterPaddingHorizontal: token.padding,
|
||||
modalFooterBorderWidth: token.lineWidth,
|
||||
modalIconHoverColor: token.colorIconHover,
|
||||
modalCloseIconColor: token.colorIcon,
|
||||
modalCloseBtnSize: token.fontSize * token.lineHeight,
|
||||
modalConfirmIconSize: token.fontSize * token.lineHeight,
|
||||
});
|
||||
return [
|
||||
genModalStyle(modalToken),
|
||||
@ -453,14 +456,11 @@ export default genComponentStyleHook(
|
||||
];
|
||||
},
|
||||
(token) => ({
|
||||
modalFooterBg: 'transparent',
|
||||
modalHeaderBg: token.colorBgElevated,
|
||||
modalHeaderTitleLineHeight: token.lineHeightHeading5,
|
||||
modalHeaderTitleFontSize: token.fontSizeHeading5,
|
||||
modalContentBg: token.colorBgElevated,
|
||||
modalHeadingColor: token.colorTextHeading,
|
||||
modalCloseIconColor: token.colorTextDescription,
|
||||
modalConfirmIconSize: token.fontSize * token.lineHeight,
|
||||
modalCloseBtnSize: token.fontSize * token.lineHeight,
|
||||
footerBg: 'transparent',
|
||||
headerBg: token.colorBgElevated,
|
||||
titleLineHeight: token.lineHeightHeading5,
|
||||
titleFontSize: token.fontSizeHeading5,
|
||||
contentBg: token.colorBgElevated,
|
||||
titleColor: token.colorTextHeading,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -9,6 +9,10 @@ import genNotificationPlacementStyle from './placement';
|
||||
export interface ComponentToken {
|
||||
zIndexPopup: number;
|
||||
width: number;
|
||||
}
|
||||
|
||||
export interface NotificationToken extends FullToken<'Notification'> {
|
||||
animationMaxHeight: number;
|
||||
notificationBg: string;
|
||||
notificationPadding: string;
|
||||
notificationPaddingVertical: number;
|
||||
@ -19,10 +23,6 @@ export interface ComponentToken {
|
||||
notificationMarginEdge: number;
|
||||
}
|
||||
|
||||
export interface NotificationToken extends FullToken<'Notification'> {
|
||||
animationMaxHeight: number;
|
||||
}
|
||||
|
||||
const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
const {
|
||||
iconCls,
|
||||
@ -268,20 +268,11 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook(
|
||||
'Notification',
|
||||
(token) => {
|
||||
const notificationToken = mergeToken<NotificationToken>(token, {
|
||||
// index.less variables
|
||||
animationMaxHeight: 150,
|
||||
});
|
||||
|
||||
return [genNotificationStyle(notificationToken)];
|
||||
},
|
||||
(token) => {
|
||||
const notificationPaddingVertical = token.paddingMD;
|
||||
const notificationPaddingHorizontal = token.paddingLG;
|
||||
return {
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
width: 384,
|
||||
const notificationToken = mergeToken<NotificationToken>(token, {
|
||||
// index.less variables
|
||||
notificationBg: token.colorBgElevated,
|
||||
notificationPaddingVertical,
|
||||
notificationPaddingHorizontal,
|
||||
@ -290,6 +281,13 @@ export default genComponentStyleHook(
|
||||
notificationMarginBottom: token.margin,
|
||||
notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
|
||||
notificationMarginEdge: token.marginLG,
|
||||
};
|
||||
animationMaxHeight: 150,
|
||||
});
|
||||
|
||||
return [genNotificationStyle(notificationToken)];
|
||||
},
|
||||
(token) => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
width: 384,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -1022,6 +1022,66 @@ exports[`renders components/result/demo/500.tsx extend context correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/result/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-result ant-result-success"
|
||||
>
|
||||
<div
|
||||
class="ant-result-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="check-circle"
|
||||
class="anticon anticon-check-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-result-title"
|
||||
>
|
||||
Successfully Purchased Cloud Server ECS!
|
||||
</div>
|
||||
<div
|
||||
class="ant-result-subtitle"
|
||||
>
|
||||
Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
|
||||
</div>
|
||||
<div
|
||||
class="ant-result-extra"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Go Console
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Buy Again
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/result/demo/customIcon.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-result ant-result-info"
|
||||
|
||||
@ -1022,6 +1022,66 @@ exports[`renders components/result/demo/500.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/result/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-result ant-result-success"
|
||||
>
|
||||
<div
|
||||
class="ant-result-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="check-circle"
|
||||
class="anticon anticon-check-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-result-title"
|
||||
>
|
||||
Successfully Purchased Cloud Server ECS!
|
||||
</div>
|
||||
<div
|
||||
class="ant-result-subtitle"
|
||||
>
|
||||
Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.
|
||||
</div>
|
||||
<div
|
||||
class="ant-result-extra"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Go Console
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-btn ant-btn-default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Buy Again
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/result/demo/customIcon.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-result ant-result-info"
|
||||
|
||||
7
components/result/demo/component-token.md
Normal file
7
components/result/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug.
|
||||
31
components/result/demo/component-token.tsx
Normal file
31
components/result/demo/component-token.tsx
Normal file
@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import { Button, ConfigProvider, Result } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Result: {
|
||||
titleFontSize: 18,
|
||||
subtitleFontSize: 14,
|
||||
iconFontSize: 48,
|
||||
extraMargin: `12px 0 0 0`,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Result
|
||||
status="success"
|
||||
title="Successfully Purchased Cloud Server ECS!"
|
||||
subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
|
||||
extra={[
|
||||
<Button type="primary" key="console">
|
||||
Go Console
|
||||
</Button>,
|
||||
<Button key="buy">Buy Again</Button>,
|
||||
]}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -23,6 +23,7 @@ Use when important operations need to inform the user to process the results and
|
||||
<code src="./demo/500.tsx">500</code>
|
||||
<code src="./demo/error.tsx">Error</code>
|
||||
<code src="./demo/customIcon.tsx">Custom icon</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -24,6 +24,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA
|
||||
<code src="./demo/500.tsx">500</code>
|
||||
<code src="./demo/error.tsx">Error</code>
|
||||
<code src="./demo/customIcon.tsx">自定义 icon</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -1,25 +1,24 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { CSSProperties } from 'react';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
titleFontSize: number;
|
||||
subtitleFontSize: number;
|
||||
iconFontSize: number;
|
||||
extraMargin: CSSProperties['margin'];
|
||||
}
|
||||
|
||||
interface ResultToken extends FullToken<'Result'> {
|
||||
imageWidth: number;
|
||||
imageHeight: number;
|
||||
|
||||
resultTitleFontSize: number;
|
||||
resultSubtitleFontSize: number;
|
||||
resultIconFontSize: number;
|
||||
|
||||
resultExtraMargin: string;
|
||||
|
||||
resultInfoIconColor: string;
|
||||
resultSuccessIconColor: string;
|
||||
resultWarningIconColor: string;
|
||||
resultErrorIconColor: string;
|
||||
}
|
||||
|
||||
interface ResultToken extends FullToken<'Result'> {}
|
||||
|
||||
// ============================== Styles ==============================
|
||||
const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
|
||||
const {
|
||||
@ -57,13 +56,13 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
|
||||
textAlign: 'center',
|
||||
|
||||
[`& > ${iconCls}`]: {
|
||||
fontSize: token.resultIconFontSize,
|
||||
fontSize: token.iconFontSize,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls} ${componentCls}-title`]: {
|
||||
color: token.colorTextHeading,
|
||||
fontSize: token.resultTitleFontSize,
|
||||
fontSize: token.titleFontSize,
|
||||
lineHeight: lineHeightHeading3,
|
||||
marginBlock: marginXS,
|
||||
textAlign: 'center',
|
||||
@ -71,7 +70,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
|
||||
|
||||
[`${componentCls} ${componentCls}-subtitle`]: {
|
||||
color: token.colorTextDescription,
|
||||
fontSize: token.resultSubtitleFontSize,
|
||||
fontSize: token.subtitleFontSize,
|
||||
lineHeight,
|
||||
textAlign: 'center',
|
||||
},
|
||||
@ -83,7 +82,7 @@ const genBaseStyle: GenerateStyle<ResultToken> = (token): CSSObject => {
|
||||
},
|
||||
|
||||
[`${componentCls} ${componentCls}-extra`]: {
|
||||
margin: token.resultExtraMargin,
|
||||
margin: token.extraMargin,
|
||||
textAlign: 'center',
|
||||
|
||||
'& > *': {
|
||||
@ -127,32 +126,26 @@ const getStyle: GenerateStyle<ResultToken> = (token) => genResultStyle(token);
|
||||
export default genComponentStyleHook(
|
||||
'Result',
|
||||
(token) => {
|
||||
const resultToken = mergeToken<ResultToken>(token, {});
|
||||
|
||||
return [getStyle(resultToken)];
|
||||
},
|
||||
(token) => {
|
||||
const { paddingLG, fontSizeHeading3 } = token;
|
||||
|
||||
const resultSubtitleFontSize = token.fontSize;
|
||||
const resultExtraMargin = `${paddingLG}px 0 0 0`;
|
||||
|
||||
const resultInfoIconColor = token.colorInfo;
|
||||
const resultErrorIconColor = token.colorError;
|
||||
const resultSuccessIconColor = token.colorSuccess;
|
||||
const resultWarningIconColor = token.colorWarning;
|
||||
return {
|
||||
imageWidth: 250,
|
||||
imageHeight: 295,
|
||||
|
||||
resultTitleFontSize: fontSizeHeading3,
|
||||
resultSubtitleFontSize,
|
||||
resultIconFontSize: fontSizeHeading3 * 3,
|
||||
resultExtraMargin,
|
||||
const resultToken = mergeToken<ResultToken>(token, {
|
||||
resultInfoIconColor,
|
||||
resultErrorIconColor,
|
||||
resultSuccessIconColor,
|
||||
resultWarningIconColor,
|
||||
};
|
||||
imageWidth: 250,
|
||||
imageHeight: 295,
|
||||
});
|
||||
|
||||
return [getStyle(resultToken)];
|
||||
},
|
||||
(token) => ({
|
||||
titleFontSize: token.fontSizeHeading3,
|
||||
subtitleFontSize: token.fontSize,
|
||||
iconFontSize: token.fontSizeHeading3 * 3,
|
||||
extraMargin: `${token.paddingLG}px 0 0 0`,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -305,6 +305,107 @@ exports[`renders components/statistic/demo/card.tsx extend context correctly 1`]
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/statistic/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left: -8px; margin-right: -8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
style="padding-left: 8px; padding-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
>
|
||||
<span
|
||||
class="ant-statistic-content-value"
|
||||
>
|
||||
<span
|
||||
class="ant-statistic-content-value-int"
|
||||
>
|
||||
112,893
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
style="padding-left: 8px; padding-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
>
|
||||
<span
|
||||
class="ant-statistic-content-value"
|
||||
>
|
||||
<span
|
||||
class="ant-statistic-content-value-int"
|
||||
>
|
||||
112,893
|
||||
</span>
|
||||
<span
|
||||
class="ant-statistic-content-value-decimal"
|
||||
>
|
||||
.00
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
style="margin-top: 16px;"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Recharge
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
style="padding-left: 8px; padding-right: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-statistic-skeleton"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-content"
|
||||
>
|
||||
<h3
|
||||
class="ant-skeleton-title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/statistic/demo/countdown.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-row"
|
||||
|
||||
@ -301,6 +301,107 @@ exports[`renders components/statistic/demo/card.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/statistic/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-row"
|
||||
style="margin-left:-8px;margin-right:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
>
|
||||
<span
|
||||
class="ant-statistic-content-value"
|
||||
>
|
||||
<span
|
||||
class="ant-statistic-content-value-int"
|
||||
>
|
||||
112,893
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Account Balance (CNY)
|
||||
</div>
|
||||
<div
|
||||
class="ant-statistic-content"
|
||||
>
|
||||
<span
|
||||
class="ant-statistic-content-value"
|
||||
>
|
||||
<span
|
||||
class="ant-statistic-content-value-int"
|
||||
>
|
||||
112,893
|
||||
</span>
|
||||
<span
|
||||
class="ant-statistic-content-value-decimal"
|
||||
>
|
||||
.00
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
style="margin-top:16px"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
Recharge
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="ant-col ant-col-12"
|
||||
style="padding-left:8px;padding-right:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic"
|
||||
>
|
||||
<div
|
||||
class="ant-statistic-title"
|
||||
>
|
||||
Active Users
|
||||
</div>
|
||||
<div
|
||||
class="ant-skeleton ant-statistic-skeleton"
|
||||
>
|
||||
<div
|
||||
class="ant-skeleton-content"
|
||||
>
|
||||
<h3
|
||||
class="ant-skeleton-title"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/statistic/demo/countdown.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-row"
|
||||
|
||||
7
components/statistic/demo/component-token.md
Normal file
7
components/statistic/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug.
|
||||
32
components/statistic/demo/component-token.tsx
Normal file
32
components/statistic/demo/component-token.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import { Button, Col, ConfigProvider, Row, Statistic } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Statistic: {
|
||||
titleFontSize: 20,
|
||||
contentFontSize: 20,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={12}>
|
||||
<Statistic title="Active Users" value={112893} />
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Statistic title="Account Balance (CNY)" value={112893} precision={2} />
|
||||
<Button style={{ marginTop: 16 }} type="primary">
|
||||
Recharge
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Statistic title="Active Users" value={112893} loading />
|
||||
</Col>
|
||||
</Row>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -23,6 +23,7 @@ Display statistic number.
|
||||
<code src="./demo/animated.tsx">Animated number</code>
|
||||
<code src="./demo/card.tsx" background="grey">In Card</code>
|
||||
<code src="./demo/countdown.tsx">Countdown</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -24,6 +24,7 @@ demo:
|
||||
<code src="./demo/animated.tsx">动画效果</code>
|
||||
<code src="./demo/card.tsx" background="grey">在卡片中使用</code>
|
||||
<code src="./demo/countdown.tsx">倒计时</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -4,9 +4,8 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {
|
||||
statisticTitleFontSize: number;
|
||||
statisticContentFontSize: number;
|
||||
statisticFontFamily: string;
|
||||
titleFontSize: number;
|
||||
contentFontSize: number;
|
||||
}
|
||||
|
||||
interface StatisticToken extends FullToken<'Statistic'> {}
|
||||
@ -17,10 +16,10 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
|
||||
marginXXS,
|
||||
padding,
|
||||
colorTextDescription,
|
||||
statisticTitleFontSize,
|
||||
titleFontSize,
|
||||
colorTextHeading,
|
||||
statisticContentFontSize,
|
||||
statisticFontFamily,
|
||||
contentFontSize,
|
||||
fontFamily,
|
||||
} = token;
|
||||
|
||||
return {
|
||||
@ -29,7 +28,7 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
|
||||
[`${componentCls}-title`]: {
|
||||
marginBottom: marginXXS,
|
||||
color: colorTextDescription,
|
||||
fontSize: statisticTitleFontSize,
|
||||
fontSize: titleFontSize,
|
||||
},
|
||||
|
||||
[`${componentCls}-skeleton`]: {
|
||||
@ -38,8 +37,8 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
|
||||
|
||||
[`${componentCls}-content`]: {
|
||||
color: colorTextHeading,
|
||||
fontSize: statisticContentFontSize,
|
||||
fontFamily: statisticFontFamily,
|
||||
fontSize: contentFontSize,
|
||||
fontFamily,
|
||||
[`${componentCls}-content-value`]: {
|
||||
display: 'inline-block',
|
||||
direction: 'ltr',
|
||||
@ -66,11 +65,10 @@ export default genComponentStyleHook(
|
||||
return [genStatisticStyle(statisticToken)];
|
||||
},
|
||||
(token) => {
|
||||
const { fontSizeHeading3, fontSize, fontFamily } = token;
|
||||
const { fontSizeHeading3, fontSize } = token;
|
||||
return {
|
||||
statisticTitleFontSize: fontSize,
|
||||
statisticContentFontSize: fontSizeHeading3,
|
||||
statisticFontFamily: fontFamily,
|
||||
titleFontSize: fontSize,
|
||||
contentFontSize: fontSizeHeading3,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
@ -233,6 +233,717 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/steps/demo/component-token.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-steps ant-steps-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="check"
|
||||
class="anticon anticon-check ant-steps-finish-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Finished
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
In Progress
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="Left 00:00:08"
|
||||
>
|
||||
Left 00:00:08
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Waiting
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-steps ant-steps-vertical ant-steps-small"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="check"
|
||||
class="anticon anticon-check ant-steps-finish-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Finished
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
In Progress
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="Left 00:00:08"
|
||||
>
|
||||
Left 00:00:08
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Waiting
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-steps ant-steps-vertical"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-custom ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Login
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-custom"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="solution"
|
||||
class="anticon anticon-solution"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="solution"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M688 264c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48zm-8 136H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM480 544H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm-48 308H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm356.8-74.4c29-26.3 47.2-64.3 47.2-106.6 0-79.5-64.5-144-144-144s-144 64.5-144 144c0 42.3 18.2 80.3 47.2 106.6-57 32.5-96.2 92.7-99.2 162.1-.2 4.5 3.5 8.3 8 8.3h48.1c4.2 0 7.7-3.3 8-7.6C564 871.2 621.7 816 692 816s128 55.2 131.9 124.4c.2 4.2 3.7 7.6 8 7.6H880c4.6 0 8.2-3.8 8-8.3-2.9-69.5-42.2-129.6-99.2-162.1zM692 591c44.2 0 80 35.8 80 80s-35.8 80-80 80-80-35.8-80-80 35.8-80 80-80z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Verification
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-custom"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Pay
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait ant-steps-item-custom"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Done
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-steps ant-steps-vertical ant-steps-dot"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon-dot"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Finished
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon-dot"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
In Progress
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon-dot"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Waiting
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-steps ant-steps-vertical ant-steps-navigation"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="check"
|
||||
class="anticon anticon-check ant-steps-finish-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Step 1
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="00:00:05"
|
||||
>
|
||||
00:00:05
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Step 2
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="00:01:02"
|
||||
>
|
||||
00:01:02
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Step 3
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="waiting for longlong time"
|
||||
>
|
||||
waiting for longlong time
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/steps/demo/customized-progress-dot.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-steps ant-steps-vertical ant-steps-dot"
|
||||
|
||||
@ -233,6 +233,717 @@ Array [
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/steps/demo/component-token.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="check"
|
||||
class="anticon anticon-check ant-steps-finish-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Finished
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
In Progress
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="Left 00:00:08"
|
||||
>
|
||||
Left 00:00:08
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Waiting
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="check"
|
||||
class="anticon anticon-check ant-steps-finish-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Finished
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
In Progress
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="Left 00:00:08"
|
||||
>
|
||||
Left 00:00:08
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Waiting
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-custom ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Login
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish ant-steps-item-custom"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="solution"
|
||||
class="anticon anticon-solution"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="solution"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M688 264c0-4.4-3.6-8-8-8H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48zm-8 136H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM480 544H296c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zm-48 308H208V148h560v344c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V108c0-17.7-14.3-32-32-32H168c-17.7 0-32 14.3-32 32v784c0 17.7 14.3 32 32 32h264c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm356.8-74.4c29-26.3 47.2-64.3 47.2-106.6 0-79.5-64.5-144-144-144s-144 64.5-144 144c0 42.3 18.2 80.3 47.2 106.6-57 32.5-96.2 92.7-99.2 162.1-.2 4.5 3.5 8.3 8 8.3h48.1c4.2 0 7.7-3.3 8-7.6C564 871.2 621.7 816 692 816s128 55.2 131.9 124.4c.2 4.2 3.7 7.6 8 7.6H880c4.6 0 8.2-3.8 8-8.3-2.9-69.5-42.2-129.6-99.2-162.1zM692 591c44.2 0 80 35.8 80 80s-35.8 80-80 80-80-35.8-80-80 35.8-80 80-80z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Verification
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-custom"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="loading"
|
||||
class="anticon anticon-loading anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Pay
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait ant-steps-item-custom"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Done
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon-dot"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Finished
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon-dot"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
In Progress
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon-dot"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Waiting
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-label-horizontal ant-steps-navigation"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-finish"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="check"
|
||||
class="anticon anticon-check ant-steps-finish-icon"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="check"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Step 1
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="00:00:05"
|
||||
>
|
||||
00:00:05
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-process ant-steps-item-active"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Step 2
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="00:01:02"
|
||||
>
|
||||
00:01:02
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item ant-steps-item-wait"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-container"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-tail"
|
||||
/>
|
||||
<div
|
||||
class="ant-steps-item-icon"
|
||||
>
|
||||
<span
|
||||
class="ant-steps-icon"
|
||||
>
|
||||
3
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-content"
|
||||
>
|
||||
<div
|
||||
class="ant-steps-item-title"
|
||||
>
|
||||
Step 3
|
||||
<div
|
||||
class="ant-steps-item-subtitle"
|
||||
title="waiting for longlong time"
|
||||
>
|
||||
waiting for longlong time
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-steps-item-description"
|
||||
>
|
||||
This is a description.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/steps/demo/customized-progress-dot.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-steps ant-steps-horizontal ant-steps-label-vertical ant-steps-dot"
|
||||
|
||||
7
components/steps/demo/component-token.md
Normal file
7
components/steps/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug.
|
||||
134
components/steps/demo/component-token.tsx
Normal file
134
components/steps/demo/component-token.tsx
Normal file
@ -0,0 +1,134 @@
|
||||
import React from 'react';
|
||||
import { ConfigProvider, Steps } from 'antd';
|
||||
import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
|
||||
|
||||
const description = 'This is a description.';
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Steps: {
|
||||
titleLineHeight: 20,
|
||||
customIconSize: 40,
|
||||
customIconTop: 0,
|
||||
customIconFontSize: 32,
|
||||
iconSize: 20,
|
||||
iconTop: 0, // magic for ui experience
|
||||
iconFontSize: 12,
|
||||
iconSizeSM: 16,
|
||||
dotSize: 20,
|
||||
dotCurrentSize: 24,
|
||||
navArrowColor: '#163CFF',
|
||||
navContentMaxWidth: 100,
|
||||
descriptionMaxWidth: 100,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Steps
|
||||
current={1}
|
||||
items={[
|
||||
{
|
||||
title: 'Finished',
|
||||
description,
|
||||
},
|
||||
{
|
||||
title: 'In Progress',
|
||||
description,
|
||||
subTitle: 'Left 00:00:08',
|
||||
},
|
||||
{
|
||||
title: 'Waiting',
|
||||
description,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Steps
|
||||
size="small"
|
||||
current={1}
|
||||
items={[
|
||||
{
|
||||
title: 'Finished',
|
||||
description,
|
||||
},
|
||||
{
|
||||
title: 'In Progress',
|
||||
description,
|
||||
subTitle: 'Left 00:00:08',
|
||||
},
|
||||
{
|
||||
title: 'Waiting',
|
||||
description,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Steps
|
||||
items={[
|
||||
{
|
||||
title: 'Login',
|
||||
status: 'finish',
|
||||
icon: <UserOutlined />,
|
||||
},
|
||||
{
|
||||
title: 'Verification',
|
||||
status: 'finish',
|
||||
icon: <SolutionOutlined />,
|
||||
},
|
||||
{
|
||||
title: 'Pay',
|
||||
status: 'process',
|
||||
icon: <LoadingOutlined />,
|
||||
},
|
||||
{
|
||||
title: 'Done',
|
||||
status: 'wait',
|
||||
icon: <SmileOutlined />,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Steps
|
||||
progressDot
|
||||
current={1}
|
||||
items={[
|
||||
{
|
||||
title: 'Finished',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'In Progress',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'Waiting',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Steps
|
||||
type="navigation"
|
||||
current={1}
|
||||
items={[
|
||||
{
|
||||
title: 'Step 1',
|
||||
subTitle: '00:00:05',
|
||||
status: 'finish',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'Step 2',
|
||||
subTitle: '00:01:02',
|
||||
status: 'process',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
{
|
||||
title: 'Step 3',
|
||||
subTitle: 'waiting for longlong time',
|
||||
status: 'wait',
|
||||
description: 'This is a description.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -33,6 +33,7 @@ When a given task is complicated or has a certain sequence in the series of subt
|
||||
<code src="./demo/steps-in-steps.tsx" debug>Steps inside Steps</code>
|
||||
<code src="./demo/inline.tsx">Inline Steps</code>
|
||||
<code src="./demo/wireframe.tsx" debug>Wireframe</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -34,6 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA
|
||||
<code src="./demo/steps-in-steps.tsx" debug>Steps 嵌套 Steps</code>
|
||||
<code src="./demo/inline.tsx">内联步骤</code>
|
||||
<code src="./demo/wireframe.tsx" debug>线框风格</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const { componentCls, stepsIconCustomTop, stepsIconCustomSize, stepsIconCustomFontSize } = token;
|
||||
const { componentCls, customIconTop, customIconSize, customIconFontSize } = token;
|
||||
|
||||
return {
|
||||
[`${componentCls}-item-custom`]: {
|
||||
@ -12,11 +12,11 @@ const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = (token) =>
|
||||
background: 'none',
|
||||
border: 0,
|
||||
[`> ${componentCls}-icon`]: {
|
||||
top: stepsIconCustomTop,
|
||||
width: stepsIconCustomSize,
|
||||
height: stepsIconCustomSize,
|
||||
fontSize: stepsIconCustomFontSize,
|
||||
lineHeight: `${stepsIconCustomSize}px`,
|
||||
top: customIconTop,
|
||||
width: customIconSize,
|
||||
height: customIconSize,
|
||||
fontSize: customIconFontSize,
|
||||
lineHeight: `${customIconFontSize}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
@ -13,25 +14,24 @@ import genStepsSmallStyle from './small';
|
||||
import genStepsVerticalStyle from './vertical';
|
||||
|
||||
export interface ComponentToken {
|
||||
descriptionWidth: number;
|
||||
processTailColor: string;
|
||||
stepsNavArrowColor: string;
|
||||
stepsIconSize: number;
|
||||
stepsIconCustomSize: number;
|
||||
stepsIconCustomTop: number;
|
||||
stepsIconCustomFontSize: number;
|
||||
stepsIconTop: number;
|
||||
stepsIconFontSize: number;
|
||||
stepsDotSize: number;
|
||||
stepsCurrentDotSize: number;
|
||||
stepsNavContentMaxWidth: string;
|
||||
stepsSmallIconSize: number;
|
||||
descriptionMaxWidth: number;
|
||||
customIconSize: number;
|
||||
customIconTop: number;
|
||||
customIconFontSize: number;
|
||||
iconSize: number;
|
||||
iconTop: number;
|
||||
iconFontSize: number;
|
||||
dotSize: number;
|
||||
dotCurrentSize: number;
|
||||
navArrowColor: string;
|
||||
navContentMaxWidth: CSSProperties['maxWidth'];
|
||||
iconSizeSM: number;
|
||||
titleLineHeight: number;
|
||||
}
|
||||
|
||||
export interface StepsToken extends FullToken<'Steps'> {
|
||||
// Steps variable default.less
|
||||
processTailColor: string;
|
||||
stepsTitleLineHeight: number;
|
||||
// Steps component less variable
|
||||
processIconColor: string;
|
||||
processTitleColor: string;
|
||||
@ -143,29 +143,29 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
verticalAlign: 'top',
|
||||
},
|
||||
[`${stepsItemCls}-icon`]: {
|
||||
width: token.stepsIconSize,
|
||||
height: token.stepsIconSize,
|
||||
width: token.iconSize,
|
||||
height: token.iconSize,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
marginInlineStart: 0,
|
||||
marginInlineEnd: token.marginXS,
|
||||
fontSize: token.stepsIconFontSize,
|
||||
fontSize: token.iconFontSize,
|
||||
fontFamily: token.fontFamily,
|
||||
lineHeight: `${token.stepsIconSize}px`,
|
||||
lineHeight: `${token.iconSize}px`,
|
||||
textAlign: 'center',
|
||||
borderRadius: token.stepsIconSize,
|
||||
borderRadius: token.iconSize,
|
||||
border: `${token.lineWidth}px ${token.lineType} transparent`,
|
||||
transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
|
||||
[`${componentCls}-icon`]: {
|
||||
position: 'relative',
|
||||
top: token.stepsIconTop,
|
||||
top: token.iconTop,
|
||||
color: token.colorPrimary,
|
||||
lineHeight: 1,
|
||||
},
|
||||
},
|
||||
[`${stepsItemCls}-tail`]: {
|
||||
position: 'absolute',
|
||||
top: token.stepsIconSize / 2 - token.paddingXXS,
|
||||
top: token.iconSize / 2 - token.paddingXXS,
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
|
||||
@ -185,11 +185,11 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
paddingInlineEnd: token.padding,
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSizeLG,
|
||||
lineHeight: `${token.stepsTitleLineHeight}px`,
|
||||
lineHeight: `${token.titleLineHeight}px`,
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: token.stepsTitleLineHeight / 2,
|
||||
top: token.titleLineHeight / 2,
|
||||
insetInlineStart: '100%',
|
||||
display: 'block',
|
||||
width: 9999,
|
||||
@ -279,7 +279,7 @@ const genStepsClickableStyle: GenerateStyle<StepsToken, CSSObject> = (token) =>
|
||||
display: 'none',
|
||||
},
|
||||
'&-description': {
|
||||
maxWidth: token.descriptionWidth,
|
||||
maxWidth: token.descriptionMaxWidth,
|
||||
whiteSpace: 'normal',
|
||||
},
|
||||
},
|
||||
@ -353,6 +353,7 @@ export default genComponentStyleHook(
|
||||
processIconBgColor: colorPrimary,
|
||||
processIconBorderColor: colorPrimary,
|
||||
processDotColor: colorPrimary,
|
||||
processTailColor: colorSplit,
|
||||
waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
|
||||
waitTitleColor: colorTextDescription,
|
||||
waitDescriptionColor: colorTextDescription,
|
||||
@ -392,23 +393,21 @@ export default genComponentStyleHook(
|
||||
controlHeight,
|
||||
controlHeightLG,
|
||||
fontSizeHeading3,
|
||||
colorSplit,
|
||||
} = token;
|
||||
return {
|
||||
processTailColor: colorSplit,
|
||||
stepsNavArrowColor: colorTextDisabled,
|
||||
stepsIconSize: controlHeight,
|
||||
stepsTitleLineHeight: controlHeight,
|
||||
stepsIconCustomSize: controlHeight,
|
||||
stepsIconCustomTop: 0,
|
||||
stepsIconCustomFontSize: controlHeightSM,
|
||||
stepsIconTop: -0.5, // magic for ui experience
|
||||
stepsIconFontSize: fontSize,
|
||||
stepsDotSize: controlHeight / 4,
|
||||
descriptionWidth: 140,
|
||||
stepsCurrentDotSize: controlHeightLG / 4,
|
||||
stepsNavContentMaxWidth: 'auto',
|
||||
stepsSmallIconSize: fontSizeHeading3,
|
||||
titleLineHeight: controlHeight,
|
||||
customIconSize: controlHeight,
|
||||
customIconTop: 0,
|
||||
customIconFontSize: controlHeightSM,
|
||||
iconSize: controlHeight,
|
||||
iconTop: -0.5, // magic for ui experience
|
||||
iconFontSize: fontSize,
|
||||
iconSizeSM: fontSizeHeading3,
|
||||
dotSize: controlHeight / 4,
|
||||
dotCurrentSize: controlHeightLG / 4,
|
||||
navArrowColor: colorTextDisabled,
|
||||
navContentMaxWidth: 'auto',
|
||||
descriptionMaxWidth: 140,
|
||||
};
|
||||
},
|
||||
);
|
||||
|
||||
@ -3,7 +3,7 @@ import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token;
|
||||
const { componentCls, iconSize, lineHeight, iconSizeSM } = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-label-vertical`]: {
|
||||
@ -11,13 +11,13 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
|
||||
overflow: 'visible',
|
||||
|
||||
'&-tail': {
|
||||
marginInlineStart: stepsIconSize / 2 + token.controlHeightLG,
|
||||
marginInlineStart: iconSize / 2 + token.controlHeightLG,
|
||||
padding: `${token.paddingXXS}px ${token.paddingLG}px`,
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
display: 'block',
|
||||
width: (stepsIconSize / 2 + token.controlHeightLG) * 2,
|
||||
width: (iconSize / 2 + token.controlHeightLG) * 2,
|
||||
marginTop: token.marginSM,
|
||||
textAlign: 'center',
|
||||
},
|
||||
@ -46,7 +46,7 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = (token
|
||||
[`&${componentCls}-small:not(${componentCls}-dot)`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-icon': {
|
||||
marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2,
|
||||
marginInlineStart: token.controlHeightLG + (iconSize - iconSizeSM) / 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -6,8 +6,8 @@ import type { GenerateStyle } from '../../theme/internal';
|
||||
const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsNavContentMaxWidth,
|
||||
stepsNavArrowColor,
|
||||
navContentMaxWidth,
|
||||
navArrowColor,
|
||||
stepsNavActiveColor,
|
||||
motionDurationSlow,
|
||||
} = token;
|
||||
@ -37,7 +37,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
transition: `opacity ${motionDurationSlow}`,
|
||||
|
||||
[`${componentCls}-item-content`]: {
|
||||
maxWidth: stepsNavContentMaxWidth,
|
||||
maxWidth: navContentMaxWidth,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-title`]: {
|
||||
@ -76,10 +76,10 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
display: 'inline-block',
|
||||
width: token.fontSizeIcon,
|
||||
height: token.fontSizeIcon,
|
||||
borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
|
||||
borderTop: `${token.lineWidth}px ${token.lineType} ${navArrowColor}`,
|
||||
borderBottom: 'none',
|
||||
borderInlineStart: 'none',
|
||||
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
|
||||
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${navArrowColor}`,
|
||||
transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
|
||||
content: '""',
|
||||
},
|
||||
|
||||
@ -5,10 +5,10 @@ import type { GenerateStyle } from '../../theme/internal';
|
||||
const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
descriptionWidth,
|
||||
descriptionMaxWidth,
|
||||
lineHeight,
|
||||
stepsCurrentDotSize,
|
||||
stepsDotSize,
|
||||
dotCurrentSize,
|
||||
dotSize,
|
||||
motionDurationSlow,
|
||||
} = token;
|
||||
|
||||
@ -20,11 +20,11 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
|
||||
},
|
||||
|
||||
'&-tail': {
|
||||
top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2),
|
||||
top: Math.floor((token.dotSize - token.lineWidth * 3) / 2),
|
||||
width: '100%',
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
marginInline: `${descriptionWidth / 2}px 0`,
|
||||
marginInline: `${descriptionMaxWidth / 2}px 0`,
|
||||
padding: 0,
|
||||
|
||||
'&::after': {
|
||||
@ -34,11 +34,11 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
|
||||
},
|
||||
},
|
||||
'&-icon': {
|
||||
width: stepsDotSize,
|
||||
height: stepsDotSize,
|
||||
marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
|
||||
width: dotSize,
|
||||
height: dotSize,
|
||||
marginInlineStart: (token.descriptionMaxWidth - dotSize) / 2,
|
||||
paddingInlineEnd: 0,
|
||||
lineHeight: `${stepsDotSize}px`,
|
||||
lineHeight: `${dotSize}px`,
|
||||
background: 'transparent',
|
||||
border: 0,
|
||||
|
||||
@ -54,7 +54,7 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: -token.marginSM,
|
||||
insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
|
||||
insetInlineStart: (dotSize - token.controlHeightLG * 1.5) / 2,
|
||||
width: token.controlHeightLG * 1.5,
|
||||
height: token.controlHeight,
|
||||
background: 'transparent',
|
||||
@ -64,16 +64,16 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
width: descriptionWidth,
|
||||
width: descriptionMaxWidth,
|
||||
},
|
||||
[`&-process ${componentCls}-item-icon`]: {
|
||||
position: 'relative',
|
||||
top: (stepsDotSize - stepsCurrentDotSize) / 2,
|
||||
width: stepsCurrentDotSize,
|
||||
height: stepsCurrentDotSize,
|
||||
lineHeight: `${stepsCurrentDotSize}px`,
|
||||
top: (dotSize - dotCurrentSize) / 2,
|
||||
width: dotCurrentSize,
|
||||
height: dotCurrentSize,
|
||||
lineHeight: `${dotCurrentSize}px`,
|
||||
background: 'none',
|
||||
marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2,
|
||||
marginInlineStart: (token.descriptionMaxWidth - dotCurrentSize) / 2,
|
||||
},
|
||||
[`&-process ${componentCls}-icon`]: {
|
||||
[`&:first-child ${componentCls}-icon-dot`]: {
|
||||
@ -84,39 +84,39 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = (token) =
|
||||
},
|
||||
[`&${componentCls}-vertical${componentCls}-dot`]: {
|
||||
[`${componentCls}-item-icon`]: {
|
||||
marginTop: (token.controlHeight - stepsDotSize) / 2,
|
||||
marginTop: (token.controlHeight - dotSize) / 2,
|
||||
marginInlineStart: 0,
|
||||
background: 'none',
|
||||
},
|
||||
[`${componentCls}-item-process ${componentCls}-item-icon`]: {
|
||||
marginTop: (token.controlHeight - stepsCurrentDotSize) / 2,
|
||||
marginTop: (token.controlHeight - dotCurrentSize) / 2,
|
||||
top: 0,
|
||||
insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2,
|
||||
insetInlineStart: (dotSize - dotCurrentSize) / 2,
|
||||
marginInlineStart: 0,
|
||||
},
|
||||
|
||||
// https://github.com/ant-design/ant-design/issues/18354
|
||||
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
top: (token.controlHeight - stepsDotSize) / 2,
|
||||
top: (token.controlHeight - dotSize) / 2,
|
||||
insetInlineStart: 0,
|
||||
margin: 0,
|
||||
padding: `${stepsDotSize + token.paddingXS}px 0 ${token.paddingXS}px`,
|
||||
padding: `${dotSize + token.paddingXS}px 0 ${token.paddingXS}px`,
|
||||
|
||||
'&::after': {
|
||||
marginInlineStart: (stepsDotSize - token.lineWidth) / 2,
|
||||
marginInlineStart: (dotSize - token.lineWidth) / 2,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-small`]: {
|
||||
[`${componentCls}-item-icon`]: {
|
||||
marginTop: (token.controlHeightSM - stepsDotSize) / 2,
|
||||
marginTop: (token.controlHeightSM - dotSize) / 2,
|
||||
},
|
||||
[`${componentCls}-item-process ${componentCls}-item-icon`]: {
|
||||
marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2,
|
||||
marginTop: (token.controlHeightSM - dotCurrentSize) / 2,
|
||||
},
|
||||
|
||||
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
top: (token.controlHeightSM - stepsDotSize) / 2,
|
||||
top: (token.controlHeightSM - dotSize) / 2,
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
paddingInlineStart: token.paddingXXS,
|
||||
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
top: token.marginXXS,
|
||||
insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS,
|
||||
insetInlineStart: token.iconSize / 2 - token.lineWidth + token.paddingXXS,
|
||||
},
|
||||
},
|
||||
|
||||
@ -33,7 +33,7 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
|
||||
[`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
|
||||
{
|
||||
insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS,
|
||||
insetInlineStart: token.iconSizeSM / 2 - token.lineWidth + token.paddingXXS,
|
||||
},
|
||||
|
||||
[`&${componentCls}-label-vertical`]: {
|
||||
@ -47,10 +47,8 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
|
||||
[`${antCls}-progress`]: {
|
||||
position: 'absolute',
|
||||
insetBlockStart:
|
||||
(token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
|
||||
insetInlineStart:
|
||||
(token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
|
||||
insetBlockStart: (token.iconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
|
||||
insetInlineStart: (token.iconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -5,7 +5,7 @@ import type { GenerateStyle } from '../../theme/internal';
|
||||
const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsSmallIconSize,
|
||||
iconSizeSM,
|
||||
// stepsSmallIconMargin,
|
||||
fontSizeSM,
|
||||
fontSize,
|
||||
@ -22,24 +22,24 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
},
|
||||
|
||||
[`${componentCls}-item-icon`]: {
|
||||
width: stepsSmallIconSize,
|
||||
height: stepsSmallIconSize,
|
||||
width: iconSizeSM,
|
||||
height: iconSizeSM,
|
||||
// margin: stepsSmallIconMargin,
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
marginInline: `0 ${token.marginXS}px`,
|
||||
fontSize: fontSizeSM,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
lineHeight: `${iconSizeSM}px`,
|
||||
textAlign: 'center',
|
||||
borderRadius: stepsSmallIconSize,
|
||||
borderRadius: iconSizeSM,
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
paddingInlineEnd: token.paddingSM,
|
||||
fontSize,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
lineHeight: `${iconSizeSM}px`,
|
||||
|
||||
'&::after': {
|
||||
top: stepsSmallIconSize / 2,
|
||||
top: iconSizeSM / 2,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-item-description`]: {
|
||||
@ -47,7 +47,7 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
fontSize,
|
||||
},
|
||||
[`${componentCls}-item-tail`]: {
|
||||
top: stepsSmallIconSize / 2 - token.paddingXXS,
|
||||
top: iconSizeSM / 2 - token.paddingXXS,
|
||||
},
|
||||
[`${componentCls}-item-custom ${componentCls}-item-icon`]: {
|
||||
width: 'inherit',
|
||||
@ -57,8 +57,8 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
[`> ${componentCls}-icon`]: {
|
||||
fontSize: stepsSmallIconSize,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
fontSize: iconSizeSM,
|
||||
lineHeight: `${iconSizeSM}px`,
|
||||
transform: 'none',
|
||||
},
|
||||
},
|
||||
|
||||
@ -3,7 +3,7 @@ import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../theme/internal';
|
||||
|
||||
const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
const { componentCls, stepsSmallIconSize, stepsIconSize } = token;
|
||||
const { componentCls, iconSizeSM, iconSize } = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-vertical`]: {
|
||||
@ -26,7 +26,7 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
overflow: 'hidden',
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
lineHeight: `${stepsIconSize}px`,
|
||||
lineHeight: `${iconSize}px`,
|
||||
},
|
||||
[`${componentCls}-item-description`]: {
|
||||
paddingBottom: token.paddingSM,
|
||||
@ -35,10 +35,10 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
[`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: token.stepsIconSize / 2 - token.lineWidth,
|
||||
insetInlineStart: iconSize / 2 - token.lineWidth,
|
||||
width: token.lineWidth,
|
||||
height: '100%',
|
||||
padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
|
||||
padding: `${iconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
|
||||
|
||||
'&::after': {
|
||||
width: token.lineWidth,
|
||||
@ -59,11 +59,11 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
||||
[`${componentCls}-item-tail`]: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth,
|
||||
padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
|
||||
insetInlineStart: iconSizeSM / 2 - token.lineWidth,
|
||||
padding: `${iconSizeSM + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
lineHeight: `${iconSizeSM}px`,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -9,7 +9,7 @@ This document contains the correspondence between all the less variables related
|
||||
|
||||
<!-- ## 全局变量 -->
|
||||
|
||||
## 组件变量
|
||||
## Component Token
|
||||
|
||||
<!-- ### Alert -->
|
||||
|
||||
@ -39,20 +39,18 @@ This document contains the correspondence between all the less variables related
|
||||
|
||||
<!-- ### Divider -->
|
||||
|
||||
|
||||
## Drawer
|
||||
### Drawer
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@drawer-bg` | `colorBgElevated` | - |
|
||||
| `@drawer-header-padding` | `padding`、`paddingLG` | `${padding}px ${paddingLG}px` |
|
||||
| `@drawer-title-font-size` | `fontSizeLG` | - |
|
||||
| `@drawer-title-line-height` | `lineHeightLG` | - |
|
||||
| `@drawer-body-padding` | `paddingLG` | - |
|
||||
| `@drawer-footer-padding-vertical` | `drawerFooterPaddingVertical` | `drawerFooterPaddingVertical` is a number without units, `@drawer-footer-padding-vertical` with units |
|
||||
| `@drawer-footer-padding-horizontal` | `drawerFooterPaddingHorizontal` | `drawerFooterPaddingHorizontal` is a number without units, `@drawer-footer-padding-horizontal` with units |
|
||||
|
||||
| `@drawer-bg` | `colorBgElevated` | GlobalToken |
|
||||
| `@drawer-header-padding` | `padding`、`paddingLG` | GlobalToken, used as `${padding}px ${paddingLG}px` |
|
||||
| `@drawer-title-font-size` | `fontSizeLG` | GlobalToken |
|
||||
| `@drawer-title-line-height` | `lineHeightLG` | GlobalToken |
|
||||
| `@drawer-body-padding` | `paddingLG` | GlobalToken |
|
||||
| `@drawer-footer-padding-vertical` | `footerPaddingBlock` | `footerPaddingBlock` is a number without units, `@drawer-footer-padding-vertical` with units |
|
||||
| `@drawer-footer-padding-horizontal` | `footerPaddingInline` | `footerPaddingInline` is a number without units, `@drawer-footer-padding-horizontal` with units |
|
||||
|
||||
<!-- ### Dropdown -->
|
||||
|
||||
@ -72,16 +70,16 @@ This document contains the correspondence between all the less variables related
|
||||
|
||||
<!-- ### Menu -->
|
||||
|
||||
## Message
|
||||
### Message
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@zindex-message` | `zIndexPopup` | - |
|
||||
| `@message-notice-content-padding` | `messageNoticeContentPadding` | - |
|
||||
| `@message-notice-content-bg` | `messageNoticeContentBg` | - |
|
||||
| `@message-notice-content-padding` | `contentPadding` | - |
|
||||
| `@message-notice-content-bg` | `contentBg` | - |
|
||||
|
||||
## Modal
|
||||
### Modal
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
@ -89,40 +87,29 @@ This document contains the correspondence between all the less variables related
|
||||
| `@modal-header-padding-vertical` | - | Deprecated for style change |
|
||||
| `@modal-header-padding-horizontal` | - | Deprecated for style change |
|
||||
| `@modal-body-padding` | - | Deprecated for style change |
|
||||
| `@modal-header-bg` | `modalHeaderBg` | - |
|
||||
| `@modal-header-bg` | `headerBg` | - |
|
||||
| `@modal-header-padding` | - | Deprecated for style change |
|
||||
| `@modal-header-border-width` | - | Deprecated for style change |
|
||||
| `@modal-header-border-style` | - | Deprecated for style change |
|
||||
| `@modal-header-title-line-height` | `modalHeaderTitleLineHeight` | - |
|
||||
| `@modal-header-title-font-size` | `modalHeaderTitleFontSize` | - |
|
||||
| `@modal-header-title-line-height` | `titleLineHeight` | - |
|
||||
| `@modal-header-title-font-size` | `titleFontSize` | - |
|
||||
| `@modal-header-border-color-split` | - | Deprecated for style change |
|
||||
| `@modal-header-close-size` | - | Deprecated for style change |
|
||||
| `@modal-content-bg` | `modalContentBg` | - |
|
||||
| `@modal-heading-color` | `modalHeadingColor` | - |
|
||||
| `@modal-close-color` | `modalCloseIconColor` | - |
|
||||
| `@modal-footer-bg` | `modalFooterBg` | - |
|
||||
| `@modal-content-bg` | `contentBg` | - |
|
||||
| `@modal-heading-color` | `titleColor` | - |
|
||||
| `@modal-close-color` | `colorIcon` | GlobalToken |
|
||||
| `@modal-footer-bg` | `footerBg` | - |
|
||||
| `@modal-footer-border-color-split` | - | Deprecated for style change |
|
||||
| `@modal-footer-border-style` | - | Deprecated for style change |
|
||||
| `@modal-footer-padding-vertical` | - | Deprecated for style change |
|
||||
| `@modal-footer-padding-horizontal` | - | Deprecated for style change |
|
||||
| `@modal-footer-border-width` | - | Deprecated for style change |
|
||||
| `@modal-mask-bg` | `colorBgMask` | - |
|
||||
| `@modal-mask-bg` | `colorBgMask` | GlobalToken |
|
||||
| `@modal-confirm-body-padding` | - | Deprecated for style change |
|
||||
| `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - |
|
||||
| `@modal-border-radius` | `borderRadiusLG` | - |
|
||||
| `@modal-confirm-title-font-size` | `titleFontSize` | - |
|
||||
| `@modal-border-radius` | `borderRadiusLG` | GlobalToken |
|
||||
|
||||
## Notification
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@notification-width` | `width` | - |
|
||||
| `@notification-padding` | `notificationPadding` | - |
|
||||
| `@notification-padding-vertical` | `notificationPaddingVertical` | - |
|
||||
| `@notification-padding-horizontal` | `notificationPaddingHorizontal` | - |
|
||||
| `@notification-margin-bottom` | `notificationMarginBottom` | - |
|
||||
| `@notification-margin-edge` | `notificationMarginEdge` | - |
|
||||
| `@notification-bg` | `notificationBg` | - |
|
||||
<!-- ### Notification -->
|
||||
|
||||
<!-- ### Pagination -->
|
||||
|
||||
@ -134,17 +121,15 @@ This document contains the correspondence between all the less variables related
|
||||
|
||||
<!-- ### Rate -->
|
||||
|
||||
|
||||
## Result
|
||||
### Result
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@result-icon-font-size` | `resultIconFontSize` | - |
|
||||
| `@result-title-font-size` | `resultTitleFontSize` | - |
|
||||
| `@result-subtitle-font-size` | `resultSubtitleFontSize` | - |
|
||||
| `@result-extra-margin` | `resultExtraMargin` | - |
|
||||
|
||||
| `@result-icon-font-size` | `iconFontSize` | - |
|
||||
| `@result-title-font-size` | `titleFontSize` | - |
|
||||
| `@result-subtitle-font-size` | `subtitleFontSize` | - |
|
||||
| `@result-extra-margin` | `extraMargin` | - |
|
||||
|
||||
<!-- ### Segment -->
|
||||
|
||||
@ -154,43 +139,41 @@ This document contains the correspondence between all the less variables related
|
||||
|
||||
<!-- ### Slider -->
|
||||
|
||||
|
||||
## Statistic
|
||||
### Statistic
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@statistic-title-font-size` | `statisticTitleFontSize` | - |
|
||||
| `@statistic-content-font-size` | `statisticContentFontSize` | - |
|
||||
| `@statistic-font-family` | `statisticFontFamily` | - |
|
||||
| `@statistic-title-font-size` | `titleFontSize` | - |
|
||||
| `@statistic-content-font-size` | `contentFontSize` | - |
|
||||
| `@statistic-font-family` | `fontFamily` | GlobalToken |
|
||||
|
||||
|
||||
## Step
|
||||
### Step
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less variables | Component Token | Note |
|
||||
| --- | --- | --- |
|
||||
| `@process-tail-color` | `processTailColor` | - |
|
||||
| `@steps-nav-arrow-color` | `stepsNavArrowColor` | - |
|
||||
| `@steps-background` | - | Deprecated for style change |
|
||||
| `@steps-icon-size` | `stepsIconSize` | - |
|
||||
| `@steps-icon-custom-size` | `stepsIconCustomSize` | - |
|
||||
| `@steps-icon-custom-top` | `stepsIconCustomTop` | - |
|
||||
| `@steps-icon-custom-font-size` | `stepsIconCustomFontSize` | - |
|
||||
| `@steps-icon-top` | `stepsIconTop` | - |
|
||||
| `@steps-icon-font-size` | `stepsIconFontSize` | - |
|
||||
| `@steps-icon-margin` | - | Deprecated for style change |
|
||||
| `@steps-title-line-height` | `stepsTitleLineHeight` | - |
|
||||
| `@steps-small-icon-size` | `stepsSmallIconSize` | - |
|
||||
| `@steps-small-icon-margin` | - | Deprecated for style change |
|
||||
| `@steps-dot-size` | `stepsDotSize` | - |
|
||||
| `@steps-dot-top` | - | Deprecated for style change |
|
||||
| `@steps-current-dot-size` | `stepsCurrentDotSize` | - |
|
||||
| `@steps-description-max-width` | `stepsNavContentMaxWidth` | - |
|
||||
| `@steps-nav-content-max-width` | - | Deprecated for style change |
|
||||
| `@steps-vertical-icon-width` | - | Deprecated for style change |
|
||||
| `@steps-vertical-tail-width` | - | Deprecated for style change |
|
||||
| `@steps-vertical-tail-width-sm` | - | Deprecated for style change |
|
||||
| `@process-tail-color` | `colorSplit` | GlobalToken |
|
||||
| `@steps-nav-arrow-color` | `navArrowColor` | - |
|
||||
| `@steps-background` | `colorBgContainer` | - |
|
||||
| `@steps-icon-size` | `iconSize` | - |
|
||||
| `@steps-icon-custom-size` | `customIconSize` | - |
|
||||
| `@steps-icon-custom-top` | `customIconTop` | - |
|
||||
| `@steps-icon-custom-font-size` | `customIconFontSize` | - |
|
||||
| `@steps-icon-top` | `iconTop` | - |
|
||||
| `@steps-icon-font-size` | `iconFontSize` | - |
|
||||
| `@steps-icon-margin` | - | Deprecated |
|
||||
| `@steps-title-line-height` | `titleLineHeight` | - |
|
||||
| `@steps-small-icon-size` | `iconSizeSM` | - |
|
||||
| `@steps-small-icon-margin` | - | Deprecated |
|
||||
| `@steps-dot-size` | `dotSize` | - |
|
||||
| `@steps-dot-top` | - | Deprecated |
|
||||
| `@steps-current-dot-size` | `dotCurrentSize` | - |
|
||||
| `@steps-description-max-width` | `descriptionMaxWidth` | - |
|
||||
| `@steps-nav-content-max-width` | `stepsNavContentMaxWidth` | - |
|
||||
| `@steps-vertical-icon-width` | `iconSize` | - |
|
||||
| `@steps-vertical-tail-width` | - | Deprecated |
|
||||
| `@steps-vertical-tail-width-sm` | - | Deprecated |
|
||||
|
||||
<!-- ### Switch -->
|
||||
|
||||
|
||||
@ -39,20 +39,18 @@ title: Less 变量迁移 Design Token
|
||||
|
||||
<!-- ### Divider 分割线 -->
|
||||
|
||||
|
||||
## Drawer 抽屉
|
||||
### Drawer 抽屉
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@drawer-bg` | `colorBgElevated` | - |
|
||||
| `@drawer-header-padding` | `padding`、`paddingLG` | `${padding}px ${paddingLG}px` |
|
||||
| `@drawer-title-font-size` | `fontSizeLG` | - |
|
||||
| `@drawer-title-line-height` | `lineHeightLG` | - |
|
||||
| `@drawer-body-padding` | `paddingLG` | - |
|
||||
| `@drawer-footer-padding-vertical` | `drawerFooterPaddingVertical` | `drawerFooterPaddingVertical` 为数字，不带单位，`@drawer-footer-padding-vertical` 带单位 |
|
||||
| `@drawer-footer-padding-horizontal` | `drawerFooterPaddingHorizontal` | `drawerFooterPaddingHorizontal` 为数字，不带单位，`@drawer-footer-padding-horizontal` 带单位 |
|
||||
|
||||
| `@drawer-bg` | `colorBgElevated` | 全局 Token |
|
||||
| `@drawer-header-padding` | `padding`、`paddingLG` | 全局 Token，对应值为 `${padding}px ${paddingLG}px` |
|
||||
| `@drawer-title-font-size` | `fontSizeLG` | 全局 Token |
|
||||
| `@drawer-title-line-height` | `lineHeightLG` | 全局 Token |
|
||||
| `@drawer-body-padding` | `paddingLG` | 全局 Token |
|
||||
| `@drawer-footer-padding-vertical` | `footerPaddingBlock` | `footerPaddingBlock` 为数字，不带单位，`@drawer-footer-padding-vertical` 带单位 |
|
||||
| `@drawer-footer-padding-horizontal` | `footerPaddingInline` | `footerPaddingInline` 为数字，不带单位，`@drawer-footer-padding-horizontal` 带单位 |
|
||||
|
||||
<!-- ### Dropdown 下拉菜单 -->
|
||||
|
||||
@ -72,14 +70,14 @@ title: Less 变量迁移 Design Token
|
||||
|
||||
<!-- ### Menu 导航菜单 -->
|
||||
|
||||
## Message 全局提示
|
||||
### Message 全局提示
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@zindex-message` | `zIndexPopup` | - |
|
||||
| `@message-notice-content-padding` | `messageNoticeContentPadding` | - |
|
||||
| `@message-notice-content-bg` | `messageNoticeContentBg` | - |
|
||||
| `@message-notice-content-padding` | `contentPadding` | - |
|
||||
| `@message-notice-content-bg` | `contentBg` | - |
|
||||
|
||||
### Modal 对话框
|
||||
|
||||
@ -89,40 +87,29 @@ title: Less 变量迁移 Design Token
|
||||
| `@modal-header-padding-vertical` | - | 由于样式变化已废弃 |
|
||||
| `@modal-header-padding-horizontal` | - | 由于样式变化已废弃 |
|
||||
| `@modal-body-padding` | - | 由于样式变化已废弃 |
|
||||
| `@modal-header-bg` | `modalHeaderBg` | - |
|
||||
| `@modal-header-bg` | `headerBg` | - |
|
||||
| `@modal-header-padding` | - | 由于样式变化已废弃 |
|
||||
| `@modal-header-border-width` | - | 由于样式变化已废弃 |
|
||||
| `@modal-header-border-style` | - | 由于样式变化已废弃 |
|
||||
| `@modal-header-title-line-height` | `modalHeaderTitleLineHeight` | - |
|
||||
| `@modal-header-title-font-size` | `modalHeaderTitleFontSize` | - |
|
||||
| `@modal-header-title-line-height` | `titleLineHeight` | - |
|
||||
| `@modal-header-title-font-size` | `titleFontSize` | - |
|
||||
| `@modal-header-border-color-split` | - | 由于样式变化已废弃 |
|
||||
| `@modal-header-close-size` | - | 由于样式变化已废弃 |
|
||||
| `@modal-content-bg` | `modalContentBg` | - |
|
||||
| `@modal-heading-color` | `modalHeadingColor` | - |
|
||||
| `@modal-close-color` | `modalCloseIconColor` | - |
|
||||
| `@modal-footer-bg` | `modalFooterBg` | - |
|
||||
| `@modal-content-bg` | `contentBg` | - |
|
||||
| `@modal-heading-color` | `titleColor` | - |
|
||||
| `@modal-close-color` | `colorIcon` | 全局 Token |
|
||||
| `@modal-footer-bg` | `footerBg` | - |
|
||||
| `@modal-footer-border-color-split` | - | 由于样式变化已废弃 |
|
||||
| `@modal-footer-border-style` | - | 由于样式变化已废弃 |
|
||||
| `@modal-footer-padding-vertical` | - | 由于样式变化已废弃 |
|
||||
| `@modal-footer-padding-horizontal` | - | 由于样式变化已废弃 |
|
||||
| `@modal-footer-border-width` | - | 由于样式变化已废弃 |
|
||||
| `@modal-mask-bg` | `colorBgMask` | - |
|
||||
| `@modal-mask-bg` | `colorBgMask` | 全局 Token |
|
||||
| `@modal-confirm-body-padding` | - | 由于样式变化已废弃 |
|
||||
| `@modal-confirm-title-font-size` | `modalHeaderTitleFontSize` | - |
|
||||
| `@modal-border-radius` | `borderRadiusLG` | - |
|
||||
| `@modal-confirm-title-font-size` | `titleFontSize` | - |
|
||||
| `@modal-border-radius` | `borderRadiusLG` | 全局 Token |
|
||||
|
||||
## Notification 通知提醒框
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@notification-width` | `width` | - |
|
||||
| `@notification-padding` | `notificationPadding` | - |
|
||||
| `@notification-padding-vertical` | `notificationPaddingVertical` | - |
|
||||
| `@notification-padding-horizontal` | `notificationPaddingHorizontal` | - |
|
||||
| `@notification-margin-bottom` | `notificationMarginBottom` | - |
|
||||
| `@notification-margin-edge` | `notificationMarginEdge` | - |
|
||||
| `@notification-bg` | `notificationBg` | - |
|
||||
<!-- ### Notification 通知提醒框 -->
|
||||
|
||||
<!-- ### Pagination 分页 -->
|
||||
|
||||
@ -134,17 +121,15 @@ title: Less 变量迁移 Design Token
|
||||
|
||||
<!-- ### Rate 评分 -->
|
||||
|
||||
|
||||
## Result 结果
|
||||
### Result 结果
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@result-icon-font-size` | `resultIconFontSize` | - |
|
||||
| `@result-title-font-size` | `resultTitleFontSize` | - |
|
||||
| `@result-subtitle-font-size` | `resultSubtitleFontSize` | - |
|
||||
| `@result-extra-margin` | `resultExtraMargin` | - |
|
||||
|
||||
| `@result-icon-font-size` | `iconFontSize` | - |
|
||||
| `@result-title-font-size` | `titleFontSize` | - |
|
||||
| `@result-subtitle-font-size` | `subtitleFontSize` | - |
|
||||
| `@result-extra-margin` | `extraMargin` | - |
|
||||
|
||||
<!-- ### Segment 分段器 -->
|
||||
|
||||
@ -154,43 +139,41 @@ title: Less 变量迁移 Design Token
|
||||
|
||||
<!-- ### Slider 滑动输入条 -->
|
||||
|
||||
|
||||
## Statistic 统计数值
|
||||
### Statistic 统计数值
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@statistic-title-font-size` | `statisticTitleFontSize` | - |
|
||||
| `@statistic-content-font-size` | `statisticContentFontSize` | - |
|
||||
| `@statistic-font-family` | `statisticFontFamily` | - |
|
||||
|
||||
| `@statistic-title-font-size` | `titleFontSize` | - |
|
||||
| `@statistic-content-font-size` | `contentFontSize` | - |
|
||||
| `@statistic-font-family` | `fontFamily` | 全局 Token |
|
||||
|
||||
### Step 步骤条
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| Less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@process-tail-color` | `processTailColor` | - |
|
||||
| `@steps-nav-arrow-color` | `stepsNavArrowColor` | - |
|
||||
| `@steps-background` | - | 由于样式变化已废弃 |
|
||||
| `@steps-icon-size` | `stepsIconSize` | - |
|
||||
| `@steps-icon-custom-size` | `stepsIconCustomSize` | - |
|
||||
| `@steps-icon-custom-top` | `stepsIconCustomTop` | - |
|
||||
| `@steps-icon-custom-font-size` | `stepsIconCustomFontSize` | - |
|
||||
| `@steps-icon-top` | `stepsIconTop` | - |
|
||||
| `@steps-icon-font-size` | `stepsIconFontSize` | - |
|
||||
| `@steps-icon-margin` | - | 由于样式变化已废弃 |
|
||||
| `@steps-title-line-height` | `stepsTitleLineHeight` | - |
|
||||
| `@steps-small-icon-size` | `stepsSmallIconSize` | - |
|
||||
| `@steps-small-icon-margin` | - | 由于样式变化已废弃 |
|
||||
| `@steps-dot-size` | `stepsDotSize` | - |
|
||||
| `@steps-dot-top` | - | 由于样式变化已废弃 |
|
||||
| `@steps-current-dot-size` | `stepsCurrentDotSize` | - |
|
||||
| `@steps-description-max-width` | `stepsNavContentMaxWidth` | - |
|
||||
| `@steps-nav-content-max-width` | - | 由于样式变化已废弃 |
|
||||
| `@steps-vertical-icon-width` | - | 由于样式变化已废弃 |
|
||||
| `@steps-vertical-tail-width` | - | 由于样式变化已废弃 |
|
||||
| `@steps-vertical-tail-width-sm` | - | 由于样式变化已废弃 |
|
||||
| `@process-tail-color` | `colorSplit` | 全局 Token |
|
||||
| `@steps-nav-arrow-color` | `navArrowColor` | - |
|
||||
| `@steps-background` | `colorBgContainer` | - |
|
||||
| `@steps-icon-size` | `iconSize` | - |
|
||||
| `@steps-icon-custom-size` | `customIconSize` | - |
|
||||
| `@steps-icon-custom-top` | `customIconTop` | - |
|
||||
| `@steps-icon-custom-font-size` | `customIconFontSize` | - |
|
||||
| `@steps-icon-top` | `iconTop` | - |
|
||||
| `@steps-icon-font-size` | `iconFontSize` | - |
|
||||
| `@steps-icon-margin` | - | 已废弃 |
|
||||
| `@steps-title-line-height` | `titleLineHeight` | - |
|
||||
| `@steps-small-icon-size` | `iconSizeSM` | - |
|
||||
| `@steps-small-icon-margin` | - | 已废弃 |
|
||||
| `@steps-dot-size` | `dotSize` | - |
|
||||
| `@steps-dot-top` | - | 已废弃 |
|
||||
| `@steps-current-dot-size` | `dotCurrentSize` | - |
|
||||
| `@steps-description-max-width` | `descriptionMaxWidth` | - |
|
||||
| `@steps-nav-content-max-width` | `stepsNavContentMaxWidth` | - |
|
||||
| `@steps-vertical-icon-width` | `iconSize` | - |
|
||||
| `@steps-vertical-tail-width` | - | 已废弃 |
|
||||
| `@steps-vertical-tail-width-sm` | - | 已废弃 |
|
||||
|
||||
<!-- ### Switch 开关 -->
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user