source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: Use direct dumi code demo instead of sandpack (#56862)

Browse Source 
* docs(replace): replace sandpack demos with code blocks in customize-theme.en-US.md

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* docs: update demo paths in theme customization docs

* docs: add first example demo and update documentation

* docs(demo): add Radio component to disable-motion example

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(demo): initialize timerRef with null for proper typing

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
二货爱吃白萝卜
2026-02-04 20:37:02 +08:00
committed by GitHub
parent d442e3e1a6
commit 6e91b7f8af
20 changed files with 310 additions and 498 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
docs/react/customize-theme.en-US.md
View File

@@ -31,36 +31,8 @@ When you need context information (such as the content configured by ConfigProvi
By modifying `token` property of `theme`, we can modify Design Token globally. Some tokens will affect other tokens. We call these tokens Seed Token.
```sandpack
const sandpackConfig = {
autorun: true,
};
import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
// Seed Token
colorPrimary: '#00b96b',
borderRadius: 2,
// Alias Token
colorBgContainer: '#f6ffed',
},
}}
>
<Space>
<Button type="primary">Primary</Button>
<Button>Default</Button>
</Space>
</ConfigProvider>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/modify-theme-token.tsx">Customize Design Token</code>
### Use Preset Algorithms
@@ -72,33 +44,8 @@ Themes with different styles can be quickly generated by modifying `algorithm`.
You can switch algorithms by modifying the `algorithm` property of `theme` in ConfigProvider.
```sandpack
const sandpackConfig = {
dark: true,
};
import React from 'react';
import { Button, ConfigProvider, Input, Space, theme } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
// 1. Use dark algorithm
algorithm: theme.darkAlgorithm,
// 2. Combine dark algorithm and compact algorithm
// algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
}}
>
<Space>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/preset-algorithm.tsx">Use Preset Algorithms</code>
### Customize Component Token
@@ -112,99 +59,15 @@ By default, all component tokens can only override global token and will not be
In version `>= 5.8.0`, component tokens support the `algorithm` property, which can be used to enable algorithm or pass in other algorithms.
:::
```sandpack
import React from 'react';
import { ConfigProvider, Button, Space, Input, Divider } from 'antd';
const App: React.FC = () => (
<>
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: '#00b96b',
algorithm: true, // Enable algorithm
},
Input: {
colorPrimary: '#eb2f96',
algorithm: true, // Enable algorithm
}
},
}}
>
<Space>
<div style={{ fontSize: 14 }}>Enable algorithm: </div>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
<Divider />
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: '#00b96b',
},
Input: {
colorPrimary: '#eb2f96',
}
},
}}
>
<Space>
<div style={{ fontSize: 14 }}>Disable algorithm: </div>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
</>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/component-token.tsx">Customize Component Token</code>
### Disable Motion
antd has built-in interaction animations to make enterprise-level pages more detailed. In some extreme scenarios, it may affect the performance of page interaction. If you need to turn off the animation, try setting `motion` of `token` to `false`:
```sandpack
import React from 'react';
import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';
const App: React.FC = () => {
const [checked, setChecked] = React.useState<boolean>(false);
const timerRef = React.useRef<ReturnType<typeof setInterval>>();
React.useEffect(() => {
timerRef.current = setInterval(() => {
setChecked((prev) => !prev);
}, 500);
return () => {
if (timerRef.current) {
clearInterval(timerRef.current);
}
};
}, []);
const nodes = (
<Flex gap="small">
<Checkbox checked={checked}>Checkbox</Checkbox>
<Radio checked={checked}>Radio</Radio>
<Switch checked={checked} />
</Flex>
);
return (
<Row gutter={[24, 24]}>
<Col span={24}>{nodes}</Col>
<Col span={24}>
<ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>
</Col>
</Row>
);
};
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/disable-motion.tsx">Disable Motion</code>
## Advanced
@@ -239,100 +102,22 @@ fs.writeFileSync('/path/to/somewhere', cssText);
In v5, dynamically switching themes is very simple for users, you can dynamically switch themes at any time through the `theme` property of `ConfigProvider` without any additional configuration.
```sandpack
import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
import React from 'react';
const App: React.FC = () => {
const [primary, setPrimary] = React.useState('#1677ff');
return (
<>
<ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
<Divider />
<ConfigProvider
theme={{
token: {
colorPrimary: primary,
},
}}
>
<Space>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
</>
);
}
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/dynamic-theme.tsx">Switch Themes Dynamically</code>
### Nested Theme
By nesting `ConfigProvider` you can apply local theme to some parts of your page. Design Tokens that have not been changed in the child theme will inherit the parent theme.
```sandpack
import React from 'react';
import { Button, ConfigProvider, Space } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#1677ff',
},
}}
>
<Space>
<Button type="primary">Theme 1</Button>
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
},
}}
>
<Button type="primary">Theme 2</Button>
</ConfigProvider>
</Space>
</ConfigProvider>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/local-theme.tsx">Nested Theme</code>
### Consume Design Token
If you want to consume the Design Token under the current theme, we provide `useToken` hook to get Design Token.
```sandpack
import React from 'react';
import { Button, theme } from 'antd';
const { useToken } = theme;
const App: React.FC = () => {
const { token } = useToken();
return (
<div
style={{
backgroundColor: token.colorPrimaryBg,
padding: token.padding,
borderRadius: token.borderRadius,
color: token.colorPrimaryText,
fontSize: token.fontSize,
}}
>
Consume Design Token
</div>
);
};
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/use-token.tsx">Consume Design Token</code>
### Static consume (e.g. less)

243
docs/react/customize-theme.zh-CN.md
View File

@@ -31,36 +31,8 @@ Ant Design 设计规范和技术上支持灵活的样式定制，以满足业务
通过 `theme` 中的 `token` 属性，可以修改一些主题变量。部分主题变量会引起其他主题变量的变化，我们把这些主题变量称为 Seed Token。
```sandpack
const sandpackConfig = {
autorun: true,
};
import { Button, ConfigProvider, Space } from 'antd';
import React from 'react';
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
// Seed Token，影响范围大
colorPrimary: '#00b96b',
borderRadius: 2,
// 派生变量，影响范围小
colorBgContainer: '#f6ffed',
},
}}
>
<Space>
<Button type="primary">Primary</Button>
<Button>Default</Button>
</Space>
</ConfigProvider>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/modify-theme-token.tsx">修改主题变量</code>
### 使用预设算法
@@ -72,33 +44,8 @@ export default App;
你可以通过 `theme` 中的 `algorithm` 属性来切换算法，并且支持配置多种算法，将会依次生效。
```sandpack
const sandpackConfig = {
dark: true,
};
import React from 'react';
import { Button, ConfigProvider, Input, Space, theme } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
// 1. 单独使用暗色算法
algorithm: theme.darkAlgorithm,
// 2. 组合使用暗色算法与紧凑算法
// algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
}}
>
<Space>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/preset-algorithm.tsx">使用预设算法</code>
### 修改组件变量
@@ -112,99 +59,15 @@ export default App;
在 `>= 5.8.0` 版本中，组件变量支持传入 `algorithm` 属性，可以开启派生计算或者传入其他算法。
:::
```sandpack
import React from 'react';
import { ConfigProvider, Button, Space, Input, Divider } from 'antd';
const App: React.FC = () => (
<>
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: '#00b96b',
algorithm: true, // 启用算法
},
Input: {
colorPrimary: '#eb2f96',
algorithm: true, // 启用算法
}
},
}}
>
<Space>
<div style={{ fontSize: 14 }}>开启算法：</div>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
<Divider />
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: '#00b96b',
},
Input: {
colorPrimary: '#eb2f96',
}
},
}}
>
<Space>
<div style={{ fontSize: 14 }}>禁用算法：</div>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
</>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/component-token.tsx">修改组件变量</code>
### 禁用动画
antd 默认内置了一些组件交互动效让企业级页面更加富有细节，在一些极端场景可能会影响页面交互性能，如需关闭动画可以 `token` 中的 `motion` 修改为 `false`：
```sandpack
import React from 'react';
import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';
const App: React.FC = () => {
const [checked, setChecked] = React.useState<boolean>(false);
const timerRef = React.useRef<ReturnType<typeof setInterval>>();
React.useEffect(() => {
timerRef.current = setInterval(() => {
setChecked((prev) => !prev);
}, 500);
return () => {
if (timerRef.current) {
clearInterval(timerRef.current);
}
};
}, []);
const nodes = (
<Flex gap="small">
<Checkbox checked={checked}>Checkbox</Checkbox>
<Radio checked={checked}>Radio</Radio>
<Switch checked={checked} />
</Flex>
);
return (
<Row gutter={[24, 24]}>
<Col span={24}>{nodes}</Col>
<Col span={24}>
<ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>
</Col>
</Row>
);
};
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/disable-motion.tsx">禁用动画</code>
## 进阶使用
@@ -239,100 +102,22 @@ fs.writeFileSync('/path/to/somewhere', cssText);
在 v5 中，动态切换主题对用户来说是非常简单的，你可以在任何时候通过 `ConfigProvider` 的 `theme` 属性来动态切换主题，而不需要任何额外配置。
```sandpack
import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
import React from 'react';
const App: React.FC = () => {
const [primary, setPrimary] = React.useState('#1677ff');
return (
<>
<ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
<Divider />
<ConfigProvider
theme={{
token: {
colorPrimary: primary,
},
}}
>
<Space>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
</>
);
}
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/dynamic-theme.tsx">动态切换</code>
### 局部主题（嵌套主题）
可以嵌套使用 `ConfigProvider` 来实现局部主题的更换。在子主题中未被改变的 Design Token 将会继承父主题。
```sandpack
import React from 'react';
import { Button, ConfigProvider, Space } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#1677ff',
},
}}
>
<Space>
<Button type="primary">Theme 1</Button>
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
},
}}
>
<Button type="primary">Theme 2</Button>
</ConfigProvider>
</Space>
</ConfigProvider>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/local-theme.tsx">局部主题</code>
### 使用 Design Token
如果你希望使用当前主题下的 Design Token，我们提供了 `useToken` 这个 hook 来获取 Design Token。
```sandpack
import React from 'react';
import { Button, theme } from 'antd';
const { useToken } = theme;
const App: React.FC = () => {
const { token } = useToken();
return (
<div
style={{
backgroundColor: token.colorPrimaryBg,
padding: token.padding,
borderRadius: token.borderRadius,
color: token.colorPrimaryText,
fontSize: token.fontSize,
}}
>
使用 Design Token
</div>
);
};
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/use-token.tsx">使用 Design Token</code>
### 静态消费（如 less）

