mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 23:00:20 +08:00
7fd093bd0a
* docs: add general components TS demo * docs: add layout components TS demo * docs: add navigation components TS demo * docs: add data entry components TS demo * chore(deps): add types for qs * docs: add data display TS demo * docs: add feedback components TS demo * docs: add other components TS demo * chore(deps): add types * docs: unified demo code style * docs: fix lint error * docs: add demo TS type * docs: fix demo TS type * test: update snapshot * docs: fix TS demo * feat: update Rate character type * docs: fix lint error * feat: update Rate character type * feat: update Rate character type
2.7 KiB
2.7 KiB
| order | title | ||||
|---|---|---|---|---|---|
| 1 |
|
zh-CN
当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。
如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。
en-US
Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.
If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Button rather than using the icon property.
import React from 'react';
import { Button, Tooltip } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
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" />
</>
);
export default App;