ant-design/components/float-button/demo/controlled.tsx

36 lines
967 B
TypeScript

import React, { useState } from 'react';
import { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';
import { FloatButton, Switch } from 'antd';
const App: React.FC = () => {
const [open, setOpen] = useState<boolean>(true);
return (
<>
<Switch onChange={setOpen} checked={open} style={{ margin: 16 }} />
<FloatButton.Group
open={open}
trigger="click"
style={{ insetInlineEnd: 24 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
<FloatButton.Group
open={open}
shape="square"
trigger="click"
style={{ insetInlineEnd: 88 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
</>
);
};
export default App;