悬浮按钮 FloatButton - Namu Design

悬浮按钮。自 5.0.0 版本开始提供该组件。

何时使用

用于网站上的全局功能；
无论浏览到何处都可以看见的按钮。

代码演示

最简单的用法。

通过 shape 设置不同的形状。

返回页面顶部的操作按钮。

通过 type 改变悬浮按钮的类型。

可以通过 description 设置文字内容。

仅当 shape 属性为 square 时支持。由于空间较小，推荐使用比较精简的双数文字。

浮动按钮组

按钮组合使用时，推荐使用 <FloatButton.Group />，并通过设置 shape 属性改变悬浮按钮组的形状。悬浮按钮组的 shape 会覆盖内部 FloatButton 的 shape 属性。

通过 open 设置组件为受控模式，需要配合 trigger 一起使用。

右上角附带圆形徽标数字的悬浮按钮。

API

通用属性参考：通用属性

自 antd@5.0.0 版本开始提供该组件。

共同的 API

参数	说明	类型	默认值	版本
icon	自定义图标	ReactNode	-
description	文字及其它内容	ReactNode	-
tooltip	气泡卡片的内容	ReactNode \| () => ReactNode	-
type	设置按钮类型	`default` \| `primary`	`default`
shape	设置按钮形状	`circle` \| `square`	`circle`
onClick	点击按钮时的回调	(event) => void	-
href	点击跳转的地址，指定此属性 button 的行为和 a 链接一致	string	-
target	相当于 a 标签的 target 属性，href 存在时生效	string	-
badge	带徽标数字的悬浮按钮（不支持 `status` 以及相关属性）	BadgeProps	-	5.4.0

FloatButton.Group

参数	说明	类型	默认值	版本
shape	设置包含的 FloatButton 按钮形状	`circle` \| `square`	`circle`
trigger	触发方式（有触发方式为菜单模式）	`click` \| `hover`	-
open	受控展开，需配合 trigger 一起使用	boolean	-
onOpenChange	展开收起时的回调，需配合 trigger 一起使用	(open: boolean) => void	-

FloatButton.BackTop

参数	说明	类型	默认值	版本
duration	回到顶部所需时间（ms）	number	450
target	设置需要监听其滚动事件的元素	() => HTMLElement	() => window
visibilityHeight	滚动高度达到此参数值才出现 BackTop	number	400
onClick	点击按钮的回调函数	() => void	-

Design Token

组件 Token

全局 Token