7
docs/react/demo/component-token.md Normal file
View File

@@ -0,0 +1,7 @@
## zh-CN
除了整体的 Design Token，各个组件也会开放自己的 Component Token 来实现针对组件的样式定制能力，不同的组件之间不会相互影响。同样地，也可以通过这种方式来覆盖组件的其他 Design Token。在 `>= 5.8.0` 版本中，组件变量支持传入 `algorithm` 属性，可以开启派生计算或者传入其他算法。
## en-US
In addition to the overall Design Token, each component also exposes its own Component Token to enable component-specific style customization capabilities, without mutual influence between different components. Similarly, you can also override other Design Tokens consumed by the component through this method. In version `>= 5.8.0`, the component token supports passing the `algorithm` property to enable derivative calculation or pass in other algorithms.

48
docs/react/demo/component-token.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import { Button, ConfigProvider, Divider, Input, Space } from 'antd';
const App: React.FC = () => (
<>
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: '#00b96b',
algorithm: true, // Enable algorithm
},
Input: {
colorPrimary: '#eb2f96',
algorithm: true, // Enable algorithm
},
},
}}
>
<Space>
<div style={{ fontSize: 14 }}>Algorithm Enabled:</div>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
<Divider />
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: '#00b96b',
},
Input: {
colorPrimary: '#eb2f96',
},
},
}}
>
<Space>
<div style={{ fontSize: 14 }}>Algorithm Disabled:</div>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
</>
);
export default App;

