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 20 hours 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 (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T11:05:18.000Z (almost 2 years ago)
• Last Synced: 2024-12-21T01:15:57.925Z (1 day 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://img.shields.io/npm/v/ngx-drawer-layout.svg)

[![Build Status](https://github.com/kevlatus/ngx-drawer-layout/workflows/Test/badge.svg)](https://github.com/kevlatus/ngx-drawer-layout/actions)

[![Coverage Status](https://coveralls.io/repos/github/kevlatus/ngx-drawer-layout/badge.svg?branch=main)](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

  


```