Skip to content

Commit 9b94391

Browse files
kevlatuskevlatus
committed
add README and LICENSE
1 parent 04df961 commit 9b94391

File tree

2 files changed

+88
-14
lines changed

2 files changed

+88
-14
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 Kevin Latusinski
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+67-14
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,80 @@
1-
# NgxDrawerLayout
1+
<a target="_blank" href="https://www.npmjs.com/package/ngx-drawer-layout">![](https://img.shields.io/npm/v/ngx-drawer-layout.svg)</a>
2+
![](https://img.shields.io/circleci/project/github/kevlatus/ngx-drawer-layout/master.svg)
23

3-
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.14.
4+
# Angular Drawer Layout
45

5-
## Development server
6+
This library provides [Angular](https://angular.io/) components for implementing a
7+
[Material Design Drawer](https://material.io/design/components/navigation-drawer.html).
8+
It relies on the [Angular Material Library](https://material.angular.io/).
69

7-
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
10+
## Installing
811

9-
## Code scaffolding
12+
Before installing, make sure to add Angular Material to your project. When using Angular CLI, you can run:
13+
```
14+
ng add @angular/material
15+
```
16+
For alternative installation refer to the [quick start guide](https://material.angular.io/guide/getting-started).
1017

11-
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
18+
Using npm, you can install the library with:
19+
```
20+
npm install --save ngx-drawer-layout
21+
```
1222

13-
## Build
23+
### Enabling Material theming
1424

15-
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
25+
If you want to benefit from Material theming, you need to use Angular Material
26+
with [a custom theme](https://material.angular.io/guide/theming#defining-a-custom-theme).
27+
Then, you can add theming to the drawer layout like this:
28+
29+
```scss
30+
@import '~@angular/material/theming';
31+
@import '~ngx-drawer-layout/theming'; // <-- include SASS lib file
1632

17-
## Running unit tests
33+
@include mat-core();
1834

19-
Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
35+
$primary: mat-palette($mat-indigo);
36+
$accent: mat-palette($mat-pink, A200, A100, A400);
37+
$warn: mat-palette($mat-red);
38+
$theme: mat-light-theme($primary, $accent, $warn);
2039

21-
## Running end-to-end tests
40+
@include angular-material-theme($theme);
41+
@include ngx-drawer-layout-theme($theme); // <-- include the drawer layout theme
42+
```
2243

23-
Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
44+
## Usage
2445

25-
## Further help
46+
**1. Import the DrawerLayoutModule**
2647

27-
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
48+
```javascript
49+
import {BrowserModule} from '@angular/platform-browser';
50+
import {NgModule} from '@angular/core';
51+
import {DrawerLayoutModule} from 'ngx-drawer-layout';
52+
53+
@NgModule({
54+
imports: [
55+
BrowserModule,
56+
DrawerLayoutModule.forRoot() // <-- import module
57+
],
58+
bootstrap: [AppComponent]
59+
})
60+
export class AppModule { }
61+
```
62+
63+
**2. Use the DrawerLayoutComponent**
64+
65+
```html
66+
<ngx-drawer-layout>
67+
<mat-toolbar ngxDrawerAppHeader>
68+
<ngx-drawer-toggle-button></ngx-drawer-toggle-button>
69+
<div>NGX Drawer Layout Demo</div>
70+
</mat-toolbar>
71+
72+
<div ngxDrawerContent>
73+
<div>Drawer Content</div>
74+
</div>
75+
76+
<div ngxDrawerAppContent>
77+
<div>App Content</div>
78+
</div>
79+
</ngx-drawer-layout>
80+
```

0 commit comments

Comments
 (0)