ant-design/components/button/demo/icon-position.tsx
EmilyyyLiu b1467d6ec8
feat(Divider): unify orientation attribute usage (#53645)
* feat[Divider]: Unified use of orientation attribute

* feat: Restore the size type missed in the merge

* feat: Delete unnecessary demo adjustments

* docs: change text

* feat: deprecated warning

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

Signed-off-by: thinkasany <480968828@qq.com>

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

Signed-off-by: thinkasany <480968828@qq.com>

* feat: use useOrientation and change test,doc

* feat: change demos orientation attribut

* docs: change token and demo (orientationMargin->titlePlacementMargin)

* feat: change demos  titlePlacement="left/right" -> "start/end"

* docs: titlePlacement align

* feat: Resolve merge conflicts

* fix: lint error

* fix: demo lint error

* feat: use mergedStyles.content

* test: update snapshot

* rerun ci

* test: update snapshot

* fix: delete titlePlacementMargin and udpate snapshots

* feat: change demos orientationMargin-> styles.content.margin

* Update components/divider/demo/vertical.md

Co-authored-by: thinkasany <480968828@qq.com>
Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>

* feat: Call warning using list

* docs: `vertical` to make the divider vertical.

* docs: Modify punctuation usage

* docs: Add deprecated description

* docs: Clarify the possible values for titlePlacement in the example

* feat: replase  { margin: '0' } ->{ margin: 0 }

---------

Signed-off-by: thinkasany <480968828@qq.com>
Signed-off-by: EmilyyyLiu <100924403+EmilyyyLiu@users.noreply.github.com>
Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: thinkasany <480968828@qq.com>
2025-06-03 14:09:56 +08:00

66 lines
2.1 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'>('end');
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 titlePlacement="start" plain>
Preview
</Divider>
<Flex gap="small" vertical>
<Flex 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 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"
target="_blank"
iconPosition={position}
/>
<Button type="primary" loading iconPosition={position}>
Loading
</Button>
</Flex>
</Flex>
</>
);
};
export default App;