mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
docs: improve component demo style (#38598)
* docs: delete redundant codes repetitive examples that can make it difficult for developers to read * chore: update snapshot * docs(badge): wrapping documents with `Space` * chore: update snapshot * chore(space): optimize documents easy to read * chore: update badge demo * chore: update demo * Revert "chore(space): optimize documents" This reverts commit 88a4378f16cede5b628f885a48a341d507fd53e3. * chore: update snapshots * chore(button): add debug demo * test(button): update snapshots * docs(button): example document beautify * test(button): update snapshots commit by af04705c8f * test(alert): update snapshots * chore: Reverse format
This commit is contained in:
Wuxh
GitHub
parent
9c670dfdf6
commit
34a277cdaa
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { Alert, Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert
|
||||
message="Success Tips"
|
||||
type="success"
|
||||
@ -53,7 +53,7 @@ const App: React.FC = () => (
|
||||
}
|
||||
closable
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,20 +1,17 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert message="Warning text" banner />
|
||||
<br />
|
||||
<Alert
|
||||
message="Very long warning text warning text text text text text text text"
|
||||
banner
|
||||
closable
|
||||
/>
|
||||
<br />
|
||||
<Alert showIcon={false} message="Warning text without icon" banner />
|
||||
<br />
|
||||
<Alert type="error" message="Error text" banner />
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
|
||||
console.log(e, 'I was closed.');
|
||||
};
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert
|
||||
message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
|
||||
type="warning"
|
||||
@ -20,7 +20,7 @@ const App: React.FC = () => (
|
||||
closable
|
||||
onClose={onClose}
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import { SmileOutlined } from '@ant-design/icons';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const icon = <SmileOutlined />;
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert icon={icon} message="showIcon = false" type="success" />
|
||||
<Alert icon={icon} message="Success Tips" type="success" showIcon />
|
||||
<Alert icon={icon} message="Informational Notes" type="info" showIcon />
|
||||
@ -39,7 +39,7 @@ const App: React.FC = () => (
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert
|
||||
message="Success Text"
|
||||
description="Success Description Success Description Success Description"
|
||||
@ -23,7 +23,7 @@ const App: React.FC = () => (
|
||||
description="Error Description Error Description Error Description Error Description"
|
||||
type="error"
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert message="Success Tips" type="success" showIcon />
|
||||
<Alert message="Informational Notes" type="info" showIcon />
|
||||
<Alert message="Warning" type="warning" showIcon closable />
|
||||
@ -32,7 +32,7 @@ const App: React.FC = () => (
|
||||
type="error"
|
||||
showIcon
|
||||
/>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Switch, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [visible, setVisible] = useState(true);
|
||||
@ -9,12 +9,13 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{visible ? (
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
{visible && (
|
||||
<Alert message="Alert Message Text" type="success" closable afterClose={handleClose} />
|
||||
) : null}
|
||||
<p>placeholder text here</p>
|
||||
</div>
|
||||
)}
|
||||
<p>click the close button to see the effect</p>
|
||||
<Switch onChange={setVisible} checked={visible} disabled={visible} />
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import { Alert } from 'antd';
|
||||
import { Alert, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Alert message="Success Text" type="success" />
|
||||
<Alert message="Info Text" type="info" />
|
||||
<Alert message="Warning Text" type="warning" />
|
||||
<Alert message="Error Text" type="error" />
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,9 @@
|
||||
import React from 'react';
|
||||
import { ClockCircleOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="middle">
|
||||
<Badge count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
@ -13,7 +13,7 @@ const App: React.FC = () => (
|
||||
<Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
|
||||
import { Avatar, Badge, Button, Divider, Switch } from 'antd';
|
||||
import { Avatar, Badge, Button, Switch, Space } from 'antd';
|
||||
|
||||
const ButtonGroup = Button.Group;
|
||||
|
||||
@ -30,27 +30,24 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Badge count={count}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<ButtonGroup>
|
||||
<Button onClick={decline}>
|
||||
<MinusOutlined />
|
||||
</Button>
|
||||
<Button onClick={increase}>
|
||||
<PlusOutlined />
|
||||
</Button>
|
||||
<Button onClick={random}>
|
||||
<QuestionOutlined />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Divider />
|
||||
<Badge dot={show}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Switch onChange={onChange} checked={show} />
|
||||
</>
|
||||
<Space direction="vertical">
|
||||
<Space size="large">
|
||||
<Badge count={count}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<ButtonGroup>
|
||||
<Button onClick={decline} icon={<MinusOutlined />} />
|
||||
<Button onClick={increase} icon={<PlusOutlined />} />
|
||||
<Button onClick={random} icon={<QuestionOutlined />} />
|
||||
</ButtonGroup>
|
||||
</Space>
|
||||
<Space size="large">
|
||||
<Badge dot={show}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Switch onChange={onChange} checked={show} />
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Space } from 'antd';
|
||||
|
||||
const colors = [
|
||||
'pink',
|
||||
@ -18,26 +18,23 @@ const colors = [
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
{colors.map(color => (
|
||||
<div key={color} style={{ display: 'inline-block', verticalAlign: 'middle' }}>
|
||||
<Badge color={color} count={44}>
|
||||
<div
|
||||
style={{
|
||||
width: 90,
|
||||
height: 90,
|
||||
lineHeight: '90px',
|
||||
background: '#ccc',
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
}}
|
||||
>
|
||||
{color}
|
||||
</div>
|
||||
</Badge>
|
||||
</div>
|
||||
<Space wrap size={['large', 'middle']}>
|
||||
{colors.map((color) => (
|
||||
<Badge color={color} count={44} key={color}>
|
||||
<div
|
||||
style={{
|
||||
width: 90,
|
||||
height: 90,
|
||||
lineHeight: '90px',
|
||||
background: '#ccc',
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
{color}
|
||||
</div>
|
||||
</Badge>
|
||||
))}
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import React from 'react';
|
||||
import { NotificationOutlined } from '@ant-design/icons';
|
||||
import { Badge } from 'antd';
|
||||
import { Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space>
|
||||
<Badge dot>
|
||||
<NotificationOutlined style={{ fontSize: 16 }} />
|
||||
</Badge>
|
||||
<Badge dot>
|
||||
<a href="#">Link something</a>
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="middle">
|
||||
<Badge count={5} status="success">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
@ -27,7 +27,7 @@ const App: React.FC = () => (
|
||||
<Badge dot color="#fa541c">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="large">
|
||||
<Badge count={99}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
@ -15,7 +15,7 @@ const App: React.FC = () => (
|
||||
<Badge count={1000} overflowCount={999}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="middle">
|
||||
<Badge size="default" count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge size="small" count={5}>
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import React from 'react';
|
||||
import { Avatar, Badge } from 'antd';
|
||||
import { Avatar, Badge, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space size="large">
|
||||
<Badge count={5} title="Custom hover text">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
<Badge count={-5} title="Negative">
|
||||
<Avatar shape="square" size="large" />
|
||||
</Badge>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,15 +1,14 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<Button type="primary">Primary Button</Button>
|
||||
<Button>Default Button</Button>
|
||||
<Button type="dashed">Dashed Button</Button>
|
||||
<br />
|
||||
<Button type="text">Text Button</Button>
|
||||
<Button type="link">Link Button</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical" style={{ width: '100%' }}>
|
||||
<Button type="primary" block>
|
||||
Primary
|
||||
</Button>
|
||||
@ -13,7 +13,7 @@ const App: React.FC = () => (
|
||||
<Button type="link" block>
|
||||
Link
|
||||
</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import { PoweroffOutlined } from '@ant-design/icons';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const Text1 = () => '部署';
|
||||
const Text2 = () => <span>部署</span>;
|
||||
const Text3 = () => 'Submit';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<Button loading>部署</Button>
|
||||
<Button loading>
|
||||
<Text1 />
|
||||
@ -22,7 +22,7 @@ const App = () => (
|
||||
<Text1 />
|
||||
</Button>
|
||||
<Button loading>按钮</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space wrap>
|
||||
<Button type="primary" danger>
|
||||
Primary
|
||||
</Button>
|
||||
@ -16,7 +16,7 @@ const App: React.FC = () => (
|
||||
<Button type="link" danger>
|
||||
Link
|
||||
</Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
7
components/button/demo/debug-icon.md
Normal file
7
components/button/demo/debug-icon.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
调试使用
|
||||
|
||||
## en-US
|
||||
|
||||
Debug usage
|
||||
55
components/button/demo/debug-icon.tsx
Normal file
55
components/button/demo/debug-icon.tsx
Normal file
@ -0,0 +1,55 @@
|
||||
import React, { useState } from 'react';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Button, Tooltip, ConfigProvider, Radio, Divider, Space } from 'antd';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [size, setSize] = useState<SizeType>('large');
|
||||
|
||||
return (
|
||||
<>
|
||||
<Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
|
||||
<Radio.Button value="large">Large</Radio.Button>
|
||||
<Radio.Button value="default">Default</Radio.Button>
|
||||
<Radio.Button value="small">Small</Radio.Button>
|
||||
</Radio.Group>
|
||||
<Divider orientation="left" plain>
|
||||
Preview
|
||||
</Divider>
|
||||
<ConfigProvider componentSize={size}>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Tooltip title="search">
|
||||
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="primary" shape="circle">
|
||||
A
|
||||
</Button>
|
||||
<Button type="primary" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<Tooltip title="search">
|
||||
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="dashed" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Button icon={<SearchOutlined />} href="https://www.google.com" />
|
||||
</Space>
|
||||
</Space>
|
||||
</ConfigProvider>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
@ -5,10 +5,3 @@
|
||||
## en-US
|
||||
|
||||
To mark a button as disabled, add the `disabled` property to the `Button`.
|
||||
|
||||
```css
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 8px 8px 0 8px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,56 +1,65 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Button type="primary">Primary</Button>
|
||||
<Button type="primary" disabled>
|
||||
Primary(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
<Button>Default</Button>
|
||||
<Button disabled>Default(disabled)</Button>
|
||||
<br />
|
||||
<Button type="dashed">Dashed</Button>
|
||||
<Button type="dashed" disabled>
|
||||
Dashed(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
<Button type="text">Text</Button>
|
||||
<Button type="text" disabled>
|
||||
Text(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
<Button type="link">Link</Button>
|
||||
<Button type="link" disabled>
|
||||
Link(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
<Button danger>Danger Default</Button>
|
||||
<Button danger disabled>
|
||||
Danger Default(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
<Button danger type="text">
|
||||
Danger Text
|
||||
</Button>
|
||||
<Button danger type="text" disabled>
|
||||
Danger Text(disabled)
|
||||
</Button>
|
||||
<br />
|
||||
<Button type="link" danger>
|
||||
Danger Link
|
||||
</Button>
|
||||
<Button type="link" danger disabled>
|
||||
Danger Link(disabled)
|
||||
</Button>
|
||||
<div className="site-button-ghost-wrapper">
|
||||
<Space direction="vertical">
|
||||
<Space>
|
||||
<Button type="primary">Primary</Button>
|
||||
<Button type="primary" disabled>
|
||||
Primary(disabled)
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button>Default</Button>
|
||||
<Button disabled>Default(disabled)</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="dashed">Dashed</Button>
|
||||
<Button type="dashed" disabled>
|
||||
Dashed(disabled)
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="text">Text</Button>
|
||||
<Button type="text" disabled>
|
||||
Text(disabled)
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="link">Link</Button>
|
||||
<Button type="link" disabled>
|
||||
Link(disabled)
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button danger>Danger Default</Button>
|
||||
<Button danger disabled>
|
||||
Danger Default(disabled)
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button danger type="text">
|
||||
Danger Text
|
||||
</Button>
|
||||
<Button danger type="text" disabled>
|
||||
Danger Text(disabled)
|
||||
</Button>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="link" danger>
|
||||
Danger Link
|
||||
</Button>
|
||||
<Button type="link" danger disabled>
|
||||
Danger Link(disabled)
|
||||
</Button>
|
||||
</Space>
|
||||
<Space className="site-button-ghost-wrapper">
|
||||
<Button ghost>Ghost</Button>
|
||||
<Button ghost disabled>
|
||||
Ghost(disabled)
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -5,10 +5,3 @@
|
||||
## en-US
|
||||
|
||||
`ghost` property will make button's background transparent, it is commonly used in colored background.
|
||||
|
||||
```css
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 26px 16px 16px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Button } from 'antd';
|
||||
import { Button, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<div className="site-button-ghost-wrapper">
|
||||
<Space className="site-button-ghost-wrapper" wrap>
|
||||
<Button type="primary" ghost>
|
||||
Primary
|
||||
</Button>
|
||||
@ -13,7 +13,7 @@ const App: React.FC = () => (
|
||||
<Button type="primary" danger ghost>
|
||||
Danger
|
||||
</Button>
|
||||
</div>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,66 +1,38 @@
|
||||
import React from 'react';
|
||||
import { SearchOutlined } from '@ant-design/icons';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import { Button, Tooltip, Space } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Tooltip title="search">
|
||||
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="primary" shape="circle">
|
||||
A
|
||||
</Button>
|
||||
<Button type="primary" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<br />
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<Tooltip title="search">
|
||||
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="dashed" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Button icon={<SearchOutlined />} href="https://www.google.com" />
|
||||
<br />
|
||||
<br />
|
||||
<Tooltip title="search">
|
||||
<Button type="primary" shape="circle" icon={<SearchOutlined />} size="large" />
|
||||
</Tooltip>
|
||||
<Button type="primary" shape="circle" size="large">
|
||||
A
|
||||
</Button>
|
||||
<Button type="primary" icon={<SearchOutlined />} size="large">
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} size="large" />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />} size="large">
|
||||
Search
|
||||
</Button>
|
||||
<br />
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} size="large" />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />} size="large">
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button type="dashed" shape="circle" icon={<SearchOutlined />} size="large" />
|
||||
</Tooltip>
|
||||
<Button type="dashed" icon={<SearchOutlined />} size="large">
|
||||
Search
|
||||
</Button>
|
||||
<Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
|
||||
</>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Tooltip title="search">
|
||||
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="primary" shape="circle">
|
||||
A
|
||||
</Button>
|
||||
<Button type="primary" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
</Space>
|
||||
<Space wrap>
|
||||
<Tooltip title="search">
|
||||
<Button shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button icon={<SearchOutlined />}>Search</Button>
|
||||
<Tooltip title="search">
|
||||
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
|
||||
</Tooltip>
|
||||
<Button type="dashed" icon={<SearchOutlined />}>
|
||||
Search
|
||||
</Button>
|
||||
<Button icon={<SearchOutlined />} href="https://www.google.com" />
|
||||
</Space>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -6,14 +6,14 @@ const App: React.FC = () => {
|
||||
const [loadings, setLoadings] = useState<boolean[]>([]);
|
||||
|
||||
const enterLoading = (index: number) => {
|
||||
setLoadings(prevLoadings => {
|
||||
setLoadings((prevLoadings) => {
|
||||
const newLoadings = [...prevLoadings];
|
||||
newLoadings[index] = true;
|
||||
return newLoadings;
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
setLoadings(prevLoadings => {
|
||||
setLoadings((prevLoadings) => {
|
||||
const newLoadings = [...prevLoadings];
|
||||
newLoadings[index] = false;
|
||||
return newLoadings;
|
||||
@ -22,8 +22,8 @@ const App: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Space style={{ width: '100%' }}>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Button type="primary" loading>
|
||||
Loading
|
||||
</Button>
|
||||
@ -33,7 +33,7 @@ const App: React.FC = () => {
|
||||
<Button type="primary" icon={<PoweroffOutlined />} loading />
|
||||
</Space>
|
||||
|
||||
<Space style={{ width: '100%' }}>
|
||||
<Space wrap>
|
||||
<Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>
|
||||
Click me!
|
||||
</Button>
|
||||
@ -52,7 +52,7 @@ const App: React.FC = () => {
|
||||
onClick={() => enterLoading(2)}
|
||||
/>
|
||||
</Space>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { Button, Dropdown } from 'antd';
|
||||
import { Button, Dropdown, Space } from 'antd';
|
||||
|
||||
const onMenuClick: MenuProps['onClick'] = e => {
|
||||
const onMenuClick: MenuProps['onClick'] = (e) => {
|
||||
console.log('click', e);
|
||||
};
|
||||
|
||||
@ -22,11 +22,11 @@ const items = [
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<>
|
||||
<Space direction="vertical">
|
||||
<Button type="primary">primary</Button>
|
||||
<Button>secondary</Button>
|
||||
<Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
|
||||
</>
|
||||
</Space>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,41 +1,46 @@
|
||||
import React, { useState } from 'react';
|
||||
import { DownloadOutlined } from '@ant-design/icons';
|
||||
import { Button, Radio } from 'antd';
|
||||
import { Button, Radio, Space, Divider } from 'antd';
|
||||
import type { SizeType } from 'antd/es/config-provider/SizeContext';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [size, setSize] = useState<SizeType>('large');
|
||||
const [size, setSize] = useState<SizeType>('large'); // default is 'middle'
|
||||
|
||||
return (
|
||||
<>
|
||||
<Radio.Group value={size} onChange={e => setSize(e.target.value)}>
|
||||
<Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>
|
||||
<Radio.Button value="large">Large</Radio.Button>
|
||||
<Radio.Button value="default">Default</Radio.Button>
|
||||
<Radio.Button value="small">Small</Radio.Button>
|
||||
</Radio.Group>
|
||||
<br />
|
||||
<br />
|
||||
<Button type="primary" size={size}>
|
||||
Primary
|
||||
</Button>
|
||||
<Button size={size}>Default</Button>
|
||||
<Button type="dashed" size={size}>
|
||||
Dashed
|
||||
</Button>
|
||||
<br />
|
||||
<Button type="link" size={size}>
|
||||
Link
|
||||
</Button>
|
||||
<br />
|
||||
<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} />
|
||||
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
|
||||
Download
|
||||
</Button>
|
||||
<Button type="primary" icon={<DownloadOutlined />} size={size}>
|
||||
Download
|
||||
</Button>
|
||||
<Divider orientation="left" plain>
|
||||
Preview
|
||||
</Divider>
|
||||
<Space direction="vertical">
|
||||
<Space wrap>
|
||||
<Button type="primary" size={size}>
|
||||
Primary
|
||||
</Button>
|
||||
<Button size={size}>Default</Button>
|
||||
<Button type="dashed" size={size}>
|
||||
Dashed
|
||||
</Button>
|
||||
</Space>
|
||||
<Button type="link" size={size}>
|
||||
Link
|
||||
</Button>
|
||||
<Space 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} />
|
||||
<Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
|
||||
Download
|
||||
</Button>
|
||||
<Button type="primary" icon={<DownloadOutlined />} size={size}>
|
||||
Download
|
||||
</Button>
|
||||
</Space>
|
||||
</Space>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@ -34,6 +34,7 @@ And 4 other properties additionally.
|
||||
|
||||
<code src="./demo/basic.tsx">Type</code>
|
||||
<code src="./demo/icon.tsx">Icon</code>
|
||||
<code src="./demo/debug-icon.tsx" debug>Debug Icon</code>
|
||||
<code src="./demo/size.tsx">Size</code>
|
||||
<code src="./demo/disabled.tsx">Disabled</code>
|
||||
<code src="./demo/loading.tsx">Loading</code>
|
||||
@ -75,14 +76,11 @@ Following the Ant Design specification, we will add one space between if Button
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
|
||||
|
||||
<style>
|
||||
[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 16px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-button-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
@ -37,6 +37,7 @@ group:
|
||||
|
||||
<code src="./demo/basic.tsx">按钮类型</code>
|
||||
<code src="./demo/icon.tsx">图标按钮</code>
|
||||
<code src="./demo/debug-icon.tsx" debug>调试图标按钮</code>
|
||||
<code src="./demo/size.tsx">按钮尺寸</code>
|
||||
<code src="./demo/disabled.tsx">不可用状态</code>
|
||||
<code src="./demo/loading.tsx">加载中状态</code>
|
||||
@ -80,14 +81,11 @@ group:
|
||||
<img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格" />
|
||||
|
||||
<style>
|
||||
[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
[id^="components-button-demo-"]:not([id^="components-button-demo-legacy-group"]) .ant-btn-rtl {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
.site-button-ghost-wrapper {
|
||||
padding: 8px;
|
||||
background: rgb(190, 200, 200);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .site-button-ghost-wrapper {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user