> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/basic/fab.md).

# 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**

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

**app.ts**

```typescript
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.   |