Fab

Fab component is working like standard fab buttons, but it has such extended options:

• direction: up / down /right / left. Means in what way to show fab action buttons;

• showButtons: true / false. Means if action buttons will be opened on init;

• stayOpened: thue /false. Means if action buttons will stay opened after click on them.

Usage

app.html

<cf-fab [properties]="myFab1" (cfTriggerEvent)="log($event)" (cfActionButtonEvent)="log($event)"></cf-fab>

app.ts

myFab1: FabModel = {
    direction: "right",
    showButtons: true,
    triggerButton: { 
        label: "Trigger", 
        labelPosition: "above", 
        disabled: true 
    },
    actionButtons: [
      { icon: {name: "home"}, display: this.shown },
      { icon: {name: "star"}, label: "Item", labelPosition: "below" },
      { icon: {name: "stars"}, label: "Item", labelPosition: "above", disabled: true }
    ]
};

myFabStyles1 = {
  container: {
    class: 'container-class'
  },
  fabDial: {
    trigger: {
      class: 'trigger-class'
      icon: {
        class: 'trigger-icon-class'
      }
    },
    actions: {
      class: 'action-class'
      icon: {
        class: 'action-icon-class'
      }
    } 
  }
};

Fab input properties

Attr	Type	Details
direction	string	It is direction of opening Fab action buttons. Optional, but default must be set in file: /src/lib or demo/assets/settings/fab/settings.ts. Can be: 'up', 'right', 'down', 'left'.
triggerButton	FabButtonModel	It is data for Fab trigger button based on FabButtonModel. Optional, but then must be set in file describet above.
actionButtons	FabButtonModel[]	It is an array of buttons with type FabButtonModel. Optional.
showButtons	boolean	It set if Fab action buttons must be shown on init. Optional. Default is false.
stayOpened	boolean	It set if click action on Fab action buttons must hide them or not. Optional. Default is false.

Fab button model properties

Attr	Type	Details
icon	IconModel	It is icon for Fab trigger/action buttons based on IconModel. Optional, but for trigger button must be set in file for Fab SETTINGS in app assets folder.
label	string	It is text for Fab trigger/action buttons tooltips. Optional.
labelPosition	string	It is position of those tooltips. Optional, but can be set in default SETTINGS or will take Angular Material default.
display	boolean	It is property to hide/show Fab buttons. Optional.
disabled	boolean	It is property to enable/disable Fab buttons. Optional.

Fab output properties

Attr	Details
cfTriggerEvent	Event is fired on fab trigger button click and has trigger button object inside.
cfActionButtonEvent	Event is fired on fab action button click and has action button object inside.