feat(lib): implemented mat-mini-fab-menu component #6

Author: AnthonyNahas

README.md

@@ -115,6 +115,7 @@ Other modules in your application like for lazy loading import ` MatSelectCountr
 ## API
 
 ### `<mat-fab-menu>`  used to display the main component - [see the demo examples](https://angular-material-extensions.github.io/fab-menu/examples)
+### `<mat-mini-fab-menu>`  used to display a mini version of the fab menu - [see the demo examples](https://angular-material-extensions.github.io/fab-menu/examples)
 
 | option | bind  |  type  |   default    | description  |
 |:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|    
@@ -163,6 +164,13 @@ type MatFabMenuDirection = 'top' | 'bottom' | 'left' | 'right';
 <mat-fab-menu color="primary"
               [fabButtons]="fabButtonsRandom">
 </mat-fab-menu>
+
+<!-- or if you prefer the mini version -->
+
+<mat-mini-fab-menu color="primary"
+                   [fabButtons]="fabButtonsRandom">
+</mat-mini-fab-menu>
+
 ```
 
 ```typescript

projects/angular-material-extensions/fab-menu/src/lib/mat-fab-menu.module.ts

@@ -8,15 +8,15 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatMiniFabMenuComponent} from './mat-mini-fab-menu/mat-mini-fab-menu.component';
 
 @NgModule({
-  declarations: [MatFabMenuComponent, MatMiniFabMenuComponent, MatMiniFabMenuComponent],
+  declarations: [MatFabMenuComponent, MatMiniFabMenuComponent],
   imports: [
     CommonModule,
     MatButtonModule,
     MatIconModule,
     MatTooltipModule,
     FlexLayoutModule
   ],
-  exports: [MatFabMenuComponent]
+  exports: [MatFabMenuComponent, MatMiniFabMenuComponent]
 })
 export class MatFabMenuModule {
 }

src/app/app.component.html

@@ -485,6 +485,13 @@ <h2>Usage</h2>
                       [isActive]="isActive.checked"
                       [disabled]="disabled.checked">
         </mat-fab-menu>
+
+        <mat-mini-fab-menu [color]="color"
+                      [direction]="direction"
+                      [fabButtons]="exampleFabButtons"
+                      [isActive]="isActive.checked"
+                      [disabled]="disabled.checked">
+        </mat-mini-fab-menu>
       </div>
     </mat-card-content>
   </mat-card>

src/assets/md/html.md

@@ -2,6 +2,12 @@
 <mat-fab-menu color="primary" 
               [fabButtons]="fabButtonsRandom">
 </mat-fab-menu>
+
+<!-- or if you prefer the mini version -->
+
+<mat-mini-fab-menu color="primary"
+              [fabButtons]="fabButtonsRandom">
+</mat-mini-fab-menu>
 ```
 
 ```typescript