mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

demo: update Button demo layout to Flex Component (#45566)

Browse Source
This commit is contained in:
lijianan 2023-10-29 02:11:17 +08:00 committed by GitHub
parent a559a90049
commit 4b99c4ed31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 3230 additions and 4158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3890
components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

3330
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

6
components/button/demo/basic.tsx
View File

@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import { Button, Space } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space wrap> <Flex gap="small" wrap="wrap">
<Button type="primary">Primary Button</Button> <Button type="primary">Primary Button</Button>
<Button>Default Button</Button> <Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button> <Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button> <Button type="text">Text Button</Button>
<Button type="link">Link Button</Button> <Button type="link">Link Button</Button>
</Space> </Flex>
); );
export default App; export default App;

6
components/button/demo/block.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { Button, Space } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}> <Flex vertical gap="small" style={{ width: '100%' }}>
<Button type="primary" block> <Button type="primary" block>
Primary Primary
</Button> </Button>
@ -19,7 +19,7 @@ const App: React.FC = () => (
<Button type="link" block> <Button type="link" block>
Link Link
</Button> </Button>
</Space> </Flex>
); );
export default App; export default App;

9
components/button/demo/chinese-chars-loading.tsx
View File

@ -1,14 +1,13 @@
// @ts-nocheck
import { PoweroffOutlined } from '@ant-design/icons';
import React from 'react'; import React from 'react';
import { Button, Space } from 'antd'; import { PoweroffOutlined } from '@ant-design/icons';
import { Button, Flex } from 'antd';
const Text1 = () => '部署'; const Text1 = () => '部署';
const Text2 = () => <span>部署</span>; const Text2 = () => <span>部署</span>;
const Text3 = () => 'Submit'; const Text3 = () => 'Submit';
const App: React.FC = () => ( const App: React.FC = () => (
<Space wrap> <Flex wrap="wrap" gap="small">
<Button> <Button>
<span> <span>
<span>部署</span> <span>部署</span>
@ -28,7 +27,7 @@ const App: React.FC = () => (
<Text1 /> <Text1 />
</Button> </Button>
<Button loading>按钮</Button> <Button loading>按钮</Button>
</Space> </Flex>
); );
export default App; export default App;

16
components/button/demo/component-token.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Button, ConfigProvider, Space } from 'antd'; import { Button, ConfigProvider, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<ConfigProvider <ConfigProvider
@ -10,7 +10,7 @@ const App: React.FC = () => (
colorPrimary: '#1976d2', colorPrimary: '#1976d2',
controlHeight: 36, controlHeight: 36,
primaryShadow: primaryShadow:
'0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)', '0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)',
fontWeight: 500, fontWeight: 500,
defaultBorderColor: 'rgba(25, 118, 210, 0.5)', defaultBorderColor: 'rgba(25, 118, 210, 0.5)',
colorText: '#1976d2', colorText: '#1976d2',
@ -22,13 +22,13 @@ const App: React.FC = () => (
}, },
}} }}
> >
<Space direction="vertical"> <Flex gap="small" vertical>
<Space wrap> <Flex wrap="wrap" gap="small">
<Button type="text">TEXT</Button> <Button type="text">TEXT</Button>
<Button type="primary">CONTAINED</Button> <Button type="primary">CONTAINED</Button>
<Button>OUTLINED</Button> <Button>OUTLINED</Button>
</Space> </Flex>
<Space wrap> <Flex wrap="wrap" gap="small">
<Button type="text" disabled> <Button type="text" disabled>
TEXT TEXT
</Button> </Button>
@ -36,8 +36,8 @@ const App: React.FC = () => (
CONTAINED CONTAINED
</Button> </Button>
<Button disabled>OUTLINED</Button> <Button disabled>OUTLINED</Button>
</Space> </Flex>
</Space> </Flex>
</ConfigProvider> </ConfigProvider>
); );

