diff --git a/.dumi/theme/builtins/Alert/index.tsx b/.dumi/theme/builtins/Alert/index.tsx new file mode 100644 index 0000000000..60fe59f45e --- /dev/null +++ b/.dumi/theme/builtins/Alert/index.tsx @@ -0,0 +1,8 @@ +import { Alert, AlertProps } from 'antd'; +import React, { FC } from 'react'; + +const MdAlert: FC = ({ style, ...props }) => { + return ; +}; + +export default MdAlert; diff --git a/.dumi/theme/builtins/ColorPaletteTool/index.tsx b/.dumi/theme/builtins/ColorPaletteTool/index.tsx new file mode 100644 index 0000000000..ed5147e4ec --- /dev/null +++ b/.dumi/theme/builtins/ColorPaletteTool/index.tsx @@ -0,0 +1,4 @@ +// @ts-ignore +import ColorPaletteTool from '../../common/Color/ColorPaletteTool'; + +export default ColorPaletteTool; diff --git a/.dumi/theme/builtins/ColorPaletteToolDark/index.tsx b/.dumi/theme/builtins/ColorPaletteToolDark/index.tsx new file mode 100644 index 0000000000..f47d9e1add --- /dev/null +++ b/.dumi/theme/builtins/ColorPaletteToolDark/index.tsx @@ -0,0 +1,4 @@ +// @ts-ignore +import ColorPaletteToolDark from '../../common/Color/ColorPaletteToolDark'; + +export default ColorPaletteToolDark; diff --git a/.dumi/theme/builtins/ColorPalettes/index.tsx b/.dumi/theme/builtins/ColorPalettes/index.tsx new file mode 100644 index 0000000000..cfb9e58bfb --- /dev/null +++ b/.dumi/theme/builtins/ColorPalettes/index.tsx @@ -0,0 +1,4 @@ +// @ts-ignore +import ColorPalettes from '../../common/Color/ColorPalettes'; + +export default ColorPalettes; diff --git a/.dumi/theme/builtins/Palette/index.tsx b/.dumi/theme/builtins/Palette/index.tsx new file mode 100644 index 0000000000..b94369dd0b --- /dev/null +++ b/.dumi/theme/builtins/Palette/index.tsx @@ -0,0 +1,4 @@ +// @ts-ignore +import Palette from '../../common/Color/Palette'; + +export default Palette; diff --git a/.dumi/theme/common/Color/ColorBlock.jsx b/.dumi/theme/common/Color/ColorBlock.jsx new file mode 100644 index 0000000000..282c6a6ca0 --- /dev/null +++ b/.dumi/theme/common/Color/ColorBlock.jsx @@ -0,0 +1,36 @@ +import React, { Component } from 'react'; +import CopyToClipboard from 'react-copy-to-clipboard'; +import { message } from 'antd'; + +export default class ColorBlock extends Component { + getTextStyle() { + const { color, index, dark } = this.props; + const colorMap = { + default: ['#fff', 'unset'], + dark: ['#314659', '#fff'], + }; + const [lastColor, firstColor] = dark ? colorMap.dark : colorMap.default; + return { + background: color, + color: index > 5 ? lastColor : firstColor, + fontWeight: index === 6 ? 'bold' : 'normal', + }; + } + + onCopied = () => { + const { color } = this.props; + message.success(`Copied: ${color}`); + }; + + render() { + const { color, index } = this.props; + return ( + +
+ color-{index} + {color.toLowerCase()} +
+ + ); + } +} diff --git a/.dumi/theme/common/Color/ColorPaletteTool.jsx b/.dumi/theme/common/Color/ColorPaletteTool.jsx new file mode 100644 index 0000000000..8a1936e1cd --- /dev/null +++ b/.dumi/theme/common/Color/ColorPaletteTool.jsx @@ -0,0 +1,61 @@ +import React, { Component } from 'react'; +import { FormattedMessage } from 'dumi'; +import ColorPicker from './ColorPicker'; +import ColorPatterns from './ColorPatterns'; + +const primaryMinSaturation = 70; // 主色推荐最小饱和度 +const primaryMinBrightness = 70; // 主色推荐最小亮度 + +export default class ColorPaletteTool extends Component { + state = { + primaryColor: '#1890ff', + primaryColorInstance: null, + }; + + handleChangeColor = (e, color) => { + const value = e.target ? e.target.value : e; + this.setState({ + primaryColor: value, + primaryColorInstance: color, + }); + }; + + renderColorValidation() { + const { primaryColorInstance } = this.state; + let text = ''; + if (primaryColorInstance) { + if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) { + text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${( + primaryColorInstance.hsv.s * 100 + ).toFixed(2)}）`; + } + if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) { + text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${( + primaryColorInstance.hsv.v * 100 + ).toFixed(2)}）`; + } + } + return {text.trim()}; + } + + render() { + const { primaryColor } = this.state; + return ( +
+
+ +
+
+ +
+
+ + + + {primaryColor} + {this.renderColorValidation()} +
+
+ ); + } +} diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.jsx b/.dumi/theme/common/Color/ColorPaletteToolDark.jsx new file mode 100644 index 0000000000..e1a8ffb6fb --- /dev/null +++ b/.dumi/theme/common/Color/ColorPaletteToolDark.jsx @@ -0,0 +1,107 @@ +import React, { Component } from 'react'; +import { FormattedMessage } from 'dumi'; +import { Row, Col } from 'antd'; +import ColorPicker from './ColorPicker'; +import ColorPatterns from './ColorPatterns'; + +const primaryMinSaturation = 70; // 主色推荐最小饱和度 +const primaryMinBrightness = 70; // 主色推荐最小亮度 + +export default class ColorPaletteTool extends Component { + state = { + primaryColor: '#1890ff', + backgroundColor: '#141414', + primaryColorInstance: null, + }; + + handleChangeColor = (e, color) => { + const value = e.target ? e.target.value : e; + this.setState({ + primaryColor: value, + primaryColorInstance: color, + }); + }; + + handleChangeBackgroundColor = e => { + const value = e.target ? e.target.value : e; + this.setState({ + backgroundColor: value, + }); + }; + + renderColorValidation() { + const { primaryColorInstance } = this.state; + let text = ''; + if (primaryColorInstance) { + if (primaryColorInstance.hsv.s * 100 < primaryMinSaturation) { + text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${( + primaryColorInstance.hsv.s * 100 + ).toFixed(2)}）`; + } + if (primaryColorInstance.hsv.v * 100 < primaryMinBrightness) { + text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${( + primaryColorInstance.hsv.v * 100 + ).toFixed(2)}）`; + } + } + return ( + + {text.trim()} + + ); + } + + render() { + const { primaryColor, backgroundColor } = this.state; + return ( +
+
+ +
+
+ + +
+ +
+ + + + + + + {primaryColor} + + + + + +
+ +
+ + + + + + + {backgroundColor} + + + + + + {this.renderColorValidation()} +
+
+ ); + } +} diff --git a/.dumi/theme/common/Color/ColorPalettes.jsx b/.dumi/theme/common/Color/ColorPalettes.jsx new file mode 100644 index 0000000000..a2c2869f01 --- /dev/null +++ b/.dumi/theme/common/Color/ColorPalettes.jsx @@ -0,0 +1,94 @@ +import React from 'react'; +import cls from 'classnames'; +import Palette from './Palette'; + +const ColorPalettes = props => { + const { dark } = props; + + const colors = [ + { + name: 'red', + english: 'Dust Red', + chinese: '薄暮', + description: '斗志、奔放', + }, + { + name: 'volcano', + english: 'Volcano', + chinese: '火山', + description: '醒目、澎湃', + }, + { + name: 'orange', + english: 'Sunset Orange', + chinese: '日暮', + description: '温暖、欢快', + }, + { + name: 'gold', + english: 'Calendula Gold', + chinese: '金盏花', + description: '活力、积极', + }, + { + name: 'yellow', + english: 'Sunrise Yellow', + chinese: '日出', + description: '出生、阳光', + }, + { + name: 'lime', + english: 'Lime', + chinese: '青柠', + description: '自然、生机', + }, + { + name: 'green', + english: 'Polar Green', + chinese: '极光绿', + description: '健康、创新', + }, + { + name: 'cyan', + english: 'Cyan', + chinese: '明青', + description: '希望、坚强', + }, + { + name: 'blue', + english: 'Daybreak Blue', + chinese: '拂晓蓝', + description: '包容、科技、普惠', + }, + { + name: 'geekblue', + english: 'Geek Blue', + chinese: '极客蓝', + description: '探索、钻研', + }, + { + name: 'purple', + english: 'Golden Purple', + chinese: '酱紫', + description: '优雅、浪漫', + }, + { + name: 'magenta', + english: 'Magenta', + chinese: '法式洋红', + description: '明快、感性', + }, + ]; + const colorCls = cls('color-palettes', { + 'color-palettes-dark': !!dark, + }); + return ( +
+ {colors.map(color => ( + + ))} +
+ ); +}; + +export default ColorPalettes; diff --git a/.dumi/theme/common/Color/ColorPatterns.jsx b/.dumi/theme/common/Color/ColorPatterns.jsx new file mode 100644 index 0000000000..6989b20215 --- /dev/null +++ b/.dumi/theme/common/Color/ColorPatterns.jsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { generate } from '@ant-design/colors'; +import uniq from 'lodash/uniq'; +import ColorBlock from './ColorBlock'; + +export default function ColorPatterns({ color, dark, backgroundColor }) { + const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); + return uniq(colors).map((colorString, i) => ( + + )); +} diff --git a/.dumi/theme/common/Color/ColorPicker.tsx b/.dumi/theme/common/Color/ColorPicker.tsx new file mode 100644 index 0000000000..5e7fe77f5b --- /dev/null +++ b/.dumi/theme/common/Color/ColorPicker.tsx @@ -0,0 +1,126 @@ +import React, { Component } from 'react'; +import { SketchPicker } from 'react-color'; + +const noop = () => {}; + +interface ColorPickerProps { + color?: string; + small: boolean; + position: string; + presetColors?: string[]; + onChange: (hex: string, color: { hex: string }) => void; + onChangeComplete: (hex: string) => void; +} + +export default class ColorPicker extends Component { + static getDerivedStateFromProps(props: ColorPickerProps) { + if ('color' in props) { + return { + color: props.color, + }; + } + return null; + } + + state = { + displayColorPicker: false, + color: undefined, + }; + + handleClick = () => { + const { displayColorPicker } = this.state; + this.setState({ displayColorPicker: !displayColorPicker }); + }; + + handleClose = () => { + this.setState({ displayColorPicker: false }); + }; + + handleChange = (color: { hex: string }) => { + const { onChange = noop } = this.props; + this.setState({ color: color.hex }); + onChange(color.hex, color); + }; + + handleChangeComplete = (color: { hex: string }) => { + const { onChangeComplete = noop } = this.props; + this.setState({ color: color.hex }); + onChangeComplete(color.hex); + }; + + render() { + const { small, position = 'bottom', presetColors } = this.props; + const { color, displayColorPicker } = this.state; + const width = small ? 80 : 120; + const styles: Record = { + color: { + width: `${width}px`, + height: small ? '16px' : '24px', + borderRadius: '2px', + background: color, + }, + swatch: { + padding: '4px', + background: '#fff', + borderRadius: '2px', + boxShadow: '0 0 0 1px rgba(0,0,0,.1)', + display: 'inline-block', + cursor: 'pointer', + }, + popover: { + position: 'absolute', + zIndex: 10, + }, + cover: { + position: 'fixed', + top: '0px', + right: '0px', + bottom: '0px', + left: '0px', + }, + wrapper: { + position: 'inherit', + zIndex: 100, + }, + }; + + if (position === 'top') { + styles.wrapper.transform = `translate(calc(-100% + ${width + 8}px), -100%)`; + styles.wrapper.paddingBottom = 8; + } + + const swatch = ( +
+
+
+ ); + const picker = displayColorPicker ? ( +
+
+
+ +
+
+ ) : null; + + if (position === 'top') { + return ( +
+ {picker} + {swatch} +
+ ); + } + return ( +
+ {swatch} + {picker} +
+ ); + } +} diff --git a/.dumi/theme/common/Color/ColorStyle.tsx b/.dumi/theme/common/Color/ColorStyle.tsx new file mode 100644 index 0000000000..e12050f5c0 --- /dev/null +++ b/.dumi/theme/common/Color/ColorStyle.tsx @@ -0,0 +1,290 @@ +import { Global, css } from '@emotion/react'; +import useSiteToken from '../../../hooks/useSiteToken'; + +const gray = { + 1: '#fff', + 2: '#fafafa', + 3: '#f5f5f5', + 4: '#f0f0f0', + 5: '#d9d9d9', + 6: '#bfbfbf', + 7: '#8c8c8c', + 8: '#595959', + 9: '#434343', + 10: '#262626', + 11: '#1f1f1f', + 12: '#141414', + 13: '#000', +}; + +const ColorStyle = () => { + const { token } = useSiteToken(); + + const makePalette = (color: string, index: number = 1): string => { + if (index <= 10) { + return ` +.palette-${color}-${index} { + background: ${(token as any)[`${color}-${index}`]}; +} +${makePalette(color, index + 1)} + `; + } + return ''; + }; + + const makeGrayPalette = (index: number = 1): string => { + if (index <= 13) { + return ` +.palette-gray-${index} { + background: ${(gray as any)[index]}; +} +${makeGrayPalette(index + 1)} + `; + } + return ''; + }; + + return ( + + ); +}; + +export default ColorStyle; diff --git a/.dumi/theme/common/Color/Palette.jsx b/.dumi/theme/common/Color/Palette.jsx new file mode 100644 index 0000000000..ae05dbde62 --- /dev/null +++ b/.dumi/theme/common/Color/Palette.jsx @@ -0,0 +1,93 @@ +import React from 'react'; +import { message } from 'antd'; +import CopyToClipboard from 'react-copy-to-clipboard'; +import { presetDarkPalettes } from '@ant-design/colors'; + +const rgbToHex = rgbString => { + const rgb = rgbString.match(/\d+/g); + let r = parseInt(rgb[0], 10).toString(16); + let g = parseInt(rgb[1], 10).toString(16); + let b = parseInt(rgb[2], 10).toString(16); + r = r.length === 1 ? `0${r}` : r; + g = g.length === 1 ? `0${g}` : g; + b = b.length === 1 ? `0${b}` : b; + return `#${r}${g}${b}`; +}; + +export default class Palette extends React.Component { + componentDidMount() { + this.hexColors = {}; + Object.keys(this.colorNodes).forEach(key => { + const computedColor = getComputedStyle(this.colorNodes[key])['background-color']; + if (computedColor.includes('rgba')) { + this.hexColors[key] = computedColor; + } else { + this.hexColors[key] = rgbToHex(computedColor); + } + }); + this.forceUpdate(); + } + + render() { + this.colorNodes = this.colorNodes || {}; + const { + showTitle, + direction, + dark, + color: { name, description, english, chinese, count = 10 }, + } = this.props; + const className = direction === 'horizontal' ? 'color-palette-horizontal' : 'color-palette'; + const colors = []; + const colorName = `${english} / ${chinese}`; + const colorPaletteMap = { + dark: ['#fff', 'unset'], + default: ['rgba(0,0,0,0.85)', '#fff'], + }; + const [lastColor, firstColor] = dark ? colorPaletteMap.dark : colorPaletteMap.default; + for (let i = 1; i <= count; i += 1) { + const colorText = `${name}-${i}`; + const defaultBgStyle = dark ? presetDarkPalettes[name][i - 1] : ''; + colors.push( + message.success(`@${colorText} copied: ${this.hexColors[colorText]}`)} + key={colorText} + > +
{ + this.colorNodes[`${name}-${i}`] = node; + }} + className={`main-color-item palette-${name}-${i}`} + style={{ + color: (name === 'yellow' ? i > 6 : i > 5) ? firstColor : lastColor, + fontWeight: i === 6 ? 'bold' : 'normal', + backgroundColor: defaultBgStyle, + }} + title="click to copy color" + > + {colorText} + {this.hexColors ? ( + {this.hexColors[colorText]} + ) : null} +
+ , + ); + } + return ( +
+ {showTitle && ( +
+ {colorName} + {description} +
+ )} +
{colors}
+
+ ); + } +} + +Palette.defaultProps = { + color: { name: 'gray', count: 13 }, +} diff --git a/.dumi/theme/common/EditButton.tsx b/.dumi/theme/common/EditButton.tsx index f2f0566e1d..da1b7d438b 100644 --- a/.dumi/theme/common/EditButton.tsx +++ b/.dumi/theme/common/EditButton.tsx @@ -4,7 +4,7 @@ import { EditOutlined } from '@ant-design/icons'; import { css } from '@emotion/react'; import useSiteToken from '../../hooks/useSiteToken'; -const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/'; +const branchUrl = 'https://github.com/ant-design/ant-design/edit/next/'; export interface EditButtonProps { title: React.ReactNode; diff --git a/.dumi/theme/common/GlobalStyles.tsx b/.dumi/theme/common/GlobalStyles.tsx index 95c544e956..a75db52bd6 100644 --- a/.dumi/theme/common/GlobalStyles.tsx +++ b/.dumi/theme/common/GlobalStyles.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Global, css } from '@emotion/react'; import useSiteToken from '../../hooks/useSiteToken'; import { TinyColor } from '@ctrl/tinycolor'; +import ColorStyle from '../common/Color/ColorStyle'; const GlobalStyles = () => { const { token } = useSiteToken(); @@ -61,7 +62,7 @@ const GlobalStyles = () => { ol { list-style: none; } - + img { vertical-align: middle; border-style: none; @@ -1167,11 +1168,7 @@ const GlobalStyles = () => { .all-code-box-controls { position: absolute; top: -32px; - right: 0; - - ${antCls}-row-rtl & { - float: left; - } + inset-inline-end: 0; } ${antCls}-row-rtl { @@ -1783,6 +1780,234 @@ const GlobalStyles = () => { } `} /> + + {/* Preview Image */} + + + ); }; diff --git a/.dumi/theme/common/Loading.tsx b/.dumi/theme/common/Loading.tsx new file mode 100644 index 0000000000..6bef3b6fd1 --- /dev/null +++ b/.dumi/theme/common/Loading.tsx @@ -0,0 +1,28 @@ +import React, { type FC } from 'react'; +import { Skeleton, Space, Spin } from 'antd'; +import { useLocation } from 'dumi'; + +const Loading: FC = () => { + const { pathname } = useLocation(); + + if ( + pathname.startsWith('/components') || + pathname.startsWith('/docs') || + pathname.startsWith('/changelog') + ) { + return ( + + + + + ); + } + + return ( + + + + ); +}; + +export default Loading; diff --git a/.dumi/theme/slots/Header/Logo.tsx b/.dumi/theme/slots/Header/Logo.tsx index b4e52ca085..ea9d01957f 100644 --- a/.dumi/theme/slots/Header/Logo.tsx +++ b/.dumi/theme/slots/Header/Logo.tsx @@ -22,6 +22,8 @@ const useStyle = () => { letter-spacing: -0.18px; white-space: nowrap; text-decoration: none; + display: inline-flex; + align-items: center; &:hover { color: ${colorTextHeading}; @@ -65,7 +67,7 @@ const Logo = ({ isZhCN }: LogoProps) => {

