mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 17:19:11 +08:00
119 lines
3.0 KiB
TypeScript
119 lines
3.0 KiB
TypeScript
|
import React from 'react';
|
||
|
import {
|
||
|
DownloadOutlined,
|
||
|
EllipsisOutlined,
|
||
|
HeartOutlined,
|
||
|
LikeOutlined,
|
||
|
CommentOutlined,
|
||
|
StarOutlined,
|
||
|
ShareAltOutlined,
|
||
|
WarningOutlined,
|
||
|
MailOutlined,
|
||
|
MobileOutlined,
|
||
|
} from '@ant-design/icons';
|
||
|
import { Button, Menu, Dropdown, Space, Tooltip } from 'antd';
|
||
|
|
||
|
const App: React.FC = () => (
|
||
|
<div>
|
||
|
<Space.Compact block>
|
||
|
<Tooltip title="Like">
|
||
|
<Button icon={<LikeOutlined />} />
|
||
|
</Tooltip>
|
||
|
<Tooltip title="Comment">
|
||
|
<Button icon={<CommentOutlined />} />
|
||
|
</Tooltip>
|
||
|
<Tooltip title="Star">
|
||
|
<Button icon={<StarOutlined />} />
|
||
|
</Tooltip>
|
||
|
<Tooltip title="Heart">
|
||
|
<Button icon={<HeartOutlined />} />
|
||
|
</Tooltip>
|
||
|
<Tooltip title="Share">
|
||
|
<Button icon={<ShareAltOutlined />} />
|
||
|
</Tooltip>
|
||
|
<Tooltip title="Download">
|
||
|
<Button icon={<DownloadOutlined />} />
|
||
|
</Tooltip>
|
||
|
<Dropdown
|
||
|
placement="bottomRight"
|
||
|
overlay={
|
||
|
<Menu
|
||
|
items={[
|
||
|
{
|
||
|
key: '1',
|
||
|
label: 'Report',
|
||
|
icon: <WarningOutlined />,
|
||
|
},
|
||
|
{
|
||
|
key: '2',
|
||
|
label: 'Mail',
|
||
|
icon: <MailOutlined />,
|
||
|
},
|
||
|
{
|
||
|
key: '3',
|
||
|
label: 'Mobile',
|
||
|
icon: <MobileOutlined />,
|
||
|
},
|
||
|
]}
|
||
|
/>
|
||
|
}
|
||
|
trigger={['click']}
|
||
|
>
|
||
|
<Button icon={<EllipsisOutlined />} />
|
||
|
</Dropdown>
|
||
|
</Space.Compact>
|
||
|
<br />
|
||
|
<Space.Compact block>
|
||
|
<Button type="primary">Button 1</Button>
|
||
|
<Button type="primary">Button 2</Button>
|
||
|
<Button type="primary">Button 3</Button>
|
||
|
<Button type="primary">Button 4</Button>
|
||
|
<Tooltip title="Tooltip">
|
||
|
<Button type="primary" icon={<DownloadOutlined />} disabled />
|
||
|
</Tooltip>
|
||
|
<Tooltip title="Tooltip">
|
||
|
<Button type="primary" icon={<DownloadOutlined />} />
|
||
|
</Tooltip>
|
||
|
</Space.Compact>
|
||
|
<br />
|
||
|
<Space.Compact block>
|
||
|
<Button>Button 1</Button>
|
||
|
<Button>Button 2</Button>
|
||
|
<Button>Button 3</Button>
|
||
|
<Tooltip title="Tooltip">
|
||
|
<Button icon={<DownloadOutlined />} disabled />
|
||
|
</Tooltip>
|
||
|
<Tooltip title="Tooltip">
|
||
|
<Button icon={<DownloadOutlined />} />
|
||
|
</Tooltip>
|
||
|
<Button type="primary">Button 4</Button>
|
||
|
<Dropdown
|
||
|
placement="bottomRight"
|
||
|
overlay={
|
||
|
<Menu
|
||
|
items={[
|
||
|
{
|
||
|
key: '1',
|
||
|
label: '1st item',
|
||
|
},
|
||
|
{
|
||
|
key: '2',
|
||
|
label: '2nd item',
|
||
|
},
|
||
|
{
|
||
|
key: '3',
|
||
|
label: '3rd item',
|
||
|
},
|
||
|
]}
|
||
|
/>
|
||
|
}
|
||
|
trigger={['click']}
|
||
|
>
|
||
|
<Button type="primary" icon={<EllipsisOutlined />} />
|
||
|
</Dropdown>
|
||
|
</Space.Compact>
|
||
|
</div>
|
||
|
);
|
||
|
|
||
|
export default App;
|