Fab Button

The base-fab-button component in Angular is a Floating Action Button (FAB) that provides a customizable and extensible menu for quick access to various actions within an Angular application.

Usage

Include the '' tag in your Angular templates to incorporate the FAB component into your application. Customize the FAB icon and sub-buttons based on your application's requirements.

<base-fab-button
  [fabIcon]="'bi-list'"
  [buttons]="[
    { icon: 'bi-pencil', color: 'blue', routerLink: '/edit' },
    { icon: 'bi-trash', color: 'red', event: deleteEventEmitter },
    // Add additional buttons as needed
  ]"
></base-fab-button>

Styling

  • The component references an external stylesheet (fab-button.component.scss) for styling. Developers can customize the visual appearance of the FAB and sub-buttons by modifying this stylesheet.

Notes

  • The FAB component supports dynamic addition of sub-buttons, making it versatile for various use cases.
  • Developers can customize the FAB icon, sub-buttons, and associated actions to meet specific styling or functionality requirements.
Table of Contents