logo - Ant Design + Ant Design

); diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx index d5f3f7a51f..2ac1648003 100644 --- a/.dumi/theme/slots/Header/Navigation.tsx +++ b/.dumi/theme/slots/Header/Navigation.tsx @@ -106,7 +106,7 @@ export default ({ const module = pathname .split('/') - .filter(path => path) + .filter((path) => path) .slice(0, -1) .join('/'); let activeMenuItem = module || 'home'; @@ -187,7 +187,7 @@ export default ({ ), - key: '/docs/resources', + key: 'docs/resources', }, showTechUIButton ? { diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index 7d010eddd9..a136af6ec4 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -17,10 +17,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b ### Usage upgrade after 4.24.0 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); -``` + ```jsx // works when >=4.24.0, recommended ✅ diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index 89e4de6a71..b72f294f15 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -18,10 +18,7 @@ demo: ### 4.24.0 用法升级 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); -``` + ```jsx // >=4.24.0 可用，推荐的写法 ✅ diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index 3ea4b0fcae..f4a581f64d 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -15,10 +15,7 @@ When there are more than a few options to choose from, you can wrap them in a `D ### Usage upgrade after 4.24.0 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); -``` + ```jsx // works when >=4.24.0, recommended ✅ diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index cb985a4048..54461bc468 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -19,10 +19,7 @@ demo: ### 4.24.0 用法升级 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); -``` + ```jsx // >=4.24.0 可用，推荐的写法 ✅ diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index 412aeef5fa..1e9c1b7667 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -20,10 +20,7 @@ More layouts with navigation: [Layout](/components/layout). ### Usage upgrade after 4.20.0 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); -``` + ```jsx // works when >=4.20.0, recommended ✅ diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 4cd74b6236..05f5ebf3b4 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -21,10 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg ### 4.20.0 用法升级 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); -``` + ```jsx // >=4.20.0 可用，推荐的写法 ✅ diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md index aded33ebac..5190e78bb7 100644 --- a/components/steps/index.en-US.md +++ b/components/steps/index.en-US.md @@ -3,8 +3,6 @@ category: Components group: Navigation title: Steps cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg -demo: - cols: 2 --- `Steps` is a navigation bar that guides users through the steps of a task. @@ -15,9 +13,19 @@ When a given task is complicated or has a certain sequence in the series of subt ### Usage upgrade after 4.24.0 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); + + +```jsx +// works when >=4.24.0, recommended ✅ +const items = [{ title: 'first step' }, { title: 'second step' }, { title: 'third step' }]; +return ; + +// works when <4.24.0, deprecated when >=4.24.0 🙅🏻‍♀️ + + + + +; ``` ## Examples @@ -43,21 +51,6 @@ ReactDOM.render( - - -; -``` - -## API - ### Steps The whole of the step bar. diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index 5e384b48f6..89872185de 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -4,8 +4,6 @@ subtitle: 步骤条 group: 导航 title: Steps cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg -demo: - cols: 2 --- 引导用户按照流程完成任务的导航条。 @@ -16,9 +14,19 @@ demo: ### 4.24.0 用法升级 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); + + +```jsx +// >=4.24.0 可用，推荐的写法 ✅ +const items = [{ title: '第一步' }, { title: '第二步' }, { title: '第三步' }]; +return ; + +// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️ + + + + +; ``` ## 代码演示 @@ -42,19 +50,6 @@ ReactDOM.render(Steps 嵌套 Steps 内联步骤 -```jsx -// >=4.24.0 可用，推荐的写法 ✅ -const items = [{ title: '第一步' }, { title: '第二步' }, { title: '第三步' }]; -return ; - -// <4.24.0 可用，>=4.24.0 时不推荐 🙅🏻‍♀️ - - - - -; -``` - ## API ### Steps diff --git a/components/switch/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/switch/__tests__/__snapshots__/demo-extend.test.ts.snap index 7f43155002..bdd2e4d867 100644 --- a/components/switch/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/switch/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -193,116 +193,130 @@ Array [ `; exports[`renders ./components/switch/demo/text.tsx extend context correctly 1`] = ` -Array [ - , -
, -
+
-
- +
- 1 - - - 0 + + 1 + + + 0 + - - , -
, -
+
-
- +
- + + - - - + + - - , -] + +
+
`; diff --git a/components/switch/__tests__/__snapshots__/demo.test.ts.snap b/components/switch/__tests__/__snapshots__/demo.test.ts.snap index a323d4566e..fe0be028b2 100644 --- a/components/switch/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/switch/__tests__/__snapshots__/demo.test.ts.snap @@ -193,116 +193,130 @@ Array [ `; exports[`renders ./components/switch/demo/text.tsx correctly 1`] = ` -Array [ - , -
, -
+
-
- +
- 1 - - - 0 + + 1 + + + 0 + - - , -
, -
+
-
- +
- + + - - - + + - - , -] + +
+
`; diff --git a/components/switch/demo/text.tsx b/components/switch/demo/text.tsx index 3314f10100..6af99605b4 100644 --- a/components/switch/demo/text.tsx +++ b/components/switch/demo/text.tsx @@ -1,19 +1,17 @@ import React from 'react'; import { CheckOutlined, CloseOutlined } from '@ant-design/icons'; -import { Switch } from 'antd'; +import { Switch, Space } from 'antd'; const App: React.FC = () => ( - <> + -
-
} unCheckedChildren={} defaultChecked /> - + ); export default App; diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 1eadf16aca..474c973f35 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -19,10 +19,7 @@ Ant Design has 3 types of Tabs for different situations. ### Usage upgrade after 4.23.0 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); -``` + ```jsx // works when >=4.23.0, recommended ✅ @@ -67,40 +64,40 @@ return ; ### Tabs -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | --- | -| activeKey | Current TabPane's key | string | - | | -| addIcon | Customize add icon | ReactNode | - | 4.4.0 | -| animated | Whether to change tabs with animation. Only works while `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | -| centered | Centers tabs | boolean | false | 4.4.0 | -| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | -| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | -| items | Configure tab content | [TabItem](#TabItem) | [] | 4.23.0 | -| moreIcon | The custom icon of ellipsis | ReactNode | <EllipsisOutlined /> | 4.14.0 | -| popupClassName | `className` for more dropdown. | string | - | 4.21.0 | -| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | -| size | Preset tab bar size | `large` \| `middle` \| `small` | `middle` | | -| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 | -| tabBarGutter | The gap between tabs | number | - | | -| tabBarStyle | Tab bar style object | CSSProperties | - | | -| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \ | `left` | `top` | | -| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | | -| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | | -| onChange | Callback executed when active tab is changed | function(activeKey) {} | - | | -| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (action === 'add' ? event : targetKey, action): void | - | | -| onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - | | -| onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 | -| items | TabItem content | [TabItemType](#TabItemType) | [] | 4.23.0 | +| Property | Description | Type | Default | Version | +| ---------------------- | --------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------- | ------------- | --- | +| activeKey | Current TabPane's key | string | - | | +| addIcon | Customize add icon | ReactNode | - | 4.4.0 | +| animated | Whether to change tabs with animation. Only works while `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| centered | Centers tabs | boolean | false | 4.4.0 | +| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | +| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | +| items | Configure tab content | [TabItem](#TabItem) | [] | 4.23.0 | +| moreIcon | The custom icon of ellipsis | ReactNode | <EllipsisOutlined /> | 4.14.0 | +| popupClassName | `className` for more dropdown. | string | - | 4.21.0 | +| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | +| size | Preset tab bar size | `large` \| `middle` \| `small` | `middle` | | +| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 | +| tabBarGutter | The gap between tabs | number | - | | +| tabBarStyle | Tab bar style object | CSSProperties | - | | +| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \ | `left` | `top` | | +| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | | +| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | | +| onChange | Callback executed when active tab is changed | function(activeKey) {} | - | | +| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (action === 'add' ? event : targetKey, action): void | - | | +| onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - | | +| onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 | +| items | TabItem content | [TabItemType](#TabItemType) | [] | 4.23.0 | More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs) ### TabItemType -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - | -| disabled | Set TabPane disabled | boolean | false | -| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | -| key | TabPane's key | string | - | -| label | TabPane's head display text | ReactNode | - | -| children | TabPane's head display content | ReactNode | - | +| Property | Description | Type | Default | +| ----------- | ------------------------------------------------------------------------------- | --------- | ------- | +| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - | +| disabled | Set TabPane disabled | boolean | false | +| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | +| key | TabPane's key | string | - | +| label | TabPane's head display text | ReactNode | - | +| children | TabPane's head display content | ReactNode | - | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index a012bdb008..4fbce2173c 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -22,10 +22,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 ### 4.23.0 用法升级 -```__react -import Alert from '../alert'; -ReactDOM.render(, mountNode); -``` + ```jsx // >=4.23.0 可用，推荐的写法 ✅ @@ -70,29 +67,29 @@ return ; ### Tabs -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| activeKey | 当前激活 tab 面板的 key | string | - | | -| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | -| animated | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | -| centered | 标签居中展示 | boolean | false | 4.4.0 | -| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | -| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | -| items | 配置选项卡内容 | [TabItemType](#TabItemType) | [] | 4.23.0 | -| moreIcon | 自定义折叠 icon | ReactNode | <EllipsisOutlined /> | 4.14.0 | -| popupClassName | 更多菜单的 `className` | string | - | 4.21.0 | -| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | -| size | 大小，提供 `large` `middle` 和 `small` 三种大小 | string | `middle` | | -| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 | -| tabBarGutter | tabs 之间的间隙 | number | - | | -| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | | -| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | | -| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | | -| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | | -| onChange | 切换面板的回调 | function(activeKey) {} | - | | -| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (action === 'add' ? event : targetKey, action): void | - | | -| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - | | -| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| ---------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------- | ------------- | +| activeKey | 当前激活 tab 面板的 key | string | - | | +| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | +| animated | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| centered | 标签居中展示 | boolean | false | 4.4.0 | +| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | +| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | +| items | 配置选项卡内容 | [TabItemType](#TabItemType) | [] | 4.23.0 | +| moreIcon | 自定义折叠 icon | ReactNode | <EllipsisOutlined /> | 4.14.0 | +| popupClassName | 更多菜单的 `className` | string | - | 4.21.0 | +| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | +| size | 大小，提供 `large` `middle` 和 `small` 三种大小 | string | `middle` | | +| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 | +| tabBarGutter | tabs 之间的间隙 | number | - | | +| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | | +| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | | +| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | | +| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | | +| onChange | 切换面板的回调 | function(activeKey) {} | - | | +| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (action === 'add' ? event : targetKey, action): void | - | | +| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - | | +| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 | > 更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs) diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index c641c66cf8..9b4a4a48a7 100644 --- a/components/typography/index.en-US.md +++ b/components/typography/index.en-US.md @@ -3,8 +3,6 @@ category: Components group: General title: Typography cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg -demo: - cols: 2 --- Basic text writing, including headings, body text, lists, and more. diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index 2b79783310..049bd67b24 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -4,8 +4,6 @@ subtitle: 排版 group: 通用 title: Typography cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg -demo: - cols: 2 --- 文本的基本格式。 diff --git a/docs/spec/colors.en-US.md b/docs/spec/colors.en-US.md index e7c525403e..6a1322b0fd 100644 --- a/docs/spec/colors.en-US.md +++ b/docs/spec/colors.en-US.md @@ -24,21 +24,13 @@ Ant Design system-level color system also comes from the "natural" design langua Ant Design's base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design. -```__react -import ColorPalettes from '../../site/theme/template/Color/ColorPalettes'; - -ReactDOM.render(, mountNode); -``` + Ant Design's color palette also has the ability to further extend. After careful elaboration by designers and programmers, we have come up with a set of color generation tools that combine the natural variation of colors. When there is a need for further color design, designers simply define the primary colors according to certain rules and will get a complete range of derived colors automatically . ### Neutral Color Palette -```__react -import Palette from '../../site/theme/template/Color/Palette'; - -ReactDOM.render(, mountNode); -``` + ### Data Visualization Color Palette @@ -48,11 +40,7 @@ Data visualization color palette is based on the basic color palette and neutral If the above palettes do not meet your needs, you can choose a main color below, and Ant Design's color generation algorithm will generate a palette for you. -```__react -import ColorPaletteTool from '../../site/theme/template/Color/ColorPaletteTool'; - -ReactDOM.render(, mountNode); -``` + ### Programmatic Usage @@ -93,8 +81,7 @@ We provide Less and JavaScript usage for developers. ### Brand Color - + The brand color is one of the most intuitive visual elements used that is used to embody product characteristics and communicate ideas. When selecting colors, it is important to understand how the brand color is used in the user interface. In the basic color palette to choose the main color, we recommend choosing the color plate from the shallow depth of the sixth color as the main color. Ant Design's brand color comes from blue of the base color palette, it's Hex value is 1890FF, application scenarios include: key action point, the operation status, important information highlighting, graphics and other scenes. diff --git a/docs/spec/colors.zh-CN.md b/docs/spec/colors.zh-CN.md index e44d2d6338..f1d0336e9c 100644 --- a/docs/spec/colors.zh-CN.md +++ b/docs/spec/colors.zh-CN.md @@ -28,11 +28,7 @@ Ant Design 系统级色彩体系同样源于「自然」的设计价值观。设 Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。 -```__react -import ColorPalettes from '../../site/theme/template/Color/ColorPalettes'; - -ReactDOM.render(, mountNode); -``` + Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序员的精心调制，结合了色彩自然变化的规律，我们得出了一套色彩生成工具，当有进一步色彩设计需求时，设计者只需按照一定规则定义完毕主色，便可以自动获得一系列完整的衍生色。 @@ -42,11 +38,7 @@ Ant Design 的色板还具备进一步拓展的能力。经过设计师和程序 中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 13 个颜色。 -```__react -import Palette from '../../site/theme/template/Color/Palette'; - -ReactDOM.render(, mountNode); -``` + ### 数据可视化色板 @@ -56,11 +48,7 @@ ReactDOM.render( -); - -const LinksList = () => ( - -); - -ReactDOM.render(, mountNode); -``` +- [Ant Design of React](/docs/react/introduce)（official implementation） +- [NG-ZORRO - Ant Design of Angular](http://ng.ant.design) +- [NG-ZORRO-MOBILE - Ant Design Mobile of Angular](http://ng.mobile.ant.design) +- [Ant Design of Vue](http://antdv.com) +- [Ant Design Blazor](https://ant-design-blazor.github.io/) +- [San UI Toolkit for Ant Design](https://ecomfe.github.io/santd) +- [antizer (ClojureScript)](https://github.com/priornix/antizer) ## Who's using Ant Design diff --git a/docs/spec/introduce.zh-CN.md b/docs/spec/introduce.zh-CN.md index 5d04f11f4a..0d074a1165 100644 --- a/docs/spec/introduce.zh-CN.md +++ b/docs/spec/introduce.zh-CN.md @@ -32,54 +32,13 @@ title: 介绍 我们采用 [React](http://facebook.github.io/react/) 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。 -```__react -import { - ExportOutlined, -} from '@ant-design/icons'; - -const LinkIcon = () => ( - -); - -const LinksList = () => ( - -); - -ReactDOM.render(, mountNode); -``` +- [Ant Design of React](/docs/react/introduce)（官方实现） +- [NG-ZORRO - Ant Design of Angular](http://ng.ant.design) +- [NG-ZORRO-MOBILE - Ant Design Mobile of Angular](http://ng.mobile.ant.design) +- [Ant Design of Vue](http://antdv.com) +- [Ant Design Blazor](https://ant-design-blazor.github.io/) +- [San UI Toolkit for Ant Design](https://ecomfe.github.io/santd) +- [antizer (ClojureScript)](https://github.com/priornix/antizer) ## 谁在使用 diff --git a/docs/spec/motion.en-US.md b/docs/spec/motion.en-US.md index 6e9f32c29b..a2004da85e 100644 --- a/docs/spec/motion.en-US.md +++ b/docs/spec/motion.en-US.md @@ -25,21 +25,41 @@ We can determine if an animation is effective or not from the following two aspe Different from animations usage in typical front-office applications, animations in enterprise level applications spend a great amount of efforts on reinforcing user interactions and the effectiveness of those interactions. Therefore, we derived three animation design principles from Ant Design's core design language: -```__react +```jsx | demo +/** + * inline: true + */ import { Col, Row } from 'antd'; const text = [ - { title: 'Natural', img: 'https://gw.alipayobjects.com/zos/rmsportal/LyTPSGknLUlxiVdwMWyu.gif', content: 'The animation should based on law of nature. This assures the animation is smooth by its nature and intuitive to its users.' }, - { title: 'Performant', img: 'https://gw.alipayobjects.com/zos/rmsportal/SQOZVQVIossbXpzDmihu.gif', content: 'The animation should have a transition time as minimal as possible so that it serves its purpose in the most effective way.' }, - { title: 'Concise', img: 'https://gw.alipayobjects.com/zos/rmsportal/OkIXkscKxywYLSrilPIf.gif', content: 'The animation should be meaningful and justified. An over fancy animation will frustrate its users, and therefore should always be avoided.' }, + { + title: 'Natural', + img: 'https://gw.alipayobjects.com/zos/rmsportal/LyTPSGknLUlxiVdwMWyu.gif', + content: + 'The animation should based on law of nature. This assures the animation is smooth by its nature and intuitive to its users.', + }, + { + title: 'Performant', + img: 'https://gw.alipayobjects.com/zos/rmsportal/SQOZVQVIossbXpzDmihu.gif', + content: + 'The animation should have a transition time as minimal as possible so that it serves its purpose in the most effective way.', + }, + { + title: 'Concise', + img: 'https://gw.alipayobjects.com/zos/rmsportal/OkIXkscKxywYLSrilPIf.gif', + content: + 'The animation should be meaningful and justified. An over fancy animation will frustrate its users, and therefore should always be avoided.', + }, ]; function Principle() { const childrenToRender = text.map(item => ( - +
-
+
+ +

{item.title}

{item.content}

@@ -54,14 +74,14 @@ function Principle() { ); } -ReactDOM.render(, mountNode); +export default Principle; ``` ### Natural Intuitive animations usually are backed by law of nature. This requires the animations to be smooth so that their users can feel the animations' motion being justified. A natural animation triggers its users with positive user experiences. -