Skip to content

Commit 6e91b7f

Browse files
zombieJclaude
zombieJ
and
claude
authored
docs: Use direct dumi code demo instead of sandpack (ant-design#56862)
* 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>
1 parent d442e3e commit 6e91b7f

20 files changed

Lines changed: 310 additions & 498 deletions

‎docs/react/customize-theme.en-US.md‎

Lines changed: 14 additions & 229 deletions
Original file line numberDiff line numberDiff line change
@@ -31,36 +31,8 @@ When you need context information (such as the content configured by ConfigProvi
3131

3232
By modifying `token` property of `theme`, we can modify Design Token globally. Some tokens will affect other tokens. We call these tokens Seed Token.
3333

34-
```sandpack
35-
const sandpackConfig = {
36-
autorun: true,
37-
};
38-
39-
import { Button, ConfigProvider, Space } from 'antd';
40-
import React from 'react';
41-
42-
const App: React.FC = () => (
43-
<ConfigProvider
44-
theme={{
45-
token: {
46-
// Seed Token
47-
colorPrimary: '#00b96b',
48-
borderRadius: 2,
49-
50-
// Alias Token
51-
colorBgContainer: '#f6ffed',
52-
},
53-
}}
54-
>
55-
<Space>
56-
<Button type="primary">Primary</Button>
57-
<Button>Default</Button>
58-
</Space>
59-
</ConfigProvider>
60-
);
61-
62-
export default App;
63-
```
34+
<!-- prettier-ignore -->
35+
<code src="./demo/modify-theme-token.tsx">Customize Design Token</code>
6436

6537
### Use Preset Algorithms
6638

@@ -72,33 +44,8 @@ Themes with different styles can be quickly generated by modifying `algorithm`.
7244

7345
You can switch algorithms by modifying the `algorithm` property of `theme` in ConfigProvider.
7446

75-
```sandpack
76-
const sandpackConfig = {
77-
dark: true,
78-
};
79-
80-
import React from 'react';
81-
import { Button, ConfigProvider, Input, Space, theme } from 'antd';
82-
83-
const App: React.FC = () => (
84-
<ConfigProvider
85-
theme={{
86-
// 1. Use dark algorithm
87-
algorithm: theme.darkAlgorithm,
88-
89-
// 2. Combine dark algorithm and compact algorithm
90-
// algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
91-
}}
92-
>
93-
<Space>
94-
<Input placeholder="Please Input" />
95-
<Button type="primary">Submit</Button>
96-
</Space>
97-
</ConfigProvider>
98-
);
99-
100-
export default App;
101-
```
47+
<!-- prettier-ignore -->
48+
<code src="./demo/preset-algorithm.tsx">Use Preset Algorithms</code>
10249

10350
### Customize Component Token
10451

@@ -112,99 +59,15 @@ By default, all component tokens can only override global token and will not be
11259
In version `>= 5.8.0`, component tokens support the `algorithm` property, which can be used to enable algorithm or pass in other algorithms.
11360
:::
11461

115-
```sandpack
116-
import React from 'react';
117-
import { ConfigProvider, Button, Space, Input, Divider } from 'antd';
118-
119-
const App: React.FC = () => (
120-
<>
121-
<ConfigProvider
122-
theme={{
123-
components: {
124-
Button: {
125-
colorPrimary: '#00b96b',
126-
algorithm: true, // Enable algorithm
127-
},
128-
Input: {
129-
colorPrimary: '#eb2f96',
130-
algorithm: true, // Enable algorithm
131-
}
132-
},
133-
}}
134-
>
135-
<Space>
136-
<div style={{ fontSize: 14 }}>Enable algorithm: </div>
137-
<Input placeholder="Please Input" />
138-
<Button type="primary">Submit</Button>
139-
</Space>
140-
</ConfigProvider>
141-
<Divider />
142-
<ConfigProvider
143-
theme={{
144-
components: {
145-
Button: {
146-
colorPrimary: '#00b96b',
147-
},
148-
Input: {
149-
colorPrimary: '#eb2f96',
150-
}
151-
},
152-
}}
153-
>
154-
<Space>
155-
<div style={{ fontSize: 14 }}>Disable algorithm: </div>
156-
<Input placeholder="Please Input" />
157-
<Button type="primary">Submit</Button>
158-
</Space>
159-
</ConfigProvider>
160-
</>
161-
);
162-
163-
export default App;
164-
```
62+
<!-- prettier-ignore -->
63+
<code src="./demo/component-token.tsx">Customize Component Token</code>
16564

16665
### Disable Motion
16766

16867
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`:
16968

170-
```sandpack
171-
import React from 'react';
172-
import { Checkbox, Col, ConfigProvider, Flex, Radio, Row, Switch } from 'antd';
173-
174-
const App: React.FC = () => {
175-
const [checked, setChecked] = React.useState<boolean>(false);
176-
const timerRef = React.useRef<ReturnType<typeof setInterval>>();
177-
React.useEffect(() => {
178-
timerRef.current = setInterval(() => {
179-
setChecked((prev) => !prev);
180-
}, 500);
181-
return () => {
182-
if (timerRef.current) {
183-
clearInterval(timerRef.current);
184-
}
185-
};
186-
}, []);
187-
188-
const nodes = (
189-
<Flex gap="small">
190-
<Checkbox checked={checked}>Checkbox</Checkbox>
191-
<Radio checked={checked}>Radio</Radio>
192-
<Switch checked={checked} />
193-
</Flex>
194-
);
195-
196-
return (
197-
<Row gutter={[24, 24]}>
198-
<Col span={24}>{nodes}</Col>
199-
<Col span={24}>
200-
<ConfigProvider theme={{ token: { motion: false } }}>{nodes}</ConfigProvider>
201-
</Col>
202-
</Row>
203-
);
204-
};
205-
206-
export default App;
207-
```
69+
<!-- prettier-ignore -->
70+
<code src="./demo/disable-motion.tsx">Disable Motion</code>
20871

20972
## Advanced
21073

@@ -239,100 +102,22 @@ fs.writeFileSync('/path/to/somewhere', cssText);
239102

240103
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.
241104

242-
```sandpack
243-
import { Button, ConfigProvider, Space, Input, ColorPicker, Divider } from 'antd';
244-
import React from 'react';
245-
246-
const App: React.FC = () => {
247-
const [primary, setPrimary] = React.useState('#1677ff');
248-
249-
return (
250-
<>
251-
<ColorPicker showText value={primary} onChange={(color) => setPrimary(color.toHexString())} />
252-
<Divider />
253-
<ConfigProvider
254-
theme={{
255-
token: {
256-
colorPrimary: primary,
257-
},
258-
}}
259-
>
260-
<Space>
261-
<Input placeholder="Please Input" />
262-
<Button type="primary">Submit</Button>
263-
</Space>
264-
</ConfigProvider>
265-
</>
266-
);
267-
}
268-
269-
export default App;
270-
```
105+
<!-- prettier-ignore -->
106+
<code src="./demo/dynamic-theme.tsx">Switch Themes Dynamically</code>
271107

272108
### Nested Theme
273109

274110
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.
275111

276-
```sandpack
277-
import React from 'react';
278-
import { Button, ConfigProvider, Space } from 'antd';
279-
280-
const App: React.FC = () => (
281-
<ConfigProvider
282-
theme={{
283-
token: {
284-
colorPrimary: '#1677ff',
285-
},
286-
}}
287-
>
288-
<Space>
289-
<Button type="primary">Theme 1</Button>
290-
<ConfigProvider
291-
theme={{
292-
token: {
293-
colorPrimary: '#00b96b',
294-
},
295-
}}
296-
>
297-
<Button type="primary">Theme 2</Button>
298-
</ConfigProvider>
299-
</Space>
300-
</ConfigProvider>
301-
);
302-
303-
export default App;
304-
```
112+
<!-- prettier-ignore -->
113+
<code src="./demo/local-theme.tsx">Nested Theme</code>
305114

306115
### Consume Design Token
307116

308117
If you want to consume the Design Token under the current theme, we provide `useToken` hook to get Design Token.
309118

310-
```sandpack
311-
import React from 'react';
312-
import { Button, theme } from 'antd';
313-
314-
const { useToken } = theme;
315-
316-
const App: React.FC = () => {
317-
const { token } = useToken();
318-
319-
return (
320-
<div
321-
style={{
322-
backgroundColor: token.colorPrimaryBg,
323-
padding: token.padding,
324-
borderRadius: token.borderRadius,
325-
color: token.colorPrimaryText,
326-
fontSize: token.fontSize,
327-
}}
328-
>
329-
Consume Design Token
330-
</div>
331-
);
332-
};
333-
334-
export default App;
335-
```
119+
<!-- prettier-ignore -->
120+
<code src="./demo/use-token.tsx">Consume Design Token</code>
336121

337122
### Static consume (e.g. less)
338123

0 commit comments

Comments
 (0)