FloatButton. Available since 4.0.0
.
When To Use
- For global functionality on the site.
- Buttons that can be seen wherever you browse.
API
This component is available since ant-design-vue@4.0.0
.
common API
Property |
Description |
Type |
Default |
Version |
icon |
Set the icon component of button |
slot |
- |
|
description |
Text and other |
string | slot |
- |
|
tooltip |
The text shown in the tooltip |
string | slot |
|
|
type |
Setting button type |
default | primary |
default |
|
shape |
Setting button shape |
circle | square |
circle |
|
href |
The target of hyperlink |
string |
- |
|
target |
Specifies where to display the linked URL |
string |
- |
|
common events
Events Name |
Description |
Arguments |
Version |
click |
Set the handler to handle click event |
(event) => void |
- |
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(v-model) |
Whether the menu is visible or not |
boolean |
- |
|
FloatButton.Group Events
Events Name |
Description |
Arguments |
Version |
openChange |
Callback executed when active menu is changed |
(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 |
|