ant-design/components/float-button/demo/badge-debug.tsx
lijianan 51b973d9d5
feat: FloatButton support Badge (#41040)
* feat: FloatButton support internal Badge

* update docs

* style

* update docs

* test: update snap

* fix

* update demo

* test: update snap

* update style

* test: update snap

* test: update snap

* add docs

* fix: update style

* update

* fix

* fix

* fix

* update style

* fix

* update demo

* add

* add docs

* snap

* test: add test case

* Update components/float-button/demo/badge.md

Co-authored-by: MadCcc <1075746765@qq.com>

* fix

* docs: add debug demo

* docs: add debug demo

* test: update snap

* fix border-radius

* update snap

* fix

* fix

* rename

* style: use paddingXXS

* fix

* update demo

* update snap

* demo: add demo

---------

Co-authored-by: MadCcc <1075746765@qq.com>
2023-03-20 10:28:20 +08:00

23 lines
573 B
TypeScript

import { ConfigProvider, FloatButton, Slider } from 'antd';
import type { AliasToken } from 'antd/es/theme/interface';
import React, { useState } from 'react';
const App: React.FC = () => {
const [radius, setRadius] = useState<number>(0);
const token: Partial<AliasToken> = {
borderRadius: radius,
};
return (
<>
<Slider min={0} max={20} style={{ margin: 16 }} onChange={setRadius} />
<ConfigProvider theme={{ token }}>
<FloatButton shape="square" badge={{ dot: true }} />
</ConfigProvider>
</>
);
};
export default App;