mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 08:59:15 +08:00
502dac12aa
* docs: fix code * feat: lint * feat: prettier * feat: test * feat: review * feat: format html * feat: format html
119 lines
3.0 KiB
TypeScript
119 lines
3.0 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
CommentOutlined,
|
|
DownloadOutlined,
|
|
EllipsisOutlined,
|
|
HeartOutlined,
|
|
LikeOutlined,
|
|
MailOutlined,
|
|
MobileOutlined,
|
|
ShareAltOutlined,
|
|
StarOutlined,
|
|
WarningOutlined,
|
|
} from '@ant-design/icons';
|
|
import { Button, Dropdown, Menu, 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;
|