ant-design/components/float-button/demo/badge.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

21 lines
768 B
TypeScript

import { QuestionCircleOutlined } from '@ant-design/icons';
import { FloatButton } from 'antd';
import React from 'react';
const App: React.FC = () => (
<>
<FloatButton shape="circle" badge={{ dot: true }} style={{ right: 24 + 70 + 70 }} />
<FloatButton.Group shape="circle" style={{ right: 24 + 70 }}>
<FloatButton tooltip={<div>custom badge color</div>} badge={{ count: 5, color: 'blue' }} />
<FloatButton badge={{ count: 5 }} />
</FloatButton.Group>
<FloatButton.Group shape="circle">
<FloatButton badge={{ count: 12 }} icon={<QuestionCircleOutlined />} />
<FloatButton badge={{ count: 123, overflowCount: 999 }} />
<FloatButton.BackTop visibilityHeight={0} />
</FloatButton.Group>
</>
);
export default App;