Quick Start

$ npm i @dev-bits/ngx-fab-menu

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// Import ngx-fab-menu
import { NgxFabMenuModule } from '@brookes/ngx-fab-menu';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // Add to imports
    NgxFabMenuModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Example

<ngx-fab-menu>
  <!-- FAB Menu Items -->
  <!-- Each menu item should have the `fab-menu-item` class -->
  <div class="fab-menu-item">
    <!--
      Any custom markup for each individual item is allowed, however,
      `.fab-menu-item-icon` and `.fab-menu-item-title` will be styled by default
    -->
    <span class="fab-menu-item-icon">
      <svg><path d="..."></path></svg>
    <span>

    <span class="fab-menu-item-title">
      Item 1
    </span>
  </div>

  <div class="fab-menu-item">
    <!-- etc. -->
  </div>

</ngx-fab-menu>

Customisation

Properties

Default styling can be overridden with the following inputs.

| Input | Type | Description | Default | | ------------------ | -------- | -------------------------------------------------------- | ----------------------------------- | | backgroundColor | string | Main background color | #000000 | | color | string | Main text color | #ffffff | | backdropSize | string | Size of the menu backdrop on both axes | 100vh | | backdropRadius | string | Backdrop top-left border-radius | 9999px | | backdropOpacity | string | Backdrop opacity | 0.9 | | triggerSize | string | Size of the FAB on both axes | 64px | | triggerBoxShadow | string | FAB box shadow | 0 2px 4px 2px rgba(0, 0, 0, 0.25) | | menuItemHeight | string | Menu item height (Only affects default markup structure) | 64px |

Example

<ngx-fab-menu
  backgroundColor="#10c15c"
  color="#ededed"
  backdropSize="75vh"
  backdropOpacity="0.75"
>
  <!-- etc. -->
</ngx-fab-menu>