7
docs/react/demo/disable-motion.md Normal file
View File

@@ -0,0 +1,7 @@
## zh-CN
antd 默认内置了一些组件交互动效让企业级页面更加富有细节，在一些极端场景可能会影响页面交互性能，如需关闭动画可以 `token` 中的 `motion` 修改为 `false`。
## en-US
Ant Design includes some built-in component interaction animations to make enterprise pages more detailed. In some extreme scenarios, this may affect page interaction performance. If you need to turn off animations, you can set `motion` in `token` to `false`.

37
docs/react/demo/disable-motion.tsx Normal file
View File

@@ -0,0 +1,37 @@
import React, { useEffect, useRef, useState } from 'react';
import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';
const App: React.FC = () => {
const [checked, setChecked] = useState<boolean>(false);
const timerRef = useRef<ReturnType<typeof setInterval>>(null);
useEffect(() => {
timerRef.current = setInterval(() => {
setChecked((prev) => !prev);
}, 500);
return () => {
if (timerRef.current) {
clearInterval(timerRef.current);
}
};
}, []);
const nodes = (
<Flex gap="small">
<Checkbox checked={checked}>Checkbox</Checkbox>
<Radio checked={checked}>Radio</Radio>
<Switch checked={checked} />
</Flex>
);
return (
<Row gutter={[24, 24]}>
<Col span={24}>{nodes}</Col>
<Col span={24}>
<ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>
</Col>
</Row>
);
};
export default App;

