mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-21 21:28:09 +08:00
570c1be492
* site: add component version to meta * Update .dumi/theme/builtins/ComponentMeta/index.tsx Signed-off-by: afc163 <afc163@gmail.com> --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com>
3.2 KiB
3.2 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
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 | () => 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 | - | |
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 /> |
|
onOpenChange | Callback executed when active menu is changed, use it with trigger | (open: boolean) => void | - |
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 | - |