0.0.7 • Published 6 years ago

@yomyer/mat-drawer-pan v0.0.7

Weekly downloads
-
License
MIT
Repository
github
Last release
6 years ago

@yomyer/mat-drawer-pan

Add to the Mat Drawer Container the possibility of showing the Drawers using the horizontal pan gesture. Compatible with Angular Material 6

Installation

Install the library

$ npm install --save @yomyer/mat-drawer-pan

Usage

Import it in your Angular project as a module

1) Declare it in your module

```bash
import {MadDrawerModule} from '@yomyer/mat-drawer-pan';

@NgModule({
  imports: [
    MadDrawerModule,
    ...
  ]
})

```

2) Add hammerjs in your angular proyect

```bash
"projects": {
  "architect": {
    "build": {
      "options": { 
        "scripts": [
          ...
          "node_modules/hammerjs/hammer.js" 
          ... 
        ]

```

3) Use it in a component

**Add mat-drawer-pan in mat-drawer-container!**
```bash

import {Component} from '@angular/core';

@Component({
  selector: 'drawer',
  template: `
      <mat-drawer-container class="example-container" mat-drawer-pan>
        <mat-drawer #start class="example-sidenav" mode="push">
           <p>Auto-resizing sidenavd start</p>
        </mat-drawer>
        <mat-drawer #end class="example-sidenav" mode="push" position="end">
          <p>Auto-resizing sidenavd end</p>
        </mat-drawer>
        <div class="example-sidenav-content">
          <button type="button" mat-button (click)="start.toggle()">
            Toggle sidenav start
          </button>
          <button type="button" mat-button (click)="end.toggle()">
            Toggle sidenav end
          </button>
        </div>
      </mat-drawer-container>
    `
})

export class AppComponent {}
```

Parameters:

ParameterDescriptionValues
mat-drawer-pan (required)Selector for the directive.boolean (defaults to true)

Development

Want to contribute? Great! Simply, clone the repository!

License

ISC

- Yomyer

0.0.7

6 years ago

0.0.6

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago