ant-design/components/float-button/demo/controlled.tsx
dingkang ad8dd24cc8
dome: optimize FloatBotton demo style (#42980)
* docs: FloatBotton open 属性说明

* test: update snapshots

* demo: add controlled demo

* demo: update demo

* feat: add warning

* feat: update warning

* demo: update controlled demo

* demo: prettify demo style

* demo: update snapshots

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>
2023-06-13 11:05:05 +08:00

29 lines
690 B
TypeScript

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