@dev-bits/ngx-fab-menu v1.0.0

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.

Example

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