FloatButton悬浮按钮

何时使用#

  • 用于网站上的全局功能；

  • 无论浏览到何处都可以看见的按钮。

引入模块#

import { NzFloatButtonModule } from 'ng-zorro-antd/float-button';

代码演示

基本

最简单的用法。

expand codeexpand code
      加载中
形状

通过 nsShape 设置不同的形状。

expand codeexpand code
      加载中
浮动按钮组

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

expand codeexpand code
      加载中
受控模式

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

expand codeexpand code
      加载中
类型

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

expand codeexpand code
      加载中
描述

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

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

expand codeexpand code
      加载中
菜单模式

设置 nzTrigger 属性即可开启菜单模式。提供 hover 和 click 两种触发方式。

expand codeexpand code
      加载中
Scroll down to see the back to top button on the bottom right
返回顶部

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

expand codeexpand code
      加载中

API#

共同的 API#

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

nz-float-button-group#

参数说明类型默认值
[nzShape]设置按钮组形状circle | squarecircle
[nzTrigger]触发方式（有触发方式为菜单模式）click | hover-
[nzOpen]受控展开boolean-
(nzOnOpenChange)展开收起时的回调EventEmitter<boolean>-

nz-float-button-top#

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