ant-design/components/button/demo/icon-position.tsx
George H 14f8279aea
feat: Support iconPosition with button icon (#47791)
* feat: button support iconPosition

* fix: iconPosition compatible LoadingIcon

* docs(Button): update Button with iconPosition demo

* fix: delete debug type

* fix: iconPosition for InnerLoadingIcon with not existIcon

* chore: update button snapshots

* fix: fixed loading-icon-end style

* chore: refactor buttonContent with genButtonContent

* fix: iconPosition compatible with rtl

* docs(Button): update button with iconPosition demo

* chore: update test

* fix: iconPosition compatible with rtl

* docs(Buttob): add icon-position demo

* restore icon demo

* update snapshots

* docs: update icon button demo

* docs: update iconPosition button demo

* Update components/button/index.zh-CN.md

Co-authored-by: kiner-tang <1127031143@qq.com>
Signed-off-by: George H <default_hyn@163.com>

* Update components/button/index.zh-CN.md

Co-authored-by: kiner-tang <1127031143@qq.com>
Signed-off-by: George H <default_hyn@163.com>

* Update components/button/demo/icon-position.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: George H <default_hyn@163.com>

* Update components/button/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: George H <default_hyn@163.com>

* Update components/button/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: George H <default_hyn@163.com>

---------

Signed-off-by: George H <default_hyn@163.com>
Co-authored-by: kiner-tang <1127031143@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
2024-04-07 22:42:20 +08:00

61 lines
2.0 KiB
TypeScript

import React, { useState } from 'react';
import { SearchOutlined } from '@ant-design/icons';
import { Button, Divider, Flex, Radio, Space, Tooltip } from 'antd';
const App: React.FC = () => {
const [position, setPosition] = useState<'start' | 'end'>('start');
return (
<>
<Space>
<Radio.Group value={position} onChange={(e) => setPosition(e.target.value)}>
<Radio.Button value="start">start</Radio.Button>
<Radio.Button value="end">end</Radio.Button>
</Radio.Group>
</Space>
<Divider orientation="left" plain>
Preview
</Divider>
<Flex gap="small" vertical>
<Flex wrap="wrap" gap="small">
<Tooltip title="search">
<Button type="primary" shape="circle" icon={<SearchOutlined />} />
</Tooltip>
<Button type="primary" shape="circle">
A
</Button>
<Button type="primary" icon={<SearchOutlined />} iconPosition={position}>
Search
</Button>
<Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} />
</Tooltip>
<Button icon={<SearchOutlined />} iconPosition={position}>
Search
</Button>
</Flex>
<Flex wrap="wrap" gap="small">
<Tooltip title="search">
<Button shape="circle" icon={<SearchOutlined />} />
</Tooltip>
<Button icon={<SearchOutlined />} type="text" iconPosition={position}>
Search
</Button>
<Tooltip title="search">
<Button type="dashed" shape="circle" icon={<SearchOutlined />} />
</Tooltip>
<Button type="dashed" icon={<SearchOutlined />} iconPosition={position}>
Search
</Button>
<Button icon={<SearchOutlined />} href="https://www.google.com" iconPosition={position} />
<Button type="primary" loading iconPosition={position}>
Loading
</Button>
</Flex>
</Flex>
</>
);
};
export default App;