mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 07:56:28 +08:00
Code Issues Actions 14 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 { Button, Space } from 'antd';
import { Button, Flex } from 'antd';
const App: React.FC = () => (
<Space wrap>
<Flex gap="small" wrap="wrap">
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button>
<Button type="link">Link Button</Button>
</Space>
</Flex>
);
export default App;

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

@ -1,8 +1,8 @@
import React from 'react';
import { Button, Space } from 'antd';
import { Button, Flex } from 'antd';
const App: React.FC = () => (
<Space direction="vertical" style={{ width: '100%' }}>
<Flex vertical gap="small" style={{ width: '100%' }}>
<Button type="primary" block>
Primary
</Button>
@ -19,7 +19,7 @@ const App: React.FC = () => (
<Button type="link" block>
Link
</Button>
</Space>
</Flex>
);
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 { Button, Space } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';
import { Button, Flex } from 'antd';
const Text1 = () => '部署';
const Text2 = () => <span>部署</span>;
const Text3 = () => 'Submit';
const App: React.FC = () => (
<Space wrap>
<Flex wrap="wrap" gap="small">
<Button>
<span>
<span>部署</span>
@ -28,7 +27,7 @@ const App: React.FC = () => (
<Text1 />
</Button>
<Button loading>按钮</Button>
</Space>
</Flex>
);
export default App;

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

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

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

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

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

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

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

@ -1,8 +1,8 @@
import React from 'react';
import { Button, Space } from 'antd';
import { Button, Flex } from 'antd';
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>
Primary
</Button>
@ -13,7 +13,7 @@ const App: React.FC = () => (
<Button type="primary" danger ghost>
Danger
</Button>
</Space>
</Flex>
);
export default App;

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

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

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

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

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

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

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

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