mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 06:03:38 +08:00
github-actions[bot]
GitHub
commit
d8f06c4779
@ -17,9 +17,8 @@ export interface InlinePopoverProps {
|
||||
}
|
||||
|
||||
// 鼠标悬浮弹出 Popover 组件，用于帮助用户更快看到一些属性对应的预览效果
|
||||
const InlinePopover: React.FC = (props: InlinePopoverProps) => {
|
||||
const InlinePopover: React.FC<InlinePopoverProps> = (props) => {
|
||||
const { previewURL } = props;
|
||||
|
||||
const [locale] = useLocale(locales);
|
||||
const [visible, setVisible] = React.useState(false);
|
||||
|
||||
|
||||
56
.dumi/theme/builtins/InstallDependencies/index.tsx
Normal file
56
.dumi/theme/builtins/InstallDependencies/index.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import { Tabs } from 'antd';
|
||||
import SourceCode from 'dumi/theme-default/builtins/SourceCode';
|
||||
import React from 'react';
|
||||
import NpmLogo from './npm';
|
||||
import PnpmLogo from './pnpm';
|
||||
import YarnLogo from './yarn';
|
||||
|
||||
interface InstallProps {
|
||||
npm?: string;
|
||||
yarn?: string;
|
||||
pnpm?: string;
|
||||
}
|
||||
|
||||
const InstallDependencies: React.FC<InstallProps> = (props) => {
|
||||
const { npm, yarn, pnpm } = props;
|
||||
return (
|
||||
<Tabs
|
||||
className="antd-site-snippet"
|
||||
defaultActiveKey="npm"
|
||||
items={[
|
||||
{
|
||||
key: 'npm',
|
||||
children: <SourceCode lang="bash">{npm}</SourceCode>,
|
||||
label: (
|
||||
<div className="snippet-label">
|
||||
<NpmLogo />
|
||||
<span>npm</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'yarn',
|
||||
children: <SourceCode lang="bash">{yarn}</SourceCode>,
|
||||
label: (
|
||||
<div className="snippet-label">
|
||||
<YarnLogo />
|
||||
<span>yarn</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'pnpm',
|
||||
children: <SourceCode lang="bash">{pnpm}</SourceCode>,
|
||||
label: (
|
||||
<div className="snippet-label">
|
||||
<PnpmLogo />
|
||||
<span>pnpm</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default InstallDependencies;
|
||||
17
.dumi/theme/builtins/InstallDependencies/npm.tsx
Normal file
17
.dumi/theme/builtins/InstallDependencies/npm.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
const NpmIcon: React.FC = () => (
|
||||
<svg
|
||||
fill="#E53E3E"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
stroke="#E53E3E"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 16 16"
|
||||
width="1em"
|
||||
>
|
||||
<path d="M0 0v16h16v-16h-16zM13 13h-2v-8h-3v8h-5v-10h10v10z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default NpmIcon;
|
||||
19
.dumi/theme/builtins/InstallDependencies/pnpm.tsx
Normal file
19
.dumi/theme/builtins/InstallDependencies/pnpm.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
|
||||
const PnpmIcon: React.FC = () => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="#F69220"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
role="img"
|
||||
stroke="#F69220"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
>
|
||||
<path d="M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default PnpmIcon;
|
||||
18
.dumi/theme/builtins/InstallDependencies/yarn.tsx
Normal file
18
.dumi/theme/builtins/InstallDependencies/yarn.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
|
||||
const YarnIcon: React.FC = () => (
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="#2C8EBB"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
stroke="#2C8EBB"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 496 512"
|
||||
width="1em"
|
||||
>
|
||||
<path d="M393.9 345.2c-39 9.3-48.4 32.1-104 47.4 0 0-2.7 4-10.4 5.8-13.4 3.3-63.9 6-68.5 6.1-12.4.1-19.9-3.2-22-8.2-6.4-15.3 9.2-22 9.2-22-8.1-5-9-9.9-9.8-8.1-2.4 5.8-3.6 20.1-10.1 26.5-8.8 8.9-25.5 5.9-35.3.8-10.8-5.7.8-19.2.8-19.2s-5.8 3.4-10.5-3.6c-6-9.3-17.1-37.3 11.5-62-1.3-10.1-4.6-53.7 40.6-85.6 0 0-20.6-22.8-12.9-43.3 5-13.4 7-13.3 8.6-13.9 5.7-2.2 11.3-4.6 15.4-9.1 20.6-22.2 46.8-18 46.8-18s12.4-37.8 23.9-30.4c3.5 2.3 16.3 30.6 16.3 30.6s13.6-7.9 15.1-5c8.2 16 9.2 46.5 5.6 65.1-6.1 30.6-21.4 47.1-27.6 57.5-1.4 2.4 16.5 10 27.8 41.3 10.4 28.6 1.1 52.7 2.8 55.3.8 1.4 13.7.8 36.4-13.2 12.8-7.9 28.1-16.9 45.4-17 16.7-.5 17.6 19.2 4.9 22.2zM496 256c0 136.9-111.1 248-248 248S0 392.9 0 256 111.1 8 248 8s248 111.1 248 248zm-79.3 75.2c-1.7-13.6-13.2-23-28-22.8-22 .3-40.5 11.7-52.8 19.2-4.8 3-8.9 5.2-12.4 6.8 3.1-44.5-22.5-73.1-28.7-79.4 7.8-11.3 18.4-27.8 23.4-53.2 4.3-21.7 3-55.5-6.9-74.5-1.6-3.1-7.4-11.2-21-7.4-9.7-20-13-22.1-15.6-23.8-1.1-.7-23.6-16.4-41.4 28-12.2.9-31.3 5.3-47.5 22.8-2 2.2-5.9 3.8-10.1 5.4h.1c-8.4 3-12.3 9.9-16.9 22.3-6.5 17.4.2 34.6 6.8 45.7-17.8 15.9-37 39.8-35.7 82.5-34 36-11.8 73-5.6 79.6-1.6 11.1 3.7 19.4 12 23.8 12.6 6.7 30.3 9.6 43.9 2.8 4.9 5.2 13.8 10.1 30 10.1 6.8 0 58-2.9 72.6-6.5 6.8-1.6 11.5-4.5 14.6-7.1 9.8-3.1 36.8-12.3 62.2-28.7 18-11.7 24.2-14.2 37.6-17.4 12.9-3.2 21-15.1 19.4-28.2z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default YarnIcon;
|
||||
@ -392,7 +392,6 @@ createRoot(document.getElementById('container')).render(<Demo />);
|
||||
<ErrorBoundary>
|
||||
<React.StrictMode>{liveDemo.current}</React.StrictMode>
|
||||
</ErrorBoundary>
|
||||
{style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
|
||||
</section>
|
||||
<section className="code-box-meta markdown">
|
||||
<div className="code-box-title">
|
||||
@ -548,6 +547,23 @@ createRoot(document.getElementById('container')).render(<Demo />);
|
||||
</section>
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// In Safari, if style tag be inserted into non-head tag,
|
||||
// it will affect the rendering ability of the browser,
|
||||
// resulting in some response delays like following issue:
|
||||
// https://github.com/ant-design/ant-design/issues/39995
|
||||
// So we insert style tag into head tag.
|
||||
if (!style) return;
|
||||
const styleTag = document.createElement('style');
|
||||
styleTag.type = 'text/css';
|
||||
styleTag.innerHTML = style;
|
||||
styleTag['data-demo-url'] = demoUrl;
|
||||
document.head.appendChild(styleTag);
|
||||
return () => {
|
||||
document.head.removeChild(styleTag);
|
||||
};
|
||||
}, [style, demoUrl]);
|
||||
|
||||
if (version) {
|
||||
return (
|
||||
<Badge.Ribbon text={version} color={version.includes('<') ? 'red' : null}>
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
Responsive,
|
||||
SearchBar,
|
||||
} from './styles';
|
||||
import InlineCard from './styles/InlineCard';
|
||||
|
||||
const GlobalStyles = () => (
|
||||
<>
|
||||
@ -29,6 +30,7 @@ const GlobalStyles = () => (
|
||||
<Responsive />
|
||||
<NProgress />
|
||||
<PreviewImage />
|
||||
<InlineCard />
|
||||
<ColorStyle />
|
||||
<HeadingAnchor />
|
||||
<SearchBar />
|
||||
|
||||
24
.dumi/theme/common/styles/InlineCard.tsx
Normal file
24
.dumi/theme/common/styles/InlineCard.tsx
Normal file
@ -0,0 +1,24 @@
|
||||
import React from 'react';
|
||||
import { css, Global } from '@emotion/react';
|
||||
|
||||
export default () => (
|
||||
<Global
|
||||
styles={css`
|
||||
.design-inline-cards {
|
||||
display: flex;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
.design-inline-cards > * {
|
||||
flex: 10%;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.design-inline-cards img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
.design-inline-cards h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`}
|
||||
/>
|
||||
);
|
||||
@ -1,9 +1,9 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import { css, Global } from '@emotion/react';
|
||||
import React from 'react';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import useSiteToken from '../../../hooks/useSiteToken';
|
||||
|
||||
export default () => {
|
||||
const GlobalStyle: React.FC = () => {
|
||||
const { token } = useSiteToken();
|
||||
|
||||
const { antCls } = token;
|
||||
@ -181,6 +181,29 @@ export default () => {
|
||||
}
|
||||
}
|
||||
|
||||
.antd-site-snippet {
|
||||
.ant-tabs-tab {
|
||||
.snippet-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
span {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dumi-default-source-code {
|
||||
margin: 0 auto;
|
||||
background-color: ${token.siteMarkdownCodeBg};
|
||||
border-radius: ${token.borderRadius}px;
|
||||
> pre.prism-code {
|
||||
padding: 12px 20px;
|
||||
font-size: 13px;
|
||||
line-height: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.markdown table td > a:not(:last-child) {
|
||||
margin-right: 0 !important;
|
||||
|
||||
@ -455,3 +478,5 @@ export default () => {
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlobalStyle;
|
||||
|
||||
@ -334,4 +334,13 @@ describe('Button', () => {
|
||||
);
|
||||
expect(wrapper.container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should prevent children's event when button is disabled", () => {
|
||||
const { container } = render(
|
||||
<Button disabled>
|
||||
<a id="link">test</a>
|
||||
</Button>,
|
||||
);
|
||||
expect(window.getComputedStyle(container.querySelector('#link')!).pointerEvents).toBe('none');
|
||||
});
|
||||
});
|
||||
|
||||
@ -38,6 +38,10 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
|
||||
lineHeight: token.lineHeight,
|
||||
color: token.colorText,
|
||||
|
||||
'&:disabled > *': {
|
||||
pointerEvents: 'none',
|
||||
},
|
||||
|
||||
'> span': {
|
||||
display: 'inline-block',
|
||||
},
|
||||
|
||||
@ -79,6 +79,7 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
|
||||
[wrapperCls]: {
|
||||
position: 'absolute',
|
||||
zIndex: zIndexPopup,
|
||||
maxWidth: '100vw',
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
'&-hidden': {
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
import React, { useRef, memo, useContext, useEffect, useCallback, useMemo } from 'react';
|
||||
import CloseOutlined from '@ant-design/icons/CloseOutlined';
|
||||
import FileTextOutlined from '@ant-design/icons/FileTextOutlined';
|
||||
import classNames from 'classnames';
|
||||
import CSSMotion from 'rc-motion';
|
||||
import useMergedState from 'rc-util/lib/hooks/useMergedState';
|
||||
import FloatButton, { floatButtonPrefixCls } from './FloatButton';
|
||||
import React, { memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
|
||||
import warning from '../_util/warning';
|
||||
import type { ConfigConsumerProps } from '../config-provider';
|
||||
import { ConfigContext } from '../config-provider';
|
||||
import FloatButton, { floatButtonPrefixCls } from './FloatButton';
|
||||
import { FloatButtonGroupProvider } from './context';
|
||||
import type { FloatButtonGroupProps } from './interface';
|
||||
import useStyle from './style';
|
||||
@ -88,6 +89,15 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
|
||||
}
|
||||
}, [trigger]);
|
||||
|
||||
// =================== Warning =====================
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
warning(
|
||||
typeof props.open !== 'boolean' || !!trigger,
|
||||
'FloatButton.Group',
|
||||
'`open` need to be used together with `trigger`',
|
||||
);
|
||||
}
|
||||
|
||||
return wrapSSR(
|
||||
<FloatButtonGroupProvider value={shape}>
|
||||
<div ref={floatButtonGroupRef} className={groupCls} style={style} {...hoverAction}>
|
||||
|
||||
@ -660,6 +660,220 @@ exports[`renders components/float-button/demo/basic.tsx extend context correctly
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders components/float-button/demo/controlled.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
style="right: 24px;"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-group-wrap-appear ant-float-btn-group-wrap-appear-start ant-float-btn-group-wrap ant-float-btn-group-wrap"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-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-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="comment"
|
||||
class="anticon anticon-comment"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="comment"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs>
|
||||
<style />
|
||||
</defs>
|
||||
<path
|
||||
d="M573 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40zm-280 0c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"
|
||||
/>
|
||||
<path
|
||||
d="M894 345a343.92 343.92 0 00-189-130v.1c-17.1-19-36.4-36.5-58-52.1-163.7-119-393.5-82.7-513 81-96.3 133-92.2 311.9 6 439l.8 132.6c0 3.2.5 6.4 1.5 9.4a31.95 31.95 0 0040.1 20.9L309 806c33.5 11.9 68.1 18.7 102.5 20.6l-.5.4c89.1 64.9 205.9 84.4 313 49l127.1 41.4c3.2 1 6.5 1.6 9.9 1.6 17.7 0 32-14.3 32-32V753c88.1-119.6 90.4-284.9 1-408zM323 735l-12-5-99 31-1-104-8-9c-84.6-103.2-90.2-251.9-11-361 96.4-132.2 281.2-161.4 413-66 132.2 96.1 161.5 280.6 66 412-80.1 109.9-223.5 150.5-348 102zm505-17l-8 10 1 104-98-33-12 5c-56 20.8-115.7 22.5-171 7l-.2-.1A367.31 367.31 0 00729 676c76.4-105.3 88.8-237.6 44.4-350.4l.6.4c23 16.5 44.1 37.1 62 62 72.6 99.6 68.5 235.2-8 330z"
|
||||
/>
|
||||
<path
|
||||
d="M433 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-left"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
style="position: absolute; top: 0px; right: 0px;"
|
||||
/>
|
||||
<div
|
||||
class="ant-tooltip-content"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-inner"
|
||||
role="tooltip"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>,
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner-checked"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/float-button/demo/description.tsx extend context correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
|
||||
@ -501,6 +501,169 @@ exports[`renders components/float-button/demo/basic.tsx correctly 1`] = `
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`renders components/float-button/demo/controlled.tsx correctly 1`] = `
|
||||
Array [
|
||||
<div
|
||||
class="ant-float-btn-group ant-float-btn-group-circle"
|
||||
style="right:24px"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-group-wrap"
|
||||
>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="file-text"
|
||||
class="anticon anticon-file-text"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="file-text"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494zM504 618H320c-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-8zM312 490v48c0 4.4 3.6 8 8 8h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<span
|
||||
aria-label="comment"
|
||||
class="anticon anticon-comment"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="comment"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs>
|
||||
<style />
|
||||
</defs>
|
||||
<path
|
||||
d="M573 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40zm-280 0c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"
|
||||
/>
|
||||
<path
|
||||
d="M894 345a343.92 343.92 0 00-189-130v.1c-17.1-19-36.4-36.5-58-52.1-163.7-119-393.5-82.7-513 81-96.3 133-92.2 311.9 6 439l.8 132.6c0 3.2.5 6.4 1.5 9.4a31.95 31.95 0 0040.1 20.9L309 806c33.5 11.9 68.1 18.7 102.5 20.6l-.5.4c89.1 64.9 205.9 84.4 313 49l127.1 41.4c3.2 1 6.5 1.6 9.9 1.6 17.7 0 32-14.3 32-32V753c88.1-119.6 90.4-284.9 1-408zM323 735l-12-5-99 31-1-104-8-9c-84.6-103.2-90.2-251.9-11-361 96.4-132.2 281.2-161.4 413-66 132.2 96.1 161.5 280.6 66 412-80.1 109.9-223.5 150.5-348 102zm505-17l-8 10 1 104-98-33-12 5c-56 20.8-115.7 22.5-171 7l-.2-.1A367.31 367.31 0 00729 676c76.4-105.3 88.8-237.6 44.4-350.4l.6.4c23 16.5 44.1 37.1 62 62 72.6 99.6 68.5 235.2-8 330z"
|
||||
/>
|
||||
<path
|
||||
d="M433 421c-23.1 0-41 17.9-41 40s17.9 40 41 40c21.1 0 39-17.9 39-40s-17.9-40-39-40z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="ant-float-btn ant-float-btn-default ant-float-btn-circle"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="ant-badge"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-body"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-content"
|
||||
>
|
||||
<div
|
||||
class="ant-float-btn-icon"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</div>,
|
||||
<button
|
||||
aria-checked="true"
|
||||
class="ant-switch ant-switch-checked"
|
||||
role="switch"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="ant-switch-handle"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner"
|
||||
>
|
||||
<span
|
||||
class="ant-switch-inner-checked"
|
||||
/>
|
||||
<span
|
||||
class="ant-switch-inner-unchecked"
|
||||
/>
|
||||
</span>
|
||||
</button>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders components/float-button/demo/description.tsx correctly 1`] = `
|
||||
Array [
|
||||
<button
|
||||
|
||||
@ -84,4 +84,28 @@ describe('FloatButtonGroup', () => {
|
||||
fireEvent.click(container);
|
||||
expect(onOpenChange).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
|
||||
it('warning if set `open` but not set `trigger`', () => {
|
||||
const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
|
||||
render(
|
||||
<FloatButton.Group open trigger="click">
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
</FloatButton.Group>,
|
||||
);
|
||||
|
||||
expect(warnSpy).not.toHaveBeenCalled();
|
||||
|
||||
render(
|
||||
<FloatButton.Group open>
|
||||
<FloatButton />
|
||||
<FloatButton />
|
||||
</FloatButton.Group>,
|
||||
);
|
||||
expect(warnSpy).toHaveBeenCalledWith(
|
||||
'Warning: [antd: FloatButton.Group] `open` need to be used together with `trigger`',
|
||||
);
|
||||
warnSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
7
components/float-button/demo/controlled.md
Normal file
7
components/float-button/demo/controlled.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
通过 `open` 设置组件为受控模式，需要配合 trigger 一起使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Set the component to controlled mode through `open`, which need to be used together with trigger.
|
||||
28
components/float-button/demo/controlled.tsx
Normal file
28
components/float-button/demo/controlled.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';
|
||||
import { FloatButton, Switch } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
const onChange = (checked: boolean) => {
|
||||
setOpen(checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FloatButton.Group
|
||||
open={open}
|
||||
trigger="click"
|
||||
style={{ right: 24 }}
|
||||
icon={<CustomerServiceOutlined />}
|
||||
>
|
||||
<FloatButton />
|
||||
<FloatButton icon={<CommentOutlined />} />
|
||||
</FloatButton.Group>
|
||||
<Switch onChange={onChange} checked={open} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';
|
||||
import { FloatButton } from 'antd';
|
||||
import { CustomerServiceOutlined, CommentOutlined } from '@ant-design/icons';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
|
||||
@ -25,6 +25,7 @@ FloatButton. Available since `5.0.0`.
|
||||
<code src="./demo/tooltip.tsx" iframe="360">FloatButton with tooltip</code>
|
||||
<code src="./demo/group.tsx" iframe="360">FloatButton Group</code>
|
||||
<code src="./demo/group-menu.tsx" iframe="360">Menu mode</code>
|
||||
<code src="./demo/controlled.tsx" iframe="360">Controlled mode</code>
|
||||
<code src="./demo/back-top.tsx" iframe="360">BackTop</code>
|
||||
<code src="./demo/badge.tsx" iframe="360">badge</code>
|
||||
<code src="./demo/badge-debug.tsx" iframe="360" debug>debug dot</code>
|
||||
@ -54,8 +55,8 @@ FloatButton. Available since `5.0.0`.
|
||||
| --- | --- | --- | --- | --- |
|
||||
| shape | Setting button shape of children | `circle` \| `square` | `circle` | |
|
||||
| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | |
|
||||
| open | Whether the menu is visible or not | boolean | - | |
|
||||
| onOpenChange | Callback executed when active menu is changed | (open: boolean) => void | - | |
|
||||
| open | Whether the menu is visible or not, use it with trigger | boolean | - | |
|
||||
| onOpenChange | Callback executed when active menu is changed, use it with trigger | (open: boolean) => void | - | |
|
||||
|
||||
### FloatButton.BackTop
|
||||
|
||||
|
||||
@ -26,6 +26,7 @@ demo:
|
||||
<code src="./demo/tooltip.tsx" iframe="360">含有气泡卡片的悬浮按钮</code>
|
||||
<code src="./demo/group.tsx" iframe="360">浮动按钮组</code>
|
||||
<code src="./demo/group-menu.tsx" iframe="360">菜单模式</code>
|
||||
<code src="./demo/controlled.tsx" iframe="360">受控模式</code>
|
||||
<code src="./demo/back-top.tsx" iframe="360">回到顶部</code>
|
||||
<code src="./demo/badge.tsx" iframe="360">徽标数</code>
|
||||
<code src="./demo/badge-debug.tsx" iframe="360" debug>调试小圆点使用</code>
|
||||
@ -51,12 +52,12 @@ demo:
|
||||
|
||||
### FloatButton.Group
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------------ | -------------------------------- | ----------------------- | -------- | ---- |
|
||||
| shape | 设置包含的 FloatButton 按钮形状 | `circle` \| `square` | `circle` | |
|
||||
| trigger | 触发方式（有触发方式为菜单模式） | `click` \| `hover` | - | |
|
||||
| open | 受控展开 | boolean | - | |
|
||||
| onOpenChange | 展开收起时的回调 | (open: boolean) => void | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| shape | 设置包含的 FloatButton 按钮形状 | `circle` \| `square` | `circle` | |
|
||||
| trigger | 触发方式（有触发方式为菜单模式） | `click` \| `hover` | - | |
|
||||
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
||||
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
||||
|
||||
### FloatButton.BackTop
|
||||
|
||||
|
||||
@ -1,128 +0,0 @@
|
||||
---
|
||||
order: 5
|
||||
title: Use in TypeScript
|
||||
---
|
||||
|
||||
Let's create a TypeScript project by using `create-react-app`, then import `antd` step by step.
|
||||
|
||||
> We build `antd` based on latest stable version of TypeScript (`>=5.0.0`), please make sure your project dependency matches it.
|
||||
|
||||
---
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Ensure your system has installed latest version of [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/).
|
||||
|
||||
Create a new [cra-template-typescript](https://github.com/facebook/create-react-app/tree/master/packages/cra-template-typescript) project named `antd-demo-ts` using yarn.
|
||||
|
||||
```bash
|
||||
$ yarn create react-app antd-demo-ts --template typescript
|
||||
```
|
||||
|
||||
If you are using npm (we will use yarn in the following instructions, it's ok to replace yarn with npm)
|
||||
|
||||
```bash
|
||||
$ npx create-react-app antd-demo-ts --template typescript
|
||||
```
|
||||
|
||||
Then we go inside `antd-demo-ts` and start it.
|
||||
|
||||
```bash
|
||||
$ cd antd-demo-ts
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
|
||||
|
||||
## Import antd
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
Modify `src/App.tsx`, import Button component from `antd`.
|
||||
|
||||
```tsx
|
||||
import { Button } from 'antd';
|
||||
import 'antd/dist/reset.css';
|
||||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
import './App.css';
|
||||
|
||||
const App: FC = () => (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
OK, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at it's [User Guide](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app).
|
||||
|
||||
`antd` is written in TypeScript with complete definitions, try out and enjoy the property suggestion and typing check.
|
||||
|
||||
|
||||
|
||||
> Don't install `@types/antd`.
|
||||
|
||||
## Advanced Guides
|
||||
|
||||
In the real world, we usually have to modify default webpack config for custom needs such as themes. We can achieve that by using [craco](https://github.com/gsoft-inc/craco) which is one of create-react-app's custom config solutions.
|
||||
|
||||
Install craco and modify the `scripts` field in `package.json`.
|
||||
|
||||
```bash
|
||||
$ yarn add @craco/craco
|
||||
```
|
||||
|
||||
```diff
|
||||
/* package.json */
|
||||
"scripts": {
|
||||
- "start": "react-scripts start",
|
||||
- "build": "react-scripts build",
|
||||
- "test": "react-scripts test",
|
||||
+ "start": "craco start",
|
||||
+ "build": "craco build",
|
||||
+ "test": "craco test",
|
||||
}
|
||||
```
|
||||
|
||||
Then create a `craco.config.js` at root directory of your project for further overriding.
|
||||
|
||||
```js
|
||||
/* craco.config.js */
|
||||
module.exports = {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### Customize Theme
|
||||
|
||||
Ref to the [Customize Theme documentation](/docs/react/customize-theme). Modify theme with ConfigProvider:
|
||||
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MyApp />
|
||||
</ConfigProvider>
|
||||
);
|
||||
```
|
||||
|
||||
## Alternative ways
|
||||
|
||||
Follow manual in [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) to setup TypeScript development environment if you already create a project by [Use in create-react-app](/docs/react/use-with-create-react-app).
|
||||
|
||||
- [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd)
|
||||
- [react-app-rewire-typescript](https://github.com/lwd-technology/react-app-rewire-typescript)
|
||||
- [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)
|
||||
- [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/)
|
||||
@ -1,130 +0,0 @@
|
||||
---
|
||||
order: 5
|
||||
title: 在 TypeScript 中使用
|
||||
---
|
||||
|
||||
使用 `create-react-app` 一步步地创建一个 TypeScript 项目，并引入 antd。
|
||||
|
||||
> `antd` 基于最新稳定版本的 TypeScript（`>=5.0.0`），请确保项目中使用匹配的版本。
|
||||
|
||||
---
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
请确保电脑上已经安装了最新版的 [yarn](https://yarnpkg.com) 或者 [npm](https://www.npmjs.com/)。
|
||||
|
||||
使用 yarn 创建 [cra-template-typescript](https://github.com/facebook/create-react-app/tree/master/packages/cra-template-typescript) 项目。
|
||||
|
||||
```bash
|
||||
$ yarn create react-app antd-demo-ts --template typescript
|
||||
```
|
||||
|
||||
如果你使用的是 npm（接下来我们都会用 yarn 作为例子，如果你习惯用 npm 也没问题）。
|
||||
|
||||
```bash
|
||||
$ npx create-react-app antd-demo-ts --template typescript
|
||||
```
|
||||
|
||||
然后我们进入项目并启动。
|
||||
|
||||
```bash
|
||||
$ cd antd-demo-ts
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
此时浏览器会访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。
|
||||
|
||||
## 引入 antd
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
修改 `src/App.tsx`，引入 antd 的按钮组件。
|
||||
|
||||
```tsx
|
||||
import { Button } from 'antd';
|
||||
import 'antd/dist/reset.css';
|
||||
import type { FC } from 'react';
|
||||
import React from 'react';
|
||||
import './App.css';
|
||||
|
||||
const App: FC = () => (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
重新启动 `yarn start`，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app)。
|
||||
|
||||
`antd` 使用 TypeScript 书写并提供了完整的定义，你可以享受组件属性输入建议和定义检查的功能。
|
||||
|
||||
|
||||
|
||||
> 注意不要安装 `@types/antd`。
|
||||
|
||||
## 高级配置
|
||||
|
||||
这个例子在实际开发中还有一些优化的空间，比如无法进行主题配置。
|
||||
|
||||
此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [craco](https://github.com/gsoft-inc/craco) （一个对 create-react-app 进行自定义配置的社区解决方案）。
|
||||
|
||||
现在我们安装 craco 并修改 `package.json` 里的 `scripts` 属性。
|
||||
|
||||
```bash
|
||||
$ yarn add @craco/craco
|
||||
```
|
||||
|
||||
```diff
|
||||
/* package.json */
|
||||
"scripts": {
|
||||
- "start": "react-scripts start",
|
||||
- "build": "react-scripts build",
|
||||
- "test": "react-scripts test",
|
||||
+ "start": "craco start",
|
||||
+ "build": "craco build",
|
||||
+ "test": "craco test",
|
||||
}
|
||||
```
|
||||
|
||||
然后在项目根目录创建一个 `craco.config.js` 用于修改默认配置。
|
||||
|
||||
```js
|
||||
/* craco.config.js */
|
||||
module.exports = {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义主题
|
||||
|
||||
参考 [配置主题](/docs/react/customize-theme)，通过 ConfigProvider 进行主题配置：
|
||||
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MyApp />
|
||||
</ConfigProvider>
|
||||
);
|
||||
```
|
||||
|
||||
## 其他方案
|
||||
|
||||
如果你已经按照 [在 create-react-app 中使用](/docs/react/use-with-create-react-app) 初始化了环境，可以参考官方文档里的 [Adding TypeScript](https://create-react-app.dev/docs/adding-typescript) 配置 TypeScript 开发环境。
|
||||
|
||||
- [Create React apps (with Typescript and antd) with no build configuration](https://github.com/SZzzzz/react-scripts-ts-antd)
|
||||
- [react-app-rewire-typescript](https://github.com/lwd-technology/react-app-rewire-typescript)
|
||||
- [ts-import-plugin](https://github.com/Brooooooklyn/ts-import-plugin)
|
||||
- [Migrating from create-react-app-typescript to Create React App](https://vincenttunru.com/migrate-create-react-app-typescript-to-create-react-app/)
|
||||
@ -1,34 +1,26 @@
|
||||
---
|
||||
order: 4
|
||||
title: Use in create-react-app
|
||||
title: Usage with create-react-app
|
||||
---
|
||||
|
||||
[create-react-app](https://github.com/facebookincubator/create-react-app) is one of the best React application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
|
||||
|
||||
---
|
||||
[create-react-app](https://create-react-app.dev/) is one of the best React application development tools, This article will try to use `create-react-app` to create a project, and introduce antd.
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/).
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
|
||||
```bash
|
||||
$ yarn create react-app antd-demo
|
||||
|
||||
# or
|
||||
|
||||
$ npx create-react-app antd-demo
|
||||
```
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo' yarn='$ yarn create react-app antd-demo' pnpm='$ pnpm create react-app antd-demo'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting or use another npm registry if any network errors happen during it.
|
||||
|
||||
Then we go inside `antd-demo` and start it.
|
||||
Then we go inside project and start it.
|
||||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
Open the browser at http://localhost:3000/. It renders a header saying "Welcome to React" on the page.
|
||||
Open the browser at http://localhost:3000/. It renders a header saying `Welcome to React` on the page.
|
||||
|
||||
## Import antd
|
||||
|
||||
@ -59,10 +51,8 @@ $ yarn add antd
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import 'antd/dist/reset.css';
|
||||
import './App.css';
|
||||
import React from 'react';
|
||||
|
||||
const App = () => (
|
||||
<div className="App">
|
||||
@ -76,77 +66,3 @@ export default App;
|
||||
OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at its [User Guide](https://create-react-app.dev/docs/getting-started).
|
||||
|
||||
We are successfully running antd components now, go build your own application!
|
||||
|
||||
## Test with Jest
|
||||
|
||||
`create-react-app` comes with `jest` built in. Jest does not support `esm` modules, and Ant Design uses them. In order to test your Ant Design application with Jest you have to add the following to your `package.json` :
|
||||
|
||||
```json
|
||||
"jest": {
|
||||
"transformIgnorePatterns": [
|
||||
"/node_modules/(?!antd|@ant-design|rc-.+?|@babel/runtime).+(js|jsx)$"
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced Guides
|
||||
|
||||
In the real world, we usually have to modify default webpack config for custom needs such as themes. We can achieve that by using [craco](https://github.com/gsoft-inc/craco) which is one of create-react-app's custom config solutions.
|
||||
|
||||
Install craco and modify the `scripts` field in `package.json`.
|
||||
|
||||
```bash
|
||||
$ yarn add @craco/craco
|
||||
```
|
||||
|
||||
```diff
|
||||
/* package.json */
|
||||
"scripts": {
|
||||
- "start": "react-scripts start",
|
||||
- "build": "react-scripts build",
|
||||
- "test": "react-scripts test",
|
||||
+ "start": "craco start",
|
||||
+ "build": "craco build",
|
||||
+ "test": "craco test",
|
||||
}
|
||||
```
|
||||
|
||||
Then create a `craco.config.js` at root directory of your project for further overriding.
|
||||
|
||||
```js
|
||||
/* craco.config.js */
|
||||
module.exports = {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### Customize Theme
|
||||
|
||||
Ref to the [Customize Theme documentation](/docs/react/customize-theme). Modify theme with ConfigProvider:
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MyApp />
|
||||
</ConfigProvider>
|
||||
);
|
||||
```
|
||||
|
||||
## eject
|
||||
|
||||
You can also eject your application using [yarn run eject](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) for a custom setup of create-react-app, although you should dig into it by yourself.
|
||||
|
||||
## Summary
|
||||
|
||||
Finally, we used antd with create-react-app successfully, the source code of this guide was pushed to [create-react-app-antd](https://github.com/ant-design/create-react-app-antd) which you could clone and use it directly.
|
||||
|
||||
Next part, We will introduce how to use antd in [TypeScript](/docs/react/use-in-typescript) and [Umi](/docs/react/practical-projects), let's keep moving!
|
||||
|
||||
@ -3,21 +3,13 @@ order: 4
|
||||
title: 在 create-react-app 中使用
|
||||
---
|
||||
|
||||
[create-react-app](https://github.com/facebookincubator/create-react-app) 是业界最优秀的 React 应用开发工具之一，本文会尝试在 create-react-app 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。
|
||||
|
||||
---
|
||||
[create-react-app](https://create-react-app.dev/) 是业界最优秀的 React 应用开发工具之一，本文会尝试使用 `create-react-app` 创建一个项目，并引入 antd。
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
|
||||
```bash
|
||||
$ yarn create react-app antd-demo
|
||||
|
||||
# or
|
||||
|
||||
$ npx create-react-app antd-demo
|
||||
```
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo' yarn='$ yarn create react-app antd-demo' pnpm='$ pnpm create react-app antd-demo'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
|
||||
|
||||
@ -59,10 +51,8 @@ $ yarn add antd
|
||||
修改 `src/App.js`，引入 antd 的按钮组件。
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import 'antd/dist/reset.css';
|
||||
import './App.css';
|
||||
import React from 'react';
|
||||
|
||||
const App = () => (
|
||||
<div className="App">
|
||||
@ -76,69 +66,3 @@ export default App;
|
||||
好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://create-react-app.dev/docs/getting-started)。
|
||||
|
||||
我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！
|
||||
|
||||
## 高级配置
|
||||
|
||||
这个例子在实际开发中还有一些优化的空间，比如无法进行主题配置。
|
||||
|
||||
此时我们需要对 create-react-app 的默认配置进行自定义，这里我们使用 [craco](https://github.com/gsoft-inc/craco) （一个对 create-react-app 进行自定义配置的社区解决方案）。
|
||||
|
||||
现在我们安装 craco 并修改 `package.json` 里的 `scripts` 属性。
|
||||
|
||||
```bash
|
||||
$ yarn add @craco/craco
|
||||
```
|
||||
|
||||
```diff
|
||||
/* package.json */
|
||||
"scripts": {
|
||||
- "start": "react-scripts start",
|
||||
- "build": "react-scripts build",
|
||||
- "test": "react-scripts test",
|
||||
+ "start": "craco start",
|
||||
+ "build": "craco build",
|
||||
+ "test": "craco test",
|
||||
}
|
||||
```
|
||||
|
||||
然后在项目根目录创建一个 `craco.config.js` 用于修改默认配置。
|
||||
|
||||
```js
|
||||
/* craco.config.js */
|
||||
module.exports = {
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### 自定义主题
|
||||
|
||||
参考 [配置主题](/docs/react/customize-theme)，通过 ConfigProvider 进行主题配置：
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { ConfigProvider } from 'antd';
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MyApp />
|
||||
</ConfigProvider>
|
||||
);
|
||||
```
|
||||
|
||||
## eject
|
||||
|
||||
你也可以使用 create-react-app 提供的 [yarn run eject](https://create-react-app.dev/docs/available-scripts/#npm-run-eject) 命令将所有内建的配置暴露出来。不过这种配置方式需要你自行探索，不在本文讨论范围内。
|
||||
|
||||
## 小结
|
||||
|
||||
以上是在 create-react-app 中使用 antd 的相关实践，你也可以借鉴此文的做法在自己的 webpack 工作流中使用 antd。
|
||||
|
||||
上述教程的脚手架源码我们放在 [create-react-app-antd](https://github.com/ant-design/create-react-app-antd) 中，你可以直接下载使用。
|
||||
|
||||
接下来我们会介绍如何在 [TypeScript](/docs/react/use-in-typescript) 和 [Umi](/docs/react/practical-projects) 中使用 antd，欢迎继续阅读。
|
||||
|
||||
50
docs/react/use-with-next.en-US.md
Normal file
50
docs/react/use-with-next.en-US.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
order: 4
|
||||
title: Usage with Next.js
|
||||
---
|
||||
|
||||
[Next.js](https://nextjs.org/) is currently the most popular React server-side isomorphic framework in the world. This article will try to use `antd` components in projects created by Next.js.
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting, or use another npm registry if any network errors happen during it.
|
||||
|
||||
After the initialization is complete, we enter the project and start.
|
||||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
Open the browser at http://localhost:3000/. if you see the NEXT logo, it is considered a success.
|
||||
|
||||
## Import antd
|
||||
|
||||
Now we install `antd` from yarn or npm.
|
||||
|
||||
```bash
|
||||
$ npm install antd --save
|
||||
```
|
||||
|
||||
Modify `src/app/page.tsx`, import Button component from `antd`.
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const Home = () => (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Home;
|
||||
```
|
||||
|
||||
OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `Next.js` at its [User Guide](https://nextjs.org/).
|
||||
|
||||
We are successfully running antd components now, go build your own application!
|
||||
50
docs/react/use-with-next.zh-CN.md
Normal file
50
docs/react/use-with-next.zh-CN.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
order: 4
|
||||
title: 在 Next.js 中使用
|
||||
---
|
||||
|
||||
[Next.js](https://nextjs.org/) 是目前世界上最流行的 React 服务端同构框架，本文会尝试在 Next.js 创建的工程中使用 `antd` 组件。
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
|
||||
<InstallDependencies npm='$ npx create-next-app antd-demo' yarn='$ yarn create next-app antd-demo' pnpm='$ pnpm create next-app antd-demo'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装项目的各种必要依赖，在安装过程中，有一些配置项需要自行选择，如果在过程中出现网络问题，请尝试配置代理，或使用其他 npm registry。
|
||||
|
||||
初始化完成后，我们进入项目并启动。
|
||||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
此时使用浏览器访问 http://localhost:3000/ ，看到 NEXT 的 logo 就算成功了。
|
||||
|
||||
## 引入 antd
|
||||
|
||||
现在从 yarn 或 npm 安装并引入 antd。
|
||||
|
||||
```bash
|
||||
$ npm install antd --save
|
||||
```
|
||||
|
||||
修改 `src/app/page.tsx`，引入 antd 的按钮组件。
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const Home = () => (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Home;
|
||||
```
|
||||
|
||||
好了，现在你应该能看到页面上已经有了 `antd` 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 Next.js 的[官方文档](https://nextjs.org/)。
|
||||
|
||||
我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！
|
||||
75
docs/react/use-with-typescript.en-US.md
Normal file
75
docs/react/use-with-typescript.en-US.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
order: 5
|
||||
title: Usage with TypeScript
|
||||
---
|
||||
|
||||
Let's create a `TypeScript` project by using `create-react-app`, then import `antd` step by step.
|
||||
|
||||
> We build `antd` based on latest stable version of TypeScript (`>=5.0.0`), please make sure your project dependency matches it.
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Ensure your system has installed latest version of [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/).
|
||||
|
||||
Create a new [cra-template-typescript](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript) project named `antd-demo-ts`.
|
||||
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo-ts --template typescript' yarn='$ yarn create react-app antd-demo-ts --template typescript' pnpm='$ pnpm create react-app antd-demo-ts --template typescript'></InstallDependencies>
|
||||
|
||||
If you are using `vite`, there will be an option during build where you can choose the `typescript` template.
|
||||
|
||||
|
||||
|
||||
Then we go inside `antd-demo-ts` and start it.
|
||||
|
||||
```bash
|
||||
$ cd antd-demo-ts
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
Open browser at http://localhost:3000/, it renders a header saying "Welcome to React" on the page.
|
||||
|
||||
## Import antd
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
Modify `src/App.tsx`, import Button component from `antd`.
|
||||
|
||||
```tsx
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
OK, reboot with `yarn start`, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `create-react-app` at it's [User Guide](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app).
|
||||
|
||||
`antd` is written in TypeScript with complete definitions, try out and enjoy the property suggestion and typing check.
|
||||
|
||||
|
||||
|
||||
> Don't install `@types/antd`.
|
||||
|
||||
### Customize Theme
|
||||
|
||||
Ref to the [Customize Theme documentation](/docs/react/customize-theme). Modify theme with ConfigProvider:
|
||||
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
|
||||
<MyApp />
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
75
docs/react/use-with-typescript.zh-CN.md
Normal file
75
docs/react/use-with-typescript.zh-CN.md
Normal file
@ -0,0 +1,75 @@
|
||||
---
|
||||
order: 5
|
||||
title: 在 TypeScript 中使用
|
||||
---
|
||||
|
||||
使用 `create-react-app` 一步步地创建一个 `TypeScript` 项目，并引入 antd。
|
||||
|
||||
> `antd` 基于最新稳定版本的 TypeScript（`>=5.0.0`），请确保项目中使用匹配的版本。
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
请确保电脑上已经安装了最新版的 [yarn](https://yarnpkg.com) 或者 [npm](https://www.npmjs.com/)。
|
||||
|
||||
创建 [cra-template-typescript](https://github.com/facebook/create-react-app/tree/main/packages/cra-template-typescript) 项目。
|
||||
|
||||
<InstallDependencies npm='$ npx create-react-app antd-demo-ts --template typescript' yarn='$ yarn create react-app antd-demo-ts --template typescript' pnpm='$ pnpm create react-app antd-demo-ts --template typescript'></InstallDependencies>
|
||||
|
||||
如果你使用的是 `vite` 作为脚手架，那么在创建过程中会有一个选项，你可以选择 `typescript` 模板。
|
||||
|
||||
|
||||
|
||||
然后我们进入项目并启动。
|
||||
|
||||
```bash
|
||||
$ cd antd-demo-ts
|
||||
$ yarn start
|
||||
```
|
||||
|
||||
此时浏览器会访问 http://localhost:3000/ ，看到 `Welcome to React` 的界面就算成功了。
|
||||
|
||||
## 引入 antd
|
||||
|
||||
```bash
|
||||
$ yarn add antd
|
||||
```
|
||||
|
||||
修改 `src/App.tsx`，引入 antd 的按钮组件。
|
||||
|
||||
```tsx
|
||||
import { Button } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
重新启动 `yarn start`，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 create-react-app 的[官方文档](https://create-react-app.dev/docs/getting-started#creating-a-typescript-app)。
|
||||
|
||||
`antd` 使用 TypeScript 书写并提供了完整的定义，你可以享受组件属性输入建议和定义检查的功能。
|
||||
|
||||
|
||||
|
||||
> 注意不要安装 `@types/antd`。
|
||||
|
||||
### 自定义主题
|
||||
|
||||
参考 [配置主题](/docs/react/customize-theme)，通过 ConfigProvider 进行主题配置：
|
||||
|
||||
```tsx
|
||||
import { ConfigProvider } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
|
||||
<MyApp />
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
69
docs/react/use-with-vite.en-US.md
Normal file
69
docs/react/use-with-vite.en-US.md
Normal file
@ -0,0 +1,69 @@
|
||||
---
|
||||
order: 4
|
||||
title: Usage with vite
|
||||
---
|
||||
|
||||
[vite](https://vitejs.dev/) is one of the best React application development tools. We are going to use `antd` within it and modify the vite config for some customized needs.
|
||||
|
||||
## Install and Initialization
|
||||
|
||||
Before all start, you may need install [yarn](https://github.com/yarnpkg/yarn/) or [pnpm](https://pnpm.io/).
|
||||
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo'></InstallDependencies>
|
||||
|
||||
The tool will create and initialize environment and dependencies automatically, please try config your proxy setting, or use another npm registry if any network errors happen during it.
|
||||
|
||||
Then we go inside `antd-demo` install dependencies and start it.
|
||||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ npm install
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
Open the browser at http://localhost:5173/. It renders a header saying `Vite + React` on the page.
|
||||
|
||||
## Import antd
|
||||
|
||||
Below is the default directory structure.
|
||||
|
||||
```
|
||||
├── public
|
||||
│ └── vite.svg
|
||||
├── src
|
||||
│ └── assets
|
||||
│ └── react.svg
|
||||
│ ├── App.css
|
||||
│ ├── App.js
|
||||
│ ├── index.css
|
||||
│ ├── main.js
|
||||
│ └── logo.svg
|
||||
├── index.html
|
||||
├── package.json
|
||||
└── vite.config.ts
|
||||
```
|
||||
|
||||
Now we install `antd` from yarn or npm.
|
||||
|
||||
```bash
|
||||
$ npm install antd --save
|
||||
```
|
||||
|
||||
Modify `src/App.js`, import Button component from `antd`.
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App = () => (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
OK, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `vite` at its [User Guide](https://vitejs.dev/).
|
||||
|
||||
We are successfully running antd components now, go build your own application!
|
||||
69
docs/react/use-with-vite.zh-CN.md
Normal file
69
docs/react/use-with-vite.zh-CN.md
Normal file
@ -0,0 +1,69 @@
|
||||
---
|
||||
order: 4
|
||||
title: 在 vite 中使用
|
||||
---
|
||||
|
||||
[vite](https://cn.vitejs.dev/) 是业界最优秀的 React 应用开发工具之一，本文会尝试在 vite 创建的工程中使用 `antd` 组件，并自定义 vite 的配置以满足各类工程化需求。
|
||||
|
||||
## 安装和初始化
|
||||
|
||||
在开始之前，你可能需要安装 [yarn](https://github.com/yarnpkg/yarn/) 或者 [pnpm](https://pnpm.io/zh/)。
|
||||
|
||||
<InstallDependencies npm='$ npm create vite antd-demo' yarn='$ yarn create vite antd-demo' pnpm='$ pnpm create vite antd-demo'></InstallDependencies>
|
||||
|
||||
工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理，或使用其他 npm registry。
|
||||
|
||||
然后我们进入项目安装依赖并启动。
|
||||
|
||||
```bash
|
||||
$ cd antd-demo
|
||||
$ npm install
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
此时使用浏览器访问 http://localhost:5173/ ，看到 `Vite + React` 的界面就算成功了。
|
||||
|
||||
## 引入 antd
|
||||
|
||||
这是 vite 生成的默认目录结构。
|
||||
|
||||
```
|
||||
├── public
|
||||
│ └── vite.svg
|
||||
├── src
|
||||
│ └── assets
|
||||
│ └── react.svg
|
||||
│ ├── App.css
|
||||
│ ├── App.js
|
||||
│ ├── index.css
|
||||
│ ├── main.js
|
||||
│ └── logo.svg
|
||||
├── index.html
|
||||
├── package.json
|
||||
└── vite.config.js
|
||||
```
|
||||
|
||||
现在从 yarn 或 npm 安装并引入 antd。
|
||||
|
||||
```bash
|
||||
$ npm install antd --save
|
||||
```
|
||||
|
||||
修改 `src/App.js`，引入 antd 的按钮组件。
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const App = () => (
|
||||
<div className="App">
|
||||
<Button type="primary">Button</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
好了，现在你应该能看到页面上已经有了 `antd` 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vite 的[官方文档](https://cn.vitejs.dev/)。
|
||||
|
||||
我们现在已经把 antd 组件成功运行起来了，开始开发你的应用吧！
|
||||
@ -143,8 +143,9 @@ title: 数据格式
|
||||
|
||||
#### 数据加载
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*E6pGTJYEh-gAAAAAAAAAAABkARQnAQ">
|
||||
|
||||
</ImagePreview>
|
||||
数据加载用「骨架屏」表示。
|
||||
|
||||
## 参考文档
|
||||
|
||||
@ -117,7 +117,9 @@ skip: true
|
||||
|
||||
### 顶部全局提示反馈（Message）
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img no-padding" src="https://gw.alipayobjects.com/zos/rmsportal/pqJMJfJGLkYTDbLyJwIg.png" description="当用户不必等待较长时间的加载时使用。">
|
||||
</ImagePreview>
|
||||
|
||||
通过一个操作引发的反馈浮层位于顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
|
||||
|
||||
|
||||
@ -14,8 +14,9 @@ Fitts's Law is an ergonomic principle that ties the size of a target and its con
|
||||
|
||||
## Always-Visible Tools
|
||||
|
||||
<img class="preview-img" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Always-Visible Tools, from Zhihu" description="Status No.1: A clear clickable area makes it easier to highlight the button on the page.<br>Status No.2: As hovering over the button, the mouse pointer turns into a hand symbol, and the fill color of the button changes to a dark color, which provides a clear call to action.<br>Status No.3: The style of the button obviously changes once clicked." src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
</ImagePreview>
|
||||
If an action is critical, expose it directly in the interface and keep it always visible.
|
||||
|
||||
<br>
|
||||
@ -24,7 +25,9 @@ If an action is critical, expose it directly in the interface and keep it always
|
||||
|
||||
## Hover-Reveal Tools
|
||||
|
||||
<img class="preview-img" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Hover-Reveal Tools" description="On mouse hover, the tools are revealed." src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
</ImagePreview>
|
||||
|
||||
Instead of making Contextual Tools always visible, we can show them on demand. One way to do this is to reveal the tools when the user pauses the mouse over an object.
|
||||
|
||||
@ -34,7 +37,9 @@ Instead of making Contextual Tools always visible, we can show them on demand. O
|
||||
|
||||
## Toggle-Reveal Tools
|
||||
|
||||
<img class="preview-img" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of Toggle-Reveal Tools" description="The table reveals an input box from the text only when the edit mode is turned on for the area." src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
</ImagePreview>
|
||||
|
||||
Toggle a tool mode for an area or page when the actions are not the main flow. The tools to accomplish this are revealed on the activation of the toggle.
|
||||
|
||||
@ -44,13 +49,17 @@ Toggle a tool mode for an area or page when the actions are not the main flow. T
|
||||
|
||||
## Visible Area ≠ Clickable Area
|
||||
|
||||
<img class="preview-img" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of hypertext hot spot" description="When hovering on the cell in which the hypertext is positioned, the mouse turns from a cursor to a hand symbol. Click it and jump to another page." src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
</ImagePreview>
|
||||
|
||||
The clickable area of hypertext is affected by the length of the string in a cell. The whole cell can be set to a hot spot in order to be triggered easier.
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="example of button hot spot" description="Move the mouse near the button and activate the hover state." src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
</ImagePreview>
|
||||
|
||||
Increase the clickable hot spot to strengthen the responsiveness rather than increase the size of the button.
|
||||
|
||||
|
||||
@ -13,8 +13,9 @@ title: 简化交互
|
||||
|
||||
## 实时可见工具
|
||||
|
||||
<img class="preview-img" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>状态二：鼠标悬停时，鼠标「指针」变为「手型」，底色发生变化，邀请用户点击。<br>状态三：鼠标点击后，和未点击前有明显的区分。" src="https://gw.alipayobjects.com/zos/rmsportal/ofpeZpgdrqXcRpTlVXTp.png">
|
||||
</ImagePreview>
|
||||
如果某个操作非常重要，就应该把它放在界面中，并实时可见。
|
||||
|
||||
<br>
|
||||
@ -23,8 +24,9 @@ title: 简化交互
|
||||
|
||||
## 悬停即现工具
|
||||
|
||||
<img class="preview-img" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="悬停即现工具示例" description="鼠标悬停时，出现操作项。" src="https://gw.alipayobjects.com/zos/rmsportal/XzKWrNfqIMNnIrwWNJYg.png">
|
||||
</ImagePreview>
|
||||
如果某个操作不那么重要，或者使用「实时可见工具」过于啰嗦会影响用户阅读时，可以在悬停在该对象上时展示操作项。
|
||||
|
||||
<br>
|
||||
@ -33,7 +35,9 @@ title: 简化交互
|
||||
|
||||
## 开关显示工具
|
||||
|
||||
<img class="preview-img" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="开关显示工具示例" description="用户点击「修改」后，Table 中「文本」变成「输入框」，开启编辑功能。" src="https://gw.alipayobjects.com/zos/rmsportal/iLilpTYKqogBNlwpmVGw.png">
|
||||
</ImagePreview>
|
||||
|
||||
如果某些操作只需要在特定模式时显示，可以通过开关来实现。
|
||||
|
||||
@ -43,13 +47,17 @@ title: 简化交互
|
||||
|
||||
## 可视区域 ≠ 可点击区域
|
||||
|
||||
<img class="preview-img" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="文字链热区示例" description="当悬浮在 ID 所在的文字链单元格时，鼠标「指针」随即变为「手型」，单击即可跳转。" src="https://gw.alipayobjects.com/zos/rmsportal/lhOpWlaOzwsuHGxqHgPg.png">
|
||||
</ImagePreview>
|
||||
|
||||
在使用 Table 时，文字链的点击范围受到文字长短影响，可以设置整个单元格为热区，以便用户触发。
|
||||
|
||||
<br>
|
||||
|
||||
<img class="preview-img" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
<ImagePreview>
|
||||
<img class="preview-img" alt="按钮热区示例" description="鼠标移入按钮附近，即可激活 Hover 状态。" src="https://gw.alipayobjects.com/zos/rmsportal/BlUnqNCHsgUnhnRjMTnX.png">
|
||||
</ImagePreview>
|
||||
|
||||
当需要增强按钮的响应性时，可以通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user