7
docs/react/demo/dynamic-theme.md Normal file
View File

@@ -0,0 +1,7 @@
## zh-CN
在 v5 中，动态切换主题对用户来说是非常简单的，你可以在任何时候通过 `ConfigProvider` 的 `theme` 属性来动态切换主题，而不需要任何额外配置。
## en-US
In v5, dynamic theme switching is very simple for users. You can dynamically switch themes through the `theme` property of `ConfigProvider` at any time without any additional configuration.

27
docs/react/demo/dynamic-theme.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React, { useState } from 'react';
import { Button, ColorPicker, ConfigProvider, Divider, Input, Space } from 'antd';
const App: React.FC = () => {
const [primary, setPrimary] = useState('#1677ff');
return (
<>
<ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
<Divider />
<ConfigProvider
theme={{
token: {
colorPrimary: primary,
},
}}
>
<Space>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
</>
);
};
export default App;

7
docs/react/demo/first-example.md Normal file
View File

@@ -0,0 +1,7 @@
## zh-CN
这是一个最简单的 Ant Design 组件的在线 codesandbox 演示，展示 Ant Design React 的用法。
## en-US
Here is a simple online codesandbox demo to show the usage of Ant Design React.

14
docs/react/demo/first-example.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
import { Button, DatePicker, Space, version } from 'antd';
const App = () => (
<div style={{ padding: '0 24px' }}>
<h1>antd version: {version}</h1>
<Space>
<DatePicker />
<Button type="primary">Primary Button</Button>
</Space>
</div>
);
export default App;

7
docs/react/demo/local-theme.md Normal file
View File

@@ -0,0 +1,7 @@
## zh-CN
可以嵌套使用 `ConfigProvider` 来实现局部主题的更换。在子主题中未被改变的 Design Token 将会继承父主题。
## en-US
You can nest `ConfigProvider` to achieve local theme changes. Design Tokens that have not been changed in the sub-theme will inherit from the parent theme.

27
docs/react/demo/local-theme.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import { Button, ConfigProvider, Space } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
colorPrimary: '#1677ff',
},
}}
>
<Space>
<Button type="primary">Theme 1</Button>
<ConfigProvider
theme={{
token: {
colorPrimary: '#00b96b',
},
}}
>
<Button type="primary">Theme 2</Button>
</ConfigProvider>
</Space>
</ConfigProvider>
);
export default App;

7
docs/react/demo/modify-theme-token.md Normal file
View File

