https://github.com/kevlatus/ngx-drawer-layout
Angular library for implementing a Material drawer layout.
https://github.com/kevlatus/ngx-drawer-layout
angular angular-material drawer drawer-layout layout material-design
Last synced: about 1 year ago
JSON representation
Angular library for implementing a Material drawer layout.
- Host: GitHub
- URL: https://github.com/kevlatus/ngx-drawer-layout
- Owner: kevlatus
- License: mit
- Created: 2019-02-13T21:40:28.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2023-01-07T11:05:18.000Z (over 3 years ago)
- Last Synced: 2025-03-27T02:12:35.011Z (over 1 year ago)
- Topics: angular, angular-material, drawer, drawer-layout, layout, material-design
- Language: TypeScript
- Homepage: https://kevlatus.github.io/ngx-drawer-layout
- Size: 6.04 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/kevlatus/ngx-drawer-layout/actions)
[](https://coveralls.io/github/kevlatus/ngx-drawer-layout?branch=main)
# Angular Drawer Layout
This library provides [Angular](https://angular.io/) components for implementing a
[Material Design Drawer](https://material.io/design/components/navigation-drawer.html).
It relies on the [Angular Material Library](https://material.angular.io/).
Check out [this demo](https://kevlatus.github.io/ngx-drawer-layout/) to see it in action.
## Installing
Before installing, make sure to add Angular Material to your project. When using Angular CLI, you can run:
```
ng add @angular/material
```
For alternative installation refer to the [quick start guide](https://material.angular.io/guide/getting-started).
Using npm, you can install the library with:
```
npm install --save ngx-drawer-layout
```
### Enabling Material theming
If you want to benefit from Material theming, you need to use Angular Material
with [a custom theme](https://material.angular.io/guide/theming#defining-a-custom-theme).
Then, you can add theming to the drawer layout like this:
```scss
@import '~@angular/material/theming';
@import '~ngx-drawer-layout/theming'; // <-- include SASS lib file
@include mat-core();
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include ngx-drawer-layout-theme($theme); // <-- include the drawer layout theme
```
## Usage
**1. Import the DrawerLayoutModule**
```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DrawerLayoutModule } from 'ngx-drawer-layout';
@NgModule({
imports: [
BrowserModule,
DrawerLayoutModule, // <-- import module
],
bootstrap: [AppComponent],
})
export class AppModule {}
```
**2. Use the DrawerLayoutComponent**
```html
Toggle
NGX Drawer Layout Demo
Drawer Content
App Content
```