mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-30 04:18:28 +08:00
c8413cc78f
* 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>
75 lines
1.7 KiB
TypeScript
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;
|