ant-design/components/float-button/demo/placement.tsx
lijianan c8413cc78f
feat: FloatButton support placement (#50407)
* feat: 不要合并

* fix: fix

* fix: fix

* test: fix test

* test: fix test

* test: fix test

* test: fix test

* Update components/float-button/FloatButtonGroup.tsx

Co-authored-by: MadCcc <madccc@foxmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* Update components/float-button/__tests__/__snapshots__/demo-extend.test.ts.snap

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

* fix: fix

* test: add test case

* fix: fix

* fix: fix

* site: update site style

* demo: update demo

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: MadCcc <madccc@foxmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
2024-08-20 10:16:07 +08:00

75 lines
1.7 KiB
TypeScript

import React from 'react';
import {
CommentOutlined,
DownOutlined,
LeftOutlined,
RightOutlined,
UpOutlined,
} from '@ant-design/icons';
import { Flex, FloatButton } from 'antd';
const BOX_SIZE = 100;
const BUTTON_SIZE = 40;
const wrapperStyle: React.CSSProperties = {
width: '100%',
height: '100vh',
overflow: 'hidden',
position: 'relative',
};
const boxStyle: React.CSSProperties = {
width: BOX_SIZE,
height: BOX_SIZE,
position: 'relative',
};
const insetInlineEnd: React.CSSProperties['insetInlineEnd'][] = [
(BOX_SIZE - BUTTON_SIZE) / 2,
-(BUTTON_SIZE / 2),
(BOX_SIZE - BUTTON_SIZE) / 2,
BOX_SIZE - BUTTON_SIZE / 2,
];
const bottom: React.CSSProperties['bottom'][] = [
BOX_SIZE - BUTTON_SIZE / 2,
(BOX_SIZE - BUTTON_SIZE) / 2,
-BUTTON_SIZE / 2,
(BOX_SIZE - BUTTON_SIZE) / 2,
];
const icons = [
<UpOutlined key="up" />,
<RightOutlined key="right" />,
<DownOutlined key="down" />,
<LeftOutlined key="left" />,
];
const App: React.FC = () => (
<Flex justify="space-evenly" align="center" style={wrapperStyle}>
<div style={boxStyle}>
{(['top', 'right', 'bottom', 'left'] as const).map((placement, i) => {
const style: React.CSSProperties = {
position: 'absolute',
insetInlineEnd: insetInlineEnd[i],
bottom: bottom[i],
};
return (
<FloatButton.Group
key={placement}
trigger="click"
placement={placement}
style={style}
icon={icons[i]}
>
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
);
})}
</div>
</Flex>
);
export default App;