@corentinmag/ngx-float-button

To use this library:

$ npm install @corentinmag/ngx-float-button
$ ng add @angular/material

check demo here

// app.module.ts

import { NgxFloatButtonModule } from '@corentinmag/ngx-float-button';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...

@NgModule({
    ...,
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        NgxFloatButtonModule
    ]
})

<!-- app.component.html -->
<ngx-float-button>
    <ngx-float-item-button></ngx-float-item-button>
    <ngx-float-item-button></ngx-float-item-button>
    <ngx-float-item-button></ngx-float-item-button>
</ngx-float-button>

Ngx-float-button

List of Inputs

@Inputs	type	default	description
direction	'top' | 'left' | 'right' | 'bottom'	top	position of the child buttons relative to the main button
icon	string	home	should be a material icon string (https://fonts.google.com/icons)
tooltip	string	home	not used
color	ThemePalette	primary	main button color
position	'br' | 'bl' | 'tl' | 'tr'	br	either the main button is positionned on the bottom-right, bottom-left, top-left or top-right of the viewport
disabled	boolean	false	either the main button is disabled or not
spaceBetween	number	5	the space in pixel between each child button
spaceGap	number	15	the space in pixel between the main button and the first child button
isOpen	boolean	false	either the child buttons should appear at startup
hoverable	boolean	false	either the user should hover or click the main button to reveal the child buttons
tooltipDisabled	boolean	false	either tooltip is enabled or not

Ngx-float-item-button

List of Inputs

@Inputs	type	default	description
icon	string	home	should be a material icon string (https://fonts.google.com/icons)
tooltip	string	home	the tooltip text
color	ThemePalette	primary	main button color
disabled	boolean	false	either the button is disabled or not
tooltipDisabled	boolean	false	either tooltip is enabled or not