FloatButton

A button that floats at the top of the page.
Import

When To Use#

  • For global functionality on the site.
  • Buttons that can be seen wherever you browse.

Examples

The most basic usage.

      Loading...
    

Change the shape of the FloatButton with nsShape.

      Loading...
    

Adding the tooltip directive shows the FloatButton with a tooltip.

      Loading...
    

Open menu mode with nzTrigger, which could be hover or click.

      Loading...
    

Customize animation placement, providing four preset placement: top, right, bottom, left, the top position by default.

      Loading...
    

Change the type of the FloatButton with nzType.

      Loading...
    

Setting nzDescription prop to show FloatButton with description.

supported only when shape is square. Due to narrow space for text, short sentence is recommended.

      Loading...
    

When multiple buttons are used together, nz-float-button-group is recommended. By setting nzShape of FloatButtonGroup, you can change the shape of group.

      Loading...
    

Set the nzOpen property to control whether nz-float-button-group is expanded.

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

Set the nzOpen property to control whether nz-float-button-group is expanded.

      Loading...
    

API#

Common API#

PropertyDescriptionTypeDefault
[nzIcon]Set the icon component of buttonstring | TemplateRef<void>-
[nzDescription]Text and other contentstring | TemplateRef<void> | null-
[nzType]Button type'default' | 'primary''default'
[nzShape]Button shape'circle' | 'square''circle'
[nzHref]The target of hyperlinkstring-
[nzTarget]Specifies where to display the linked URLstring-
(nzOnClick)Callback of click eventEventEmitter<boolean>-

nz-float-button-group#

PropertyDescriptionTypeDefault
[nzShape]Shape of button group'circle' | 'square''circle'
[nzTrigger]Which action can trigger menu open/close'click' | 'hover'-
[nzPlacement]Customize menu animation placement'top' | 'right' | 'bottom' | 'left''top'
[nzOpen]Whether the menu is visible or notboolean-
(nzOnOpenChange)Callback executed when active menu is changedEventEmitter<boolean>-

nz-float-button-top#

PropertyDescriptionTypeDefaultGlobal Config
[nzVisibilityHeight]The nz-float-button-top button will not show until the scroll height reaches this valuenumber400
[nzTarget]Specifies the scrollable area dom nodestring | Elementwindow-
[nzDuration]Duration of scrolling to top (ms)number450-
(nzOnClick)Callback executed when click the buttonEventEmitter<boolean>--