@@ -0,0 +1,7 @@
## zh-CN
通过 `theme` 中的 `token` 属性，可以修改一些主题变量。部分主题变量会引起其他主题变量的变化，我们把这些主题变量称为 Seed Token。
## en-US
You can modify some theme variables through the `token` property in `theme`. Some theme variables will cause changes to other theme variables, which we call Seed Tokens.

24
docs/react/demo/modify-theme-token.tsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import { Button, ConfigProvider, Space } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
token: {
// Seed Token, affects wide range
colorPrimary: '#00b96b',
borderRadius: 2,
// Derived token, affects narrow range
colorBgContainer: '#f6ffed',
},
}}
>
<Space>
<Button type="primary">Primary</Button>
<Button>Default</Button>
</Space>
</ConfigProvider>
);
export default App;

7
docs/react/demo/preset-algorithm.md Normal file
View File

@@ -0,0 +1,7 @@
## zh-CN
通过修改算法可以快速生成风格迥异的主题，我们默认提供三套预设算法：默认算法 `theme.defaultAlgorithm`、暗色算法 `theme.darkAlgorithm` 和紧凑算法 `theme.compactAlgorithm`。你可以通过 `theme` 中的 `algorithm` 属性来切换算法，并且支持配置多种算法，将会依次生效。
## en-US
You can quickly generate distinct themes by modifying algorithms. We provide three preset algorithms by default: `theme.defaultAlgorithm`, `theme.darkAlgorithm`, and `theme.compactAlgorithm`. You can switch algorithms through the `algorithm` property in `theme`, and multiple algorithms can be configured, which will take effect in order.

21
docs/react/demo/preset-algorithm.tsx Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import { Button, ConfigProvider, Input, Space, theme } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
// 1. Use dark algorithm alone
algorithm: theme.darkAlgorithm,
// 2. Combine dark algorithm and compact algorithm
// algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
}}
>
<Space>
<Input placeholder="Please Input" />
<Button type="primary">Submit</Button>
</Space>
</ConfigProvider>
);
export default App;

7
docs/react/demo/use-token.md Normal file
View File

@@ -0,0 +1,7 @@
## zh-CN
如果你希望使用当前主题下的 Design Token，我们提供了 `useToken` 这个 hook 来获取 Design Token。
## en-US
If you want to use the Design Token of the current theme, we provide a `useToken` hook to get it.

24
docs/react/demo/use-token.tsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react';
import { theme } from 'antd';
const { useToken } = theme;
const App: React.FC = () => {
const { token } = useToken();
return (
<div
style={{
backgroundColor: token.colorPrimaryBg,
padding: token.padding,
borderRadius: token.borderRadius,
color: token.colorPrimaryText,
fontSize: token.fontSize,
}}
>
Use Design Token
</div>
);
};
export default App;

22
docs/react/getting-started.en-US.md
View File

@@ -18,26 +18,8 @@ Finally, if you are working in a local development environment, please refer to
Here is a simple online codesandbox demo of an Ant Design component to show the usage of Ant Design React.
```sandpack
const sandpackConfig = {
autorun: true,
};
import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';
const App = () => (
<div style={{ padding: '0 24px' }}>
<h1>antd version: {version}</h1>
<Space>
<DatePicker />
<Button type="primary">Primary Button</Button>
</Space>
</div>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/first-example.tsx">First Example</code>
Follow the steps below to play around with Ant Design yourself:

22
docs/react/getting-started.zh-CN.md
View File

@@ -16,26 +16,8 @@ Ant Design React 致力于提供给程序员**愉悦**的开发体验。
这是一个最简单的 Ant Design 组件的在线 codesandbox 演示。
```sandpack
const sandpackConfig = {
autorun: true,
};
import React from 'react';
import { Button, Space, DatePicker, version } from 'antd';
const App = () => (
<div style={{ padding: '0 24px' }}>
<h1>antd version: {version}</h1>
<Space>
<DatePicker />
<Button type="primary">Primary Button</Button>
</Space>
</div>
);
export default App;
```
<!-- prettier-ignore -->
<code src="./demo/first-example.tsx">第一个例子</code>
### 1. 创建一个 codesandbox