ant-design/components/float-button/demo/controlled.tsx
dingkang 9459cbfaf8
add FloatBotton component open api description and demo (#42835)
* docs: FloatBotton open 属性说明

* test: update snapshots

* demo: add controlled demo

* demo: update demo

* feat: add warning

* feat: update warning

* demo: update controlled demo

---------

Co-authored-by: 二货机器人 <smith3816@gmail.com>
2023-06-12 17:20:55 +08:00

29 lines
667 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} />
</>
);
};
export default App;