6
components/button/demo/danger.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { Button, Space } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space wrap> <Flex wrap="wrap" gap="small">
<Button type="primary" danger> <Button type="primary" danger>
Primary Primary
</Button> </Button>
@ -16,7 +16,7 @@ const App: React.FC = () => (
<Button type="link" danger> <Button type="link" danger>
Link Link
</Button> </Button>
</Space> </Flex>
); );
export default App; export default App;

19
components/button/demo/debug-icon.tsx
View File

@ -1,11 +1,10 @@
import React from 'react';
import { SearchOutlined } from '@ant-design/icons'; import { SearchOutlined } from '@ant-design/icons';
import React, { useState } from 'react'; import { Button, ConfigProvider, Divider, Flex, Radio, Tooltip } from 'antd';
import { Button, ConfigProvider, Divider, Radio, Space, Tooltip } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext'; import type { SizeType } from 'antd/es/config-provider/SizeContext';
const App: React.FC = () => { const App: React.FC = () => {
const [size, setSize] = useState<SizeType>('large'); const [size, setSize] = React.useState<SizeType>('large');
return ( return (
<> <>
<Radio.Group value={size} onChange={(e) => setSize(e.target.value)}> <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
@ -17,8 +16,8 @@ const App: React.FC = () => {
Preview Preview
</Divider> </Divider>
<ConfigProvider componentSize={size}> <ConfigProvider componentSize={size}>
<Space direction="vertical"> <Flex gap="small" vertical>
<Space wrap> <Flex gap="small" wrap="wrap">
<Tooltip title="search"> <Tooltip title="search">
<Button type="primary" shape="circle" icon={<SearchOutlined />} /> <Button type="primary" shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
@ -32,8 +31,8 @@ const App: React.FC = () => {
<Button shape="circle" icon={<SearchOutlined />} /> <Button shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
<Button icon={<SearchOutlined />}>Search</Button> <Button icon={<SearchOutlined />}>Search</Button>
</Space> </Flex>
<Space wrap> <Flex gap="small" wrap="wrap">
<Tooltip title="search"> <Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} /> <Button shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
@ -49,8 +48,8 @@ const App: React.FC = () => {
<SearchOutlined /> <SearchOutlined />
Search Search
</Button> </Button>
</Space> </Flex>
</Space> </Flex>
</ConfigProvider> </ConfigProvider>
</> </>
); );

50
components/button/demo/disabled.tsx
View File

@ -1,73 +1,73 @@
import React from 'react'; import React from 'react';
import { Button, Space } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space direction="vertical"> <Flex gap="small" align="flex-start" vertical>
<Space> <Flex gap="small">
<Button type="primary">Primary</Button> <Button type="primary">Primary</Button>
<Button type="primary" disabled> <Button type="primary" disabled>
Primary(disabled) Primary(disabled)
</Button> </Button>
</Space> </Flex>
<Space> <Flex gap="small">
<Button>Default</Button> <Button>Default</Button>
<Button disabled>Default(disabled)</Button> <Button disabled>Default(disabled)</Button>
</Space> </Flex>
<Space> <Flex gap="small">
<Button type="dashed">Dashed</Button> <Button type="dashed">Dashed</Button>
<Button type="dashed" disabled> <Button type="dashed" disabled>
Dashed(disabled) Dashed(disabled)
</Button> </Button>
</Space> </Flex>
<Space> <Flex gap="small">
<Button type="text">Text</Button> <Button type="text">Text</Button>
<Button type="text" disabled> <Button type="text" disabled>
Text(disabled) Text(disabled)
</Button> </Button>
</Space> </Flex>
<Space> <Flex gap="small">
<Button type="link">Link</Button> <Button type="link">Link</Button>
<Button type="link" disabled> <Button type="link" disabled>
Link(disabled) Link(disabled)
</Button> </Button>
</Space> </Flex>
<Space> <Flex gap="small">
<Button type="primary" href='https://ant.design/index-cn'> <Button type="primary" href="https://ant.design/index-cn">
Href Primary Href Primary
</Button> </Button>
<Button type="primary" href='https://ant.design/index-cn' disabled> <Button type="primary" href="https://ant.design/index-cn" disabled>
Href Primary(disabled) Href Primary(disabled)
</Button> </Button>
</Space> </Flex>
<Space> <Flex gap="small">
<Button danger>Danger Default</Button> <Button danger>Danger Default</Button>
<Button danger disabled> <Button danger disabled>
Danger Default(disabled) Danger Default(disabled)
</Button> </Button>
</Space> </Flex>
<Space> <Flex gap="small">
<Button danger type="text"> <Button danger type="text">
Danger Text Danger Text
</Button> </Button>
<Button danger type="text" disabled> <Button danger type="text" disabled>
Danger Text(disabled) Danger Text(disabled)
</Button> </Button>
</Space> </Flex>
<Space> <Flex gap="small">
<Button type="link" danger> <Button type="link" danger>
Danger Link Danger Link
</Button> </Button>
<Button type="link" danger disabled> <Button type="link" danger disabled>
Danger Link(disabled) Danger Link(disabled)
</Button> </Button>
</Space> </Flex>
<Space className="site-button-ghost-wrapper"> <Flex gap="small" className="site-button-ghost-wrapper">
<Button ghost>Ghost</Button> <Button ghost>Ghost</Button>
<Button ghost disabled> <Button ghost disabled>
Ghost(disabled) Ghost(disabled)
</Button> </Button>
</Space> </Flex>
</Space> </Flex>
); );
export default App; export default App;

6
components/button/demo/ghost.tsx
View File

@ -1,8 +1,8 @@
import React from 'react'; import React from 'react';
import { Button, Space } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space className="site-button-ghost-wrapper" wrap> <Flex wrap="wrap" gap="small" className="site-button-ghost-wrapper">
<Button type="primary" ghost> <Button type="primary" ghost>
Primary Primary
</Button> </Button>
@ -13,7 +13,7 @@ const App: React.FC = () => (
<Button type="primary" danger ghost> <Button type="primary" danger ghost>
Danger Danger
</Button> </Button>
</Space> </Flex>
); );
export default App; export default App;

14
components/button/demo/icon.tsx
View File

@ -1,10 +1,10 @@
import React from 'react'; import React from 'react';
import { SearchOutlined } from '@ant-design/icons'; import { SearchOutlined } from '@ant-design/icons';
import { Button, Tooltip, Space } from 'antd'; import { Button, Flex, Tooltip } from 'antd';
const App: React.FC = () => ( const App: React.FC = () => (
<Space direction="vertical"> <Flex gap="small" vertical>
<Space wrap> <Flex wrap="wrap" gap="small">
<Tooltip title="search"> <Tooltip title="search">
<Button type="primary" shape="circle" icon={<SearchOutlined />} /> <Button type="primary" shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
@ -18,8 +18,8 @@ const App: React.FC = () => (
<Button shape="circle" icon={<SearchOutlined />} /> <Button shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
<Button icon={<SearchOutlined />}>Search</Button> <Button icon={<SearchOutlined />}>Search</Button>
</Space> </Flex>
<Space wrap> <Flex wrap="wrap" gap="small">
<Tooltip title="search"> <Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} /> <Button shape="circle" icon={<SearchOutlined />} />
</Tooltip> </Tooltip>
@ -31,8 +31,8 @@ const App: React.FC = () => (
Search Search
</Button> </Button>
<Button icon={<SearchOutlined />} href="https://www.google.com" /> <Button icon={<SearchOutlined />} href="https://www.google.com" />
</Space> </Flex>
</Space> </Flex>
); );
export default App; export default App;

15
components/button/demo/loading.tsx
View File

@ -1,6 +1,6 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { PoweroffOutlined } from '@ant-design/icons'; import { PoweroffOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd'; import { Button, Flex } from 'antd';
const App: React.FC = () => { const App: React.FC = () => {
const [loadings, setLoadings] = useState<boolean[]>([]); const [loadings, setLoadings] = useState<boolean[]>([]);
@ -22,8 +22,8 @@ const App: React.FC = () => {
}; };
return ( return (
<Space direction="vertical"> <Flex gap="small" vertical>
<Space wrap> <Flex gap="small" align="center" wrap="wrap">
<Button type="primary" loading> <Button type="primary" loading>
Loading Loading
</Button> </Button>
@ -31,9 +31,8 @@ const App: React.FC = () => {
Loading Loading
</Button> </Button>
<Button type="primary" icon={<PoweroffOutlined />} loading /> <Button type="primary" icon={<PoweroffOutlined />} loading />
</Space> </Flex>
<Flex gap="small" wrap="wrap">
<Space wrap>
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}> <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
Click me! Click me!
</Button> </Button>
@ -51,8 +50,8 @@ const App: React.FC = () => {
loading={loadings[2]} loading={loadings[2]}
onClick={() => enterLoading(2)} onClick={() => enterLoading(2)}
/> />
</Space> </Flex>
</Space> </Flex>
); );
}; };

6
components/button/demo/multiple.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { Button, Dropdown, Space } from 'antd'; import { Button, Dropdown, Flex } from 'antd';
const onMenuClick: MenuProps['onClick'] = (e) => { const onMenuClick: MenuProps['onClick'] = (e) => {
console.log('click', e); console.log('click', e);
@ -22,11 +22,11 @@ const items = [
]; ];
const App: React.FC = () => ( const App: React.FC = () => (
<Space direction="vertical"> <Flex align="flex-start" gap="small" vertical>
<Button type="primary">primary</Button> <Button type="primary">primary</Button>
<Button>secondary</Button> <Button>secondary</Button>
<Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button> <Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
</Space> </Flex>
); );
export default App; export default App;

15
components/button/demo/size.tsx
View File

@ -1,11 +1,10 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { DownloadOutlined } from '@ant-design/icons'; import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio, Space, Divider } from 'antd'; import { Button, Divider, Flex, Radio } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext'; import type { SizeType } from 'antd/es/config-provider/SizeContext';
const App: React.FC = () => { const App: React.FC = () => {
const [size, setSize] = useState<SizeType>('large'); // default is 'middle' const [size, setSize] = useState<SizeType>('large'); // default is 'middle'
return ( return (
<> <>
<Radio.Group value={size} onChange={(e) => setSize(e.target.value)}> <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
@ -16,8 +15,8 @@ const App: React.FC = () => {
<Divider orientation="left" plain> <Divider orientation="left" plain>
Preview Preview
</Divider> </Divider>
<Space direction="vertical"> <Flex gap="small" align="flex-start" vertical>
<Space wrap> <Flex gap="small" wrap="wrap">
<Button type="primary" size={size}> <Button type="primary" size={size}>
Primary Primary
</Button> </Button>
@ -25,11 +24,11 @@ const App: React.FC = () => {
<Button type="dashed" size={size}> <Button type="dashed" size={size}>
Dashed Dashed
</Button> </Button>
</Space> </Flex>
<Button type="link" size={size}> <Button type="link" size={size}>
Link Link
</Button> </Button>
<Space wrap> <Flex gap="small" wrap="wrap">
<Button type="primary" icon={<DownloadOutlined />} size={size} /> <Button type="primary" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} /> <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} /> <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
@ -39,8 +38,8 @@ const App: React.FC = () => {
<Button type="primary" icon={<DownloadOutlined />} size={size}> <Button type="primary" icon={<DownloadOutlined />} size={size}>
Download Download
</Button> </Button>
</Space> </Flex>
</Space> </Flex>
</> </>
); );
}; };