mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-16 15:11:00 +08:00
d38aea0138
* feat(float-button): support Tooltips props (cherry picked from commit fb3d131beea52655e780e462eae08662b08095db) * chore: update demo (cherry picked from commit 36b39f5e7bf8ace89c705e7ece22549bc623f9e3) * chore: logic reuse * chore: update demo snap * test: add unit test * chore: edge case * chore: add warn * docs: update docs * revert * fix: handle undefined and null in convertToTooltipProps
3.8 KiB
3.8 KiB
| category | group | title | description | cover | coverDark | demo | tag | ||
|---|---|---|---|---|---|---|---|---|---|
| Components | General | FloatButton | A button that floats at the top of the page. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original |
|
5.0.0 |
When To Use
- For global functionality on the site.
- Buttons that can be seen wherever you browse.
Examples
Basic
Type
Shape
Description
FloatButton with tooltip
FloatButton Group
Menu mode
Controlled mode
placement
BackTop
badge
debug dot
_InternalPanelDoNotUseOrYouWillBeFired
API
Common props ref：Common props
This component is available since
antd@5.0.0.
common API
| 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 | TooltipProps | - | TooltipProps: 5.25.0 |
| 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 | - | |
| htmlType | Set the original html type of button, see: MDN |
submit | reset | button |
button |
5.21.0 |
| badge | Attach Badge to FloatButton. status and other props related are not supported. |
BadgeProps | - | 5.4.0 |
FloatButton.Group
| 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, use it with trigger | boolean | - | |
| closeIcon | Customize close button icon | React.ReactNode | <CloseOutlined /> |
|
| placement | Customize menu animation placement | top | left | right | bottom |
top |
5.21.0 |
| onOpenChange | Callback executed when active menu is changed, use it with trigger | (open: boolean) => void | - | |
| onClick | Set the handler to handle click event (only work in Menu mode) |
(event) => void | - | 5.3.0 |
FloatButton.BackTop
| 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 | - |