Angular Material Rail Drawer Plugin
Angular Material Navigation drawer — Adding support mode = “Rail” (mini variant behaviour)
Since 2016, the Angular community has been shouting out of a mini variant for material design.
How to install
NPM:
npm i angular-material-rail-drawer
Yarn:
yarn add angular-material-rail-drawer
How to use
Read example for more information
module.ts
import { DrawerRailModule } from 'angular-material-rail-drawer';
component.html
<mat-sidenav mode="rail" opened="true">
If "strictTemplates": true is activated in tsconfig.json, overwriting mode is not possible. In this case you can use the following selector:
component.html
<mat-sidenav rail-mode opened="true">
This extension adds on an existing mode the Material documentation remains the same.
Extra API for rail variant
On top of all the standard Drawer API from google https://material.angular.io/components/sidenav/api. I've added 4 extra API so you have more control over the animation and size.
| Input | description | default |
|---|---|---|
| openAnimation | Angular Animation settings for opening | sidebarOpen(maxWidth) |
| closeAnimation | Angular Animation settings for closing | sidebarClose(minWidth) |
| closeWidth | min width (small view) | "60px" |
| expandedWidth | max width for the expanded view | "200px" |
extra note the default anmination time is set to 100ms
Notes: Angular material open state
Close === mini & Opened === expanded
Useful links
Angular material mini variant github issue: angular/components#1728