2022-09-23 14:31:16 +08:00
|
|
|
|
---
|
|
|
|
|
|
category: Components
|
2022-11-09 12:28:04 +08:00
|
|
|
|
group: Other
|
2022-09-23 14:31:16 +08:00
|
|
|
|
title: FloatButton
|
|
|
|
|
|
cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
|
2022-11-09 12:28:04 +08:00
|
|
|
|
demo:
|
|
|
|
|
|
cols: 2
|
2022-09-23 14:31:16 +08:00
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
FloatButton. Available since `5.0.0`.
|
|
|
|
|
|
|
|
|
|
|
|
## When To Use
|
|
|
|
|
|
|
|
|
|
|
|
- For global functionality on the site.
|
|
|
|
|
|
- Buttons that can be seen wherever you browse.
|
|
|
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
|
## Examples
|
|
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
|
<!-- prettier-ignore -->
|
2022-11-17 11:30:20 +08:00
|
|
|
|
<code src="./demo/basic.tsx" iframe="360">Basic</code>
|
|
|
|
|
|
<code src="./demo/type.tsx" iframe="360">Type</code>
|
|
|
|
|
|
<code src="./demo/shape.tsx" iframe="360">Shape</code>
|
|
|
|
|
|
<code src="./demo/description.tsx" iframe="360">Description</code>
|
|
|
|
|
|
<code src="./demo/tooltip.tsx" iframe="360">FloatButton with tooltip</code>
|
|
|
|
|
|
<code src="./demo/group.tsx" iframe="360">FloatButton Group</code>
|
|
|
|
|
|
<code src="./demo/group-menu.tsx" iframe="360">Menu mode</code>
|
|
|
|
|
|
<code src="./demo/back-top.tsx" iframe="360">BackTop</code>
|
2022-11-09 12:28:04 +08:00
|
|
|
|
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
|
|
|
|
|
|
|
2022-09-23 14:31:16 +08:00
|
|
|
|
## API
|
|
|
|
|
|
|
|
|
|
|
|
### common API
|
|
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| Property | Description | Type | Default | Version |
|
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
|
| icon | Set the icon component of button | ReactNode | - | |
|
|
|
|
|
|
| description | Text and other | ReactNode | - | |
|
|
|
|
|
|
| tooltip | The text shown in the tooltip | ReactNode \| () => ReactNode | | |
|
|
|
|
|
|
| type | Setting button type | `default` \| `primary` | `default` | |
|
|
|
|
|
|
| shape | Setting button shape | `circle` \| `square` | `circle` | |
|
|
|
|
|
|
| onClick | Set the handler to handle `click` event | (event) => void | - | |
|
|
|
|
|
|
| href | The target of hyperlink | string | - | |
|
|
|
|
|
|
| target | Specifies where to display the linked URL | string | - | |
|
2022-09-23 14:31:16 +08:00
|
|
|
|
|
|
|
|
|
|
### FloatButton.Group
|
|
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| Property | Description | Type | Default | Version |
|
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
|
| shape | Setting button shape of children | `circle` \| `square` | `circle` | |
|
|
|
|
|
|
| trigger | Which action can trigger menu open/close | `click` \| `hover` | - | |
|
|
|
|
|
|
| open | Whether the menu is visible or not | boolean | - | |
|
|
|
|
|
|
| onOpenChange | Callback executed when active menu is changed | (open: boolean) => void | - | |
|
2022-09-23 14:31:16 +08:00
|
|
|
|
|
|
|
|
|
|
### FloatButton.BackTop
|
|
|
|
|
|
|
2022-11-17 17:31:26 +08:00
|
|
|
|
| Property | Description | Type | Default | Version |
|
|
|
|
|
|
| --- | --- | --- | --- | --- |
|
|
|
|
|
|
| duration | Time to return to top（ms） | number | 450 | |
|
|
|
|
|
|
| target | Specifies the scrollable area dom node | () => HTMLElement | () => window | |
|
|
|
|
|
|
| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | |
|
|
|
|
|
|
| onClick | A callback function, which can be executed when you click the button | () => void | - | |
|
