Package Name: angular-material-rail-drawer
- Legacy Support Only: This package is designed to work only with Material Legacy (pre-version 17).
- No Support for Angular V17: There are little to no plans to support Angular V17. The new syntax of Angular V17 is not favored, and it's believed that the changes are detrimental to the framework.
I personally dislike the new syntax introduced in Angular V17. I believe the direction Angular is taking with this version is not in the best interest of the framework. As a result, I have decided not to continue supporting or maintaining this package.
- If you are using an older version of Angular (pre-version 17), you may continue using this package. However, be aware that no further updates or support will be provided.
- For projects using Angular V17 and above, it's recommended to look for alternative packages or solutions.
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.
NPM:
npm i angular-material-rail-drawer
Yarn:
yarn add angular-material-rail-drawer
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.
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 animation time is set to 100ms
Notes: Angular material open state
Close === mini & Opened === expanded
Angular material mini variant github issue: angular/components#1728