使用import { FloatButton } from "antd"; |
版本自 5.0.0 起支持 |
最简单的用法。
通过 shape 设置不同的形状。
设置 tooltip 属性，即可开启气泡卡片。
设置 trigger 属性即可开启菜单模式。提供 hover 和 click 两种触发方式。
自定义弹出位置，提供了四个预设值：top、right、bottom、left，默认值为 top。
右上角附带圆形徽标数字的悬浮按钮。
通过 type 改变悬浮按钮的类型。
可以通过 description 设置文字内容。
仅当
shape属性为square时支持。由于空间较小，推荐使用比较精简的双数文字。
按钮组合使用时，推荐使用 <FloatButton.Group />，并通过设置 shape 属性改变悬浮按钮组的形状。悬浮按钮组的 shape 会覆盖内部 FloatButton 的 shape 属性。
通过 open 设置组件为受控模式，需要配合 trigger 一起使用。
返回页面顶部的操作按钮。
通用属性参考：通用属性
自
antd@5.0.0版本开始提供该组件。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| icon | 自定义图标 | ReactNode | - | |
| description | 文字及其它内容 | ReactNode | - | |
| tooltip | 气泡卡片的内容 | ReactNode | TooltipProps | - | TooltipProps: 5.25.0 |
| type | 设置按钮类型 | default | primary | default | |
| shape | 设置按钮形状 | circle | square | circle | |
| onClick | 点击按钮时的回调 | (event) => void | - | |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
| htmlType | 设置 button 原生的 type 值，可选值请参考 HTML 标准 | submit | reset | button | button | 5.21.0 |
| badge | 带徽标数字的悬浮按钮（不支持 status 以及相关属性） | BadgeProps | - | 5.4.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| shape | 设置包含的 FloatButton 按钮形状 | circle | square | circle | |
| trigger | 触发方式（有触发方式为菜单模式） | click | hover | - | |
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
| closeIcon | 自定义关闭按钮 | React.ReactNode | <CloseOutlined /> | |
| placement | 自定义菜单弹出位置 | top | left | right | bottom | top | 5.21.0 |
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| duration | 回到顶部所需时间（ms） | number | 450 | |
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
| onClick | 点击按钮的回调函数 | () => void | - |
