ant-design/components/float-button/demo/controlled.tsx
lijianan 2e4b9cb098
site: rewrite with CSS logical properties again (#50113)
* site: use CSS logical properties

* Update components/anchor/demo/targetOffset.tsx

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

* fix: fix

* fix: fix

* chore: fix

* fix: add more

* fix: add more

* site: rewrite with CSS logical properties

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
2024-07-29 01:33:18 +08:00

29 lines
699 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(true);
const onChange = (checked: boolean) => {
setOpen(checked);
};
return (
<>
<FloatButton.Group
open={open}
trigger="click"
style={{ insetInlineEnd: 24 }}
icon={<CustomerServiceOutlined />}
>
<FloatButton />
<FloatButton icon={<CommentOutlined />} />
</FloatButton.Group>
<Switch onChange={onChange} checked={open} style={{ margin: 16 }} />
</>
);
};
export default App;