含有气泡卡片的悬浮按钮

浮动按钮组

FloatButton悬浮按钮

悬浮于页面上方的按钮。

使用

源码

components/float-button

文档

何时使用#

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

代码演示

最简单的用法。

      加载中

通过 nsShape 设置不同的形状。

      加载中

自定义弹出位置，提供了四个预设值：top、right、bottom、left，默认值为 top。

      加载中

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

      加载中

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

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

      加载中

浮动按钮组

按钮组合使用时，推荐使用 nz-float-button-group，并通过设置 nzShape 属性改变悬浮按钮组的形状。

      加载中

设置 nzOpen 属性控制 nz-float-button-group 是否展开

      加载中

Scroll down to see the back to top button on the bottom right

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

      加载中

API#

共同的 API#

参数	说明	类型	默认值
`[nzIcon]`	自定义图标	`string \| TemplateRef<void> \| null`	-
`[nzDescription]`	文字及其它内容	`string \| TemplateRef<void> \| null`	-
`[nzType]`	按钮类型	`'default' \| 'primary'`	`'default'`
`[nzShape]`	按钮形状	`'circle' \| 'square'`	`'circle'`
`[nzHref]`	点击跳转的地址，指定此参数 button 的行为和 a 链接一致	`string`	-
`[nzTarget]`	相当于 a 标签的 target 属性，`nzHref` 存在时生效	`string`	-
`(nzOnClick)`	点击按钮时的回调	`EventEmitter<boolean>`	-

nz-float-button-groupcomponent#

参数	说明	类型	默认值
`[nzShape]`	设置按钮组形状	`'circle' \| 'square'`	`'circle'`
`[nzTrigger]`	触发方式（有触发方式为菜单模式）	`'click' \| 'hover'`	-
`[nzPlacement]`	自定义菜单弹出位置	`'top' \| 'right' \| 'bottom' \| 'left'`	`'top'`
`[nzOpen]`	受控展开	`boolean`	-
`(nzOnOpenChange)`	展开收起时的回调	`EventEmitter<boolean>`	-

nz-float-button-topcomponent#

参数	说明	类型	默认值	全局配置
`[nzVisibilityHeight]`	滚动高度达到此值时才出现 `nz-float-button-top`	`number`	`400`	✅
`[nzTarget]`	设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数	`string \| Element`	`window`	-
`[nzDuration]`	回到顶部所需时间（毫秒）	`number`	`450`	-
`(nzOnClick)`	点击按钮的回调函数	`EventEmitter<boolean>`	-	-