Skip to content

Commit bf486bb

Browse files
ramiz4ramiz4
committed
update readme
1 parent b83a230 commit bf486bb

File tree

3 files changed

+62
-49
lines changed

3 files changed

+62
-49
lines changed

‎libs/ngx-multi-level-push-menu/README.md

Lines changed: 60 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,24 @@ Multi-level push menu is cross-browser compatible angular 6+ component allowing
1111

1212
See the [changelog](https://github.com/ramiz4/ngx-multi-level-push-menu/releases) for recent changes.
1313

14-
1514
## Installation
15+
1616
To use @ramiz4/ngx-multi-level-push-menu in your project install it via [npm](https://www.npmjs.com/package/@ramiz4/ngx-multi-level-push-menu):
17+
1718
```bash
18-
$ npm i @ramiz4/ngx-multi-level-push-menu --save
19+
npm i @ramiz4/ngx-multi-level-push-menu --save
1920
```
2021

2122
## Install dependencies
23+
2224
```bash
23-
$ npm i jquery font-awesome --save
25+
npm i jquery font-awesome --save
2426
```
2527

2628
## Usage
2729

28-
#### 1. Update your `angular.json`:
30+
### 1. Update your `angular.json`
31+
2932
```json
3033
"styles": [
3134
"node_modules/font-awesome/css/font-awesome.min.css",
@@ -38,7 +41,8 @@ $ npm i jquery font-awesome --save
3841
],
3942
```
4043

41-
#### 2. Import the `NgxMultiLevelPushMenuModule` to `app.module.ts`:
44+
### 2. Import the `NgxMultiLevelPushMenuModule` to `app.module.ts`
45+
4246
Finally, you can use @ramiz4/ngx-multi-level-push-menu in your Angular project. You have to import `NgxMultiLevelPushMenuModule.forRoot()` in the root NgModule `app.module.ts` of your application.
4347

4448
```ts
@@ -69,9 +73,12 @@ export class AppModule { }
6973
You need to add the RouterModule and define some routes. In this example there are defined 4 routes and therefor you need to create 4 components:
7074

7175
```bash
72-
$ ng g component home && ng g component about-us && ng g component collections && ng g component credits && ng g component page-not-found
76+
ng g component home && ng g component about-us && ng g component collections && ng g component credits && ng g component page-not-found
7377
```
7478

79+
**NOTE**
80+
Angular automatically adds the declarations to the AppModule when generating the components. You have to remove them from AppModule, if you add them to the following app-routing.module.ts!
81+
7582
Edit the generated app-routing.module.ts to this:
7683

7784
```ts
@@ -107,7 +114,8 @@ const routes: Routes = [
107114
export class AppRoutingModule { }
108115
```
109116

110-
#### 3. Add menu options and items to `app.component.ts`:
117+
### 3. Add menu options and items to `app.component.ts`
118+
111119
```ts
112120
import { Component, OnInit } from '@angular/core';
113121
import { MultiLevelPushMenuService, MultiLevelPushMenuOptions } from '@ramiz4/ngx-multi-level-push-menu';
@@ -393,9 +401,11 @@ export class AppComponent implements OnInit {
393401
}
394402
}
395403
```
404+
396405
Full list of options is provided below.
397406

398-
#### 4. Replace content in `app.component.html`:
407+
### 4. Replace content in `app.component.html`
408+
399409
```html
400410
<ramiz4-multi-level-push-menu [options]="options">
401411
<button (click)="collapseMenu()">collapse menu</button>
@@ -404,55 +414,58 @@ Full list of options is provided below.
404414
</ramiz4-multi-level-push-menu>
405415
```
406416

407-
#### 5. Add to `styles.css` (optional):
417+
### 5. Add to `styles.css` (optional)
418+
408419
```css
409420
html, body {
410421
margin: 0;
411422
}
412423
```
413424

414-
#### 6. Run your app from your project directory:
425+
### 6. Run your app from your project directory
426+
415427
```bash
416-
$ npm start
428+
npm start
417429
```
418430

419431
### Options
420-
collapsed: false, // Initialize menu in collapsed/expanded mode
421-
menuID: 'multilevelpushmenu', // ID of <nav> element.
422-
wrapperClass: 'multilevelpushmenu_wrapper', // Wrapper CSS class.
423-
menuInactiveClass: 'multilevelpushmenu_inactive', // CSS class for inactive wrappers.
424-
menu: arrMenu, // JS array of menu items (if markup not provided).
425-
menuWidth: 0, // Wrapper width (integer, '%', 'px', 'em').
426-
menuHeight: 0, // Menu height (integer, '%', 'px', 'em').
427-
backText: 'Back', // Text for 'Back' menu item.
428-
backItemClass: 'backItemClass', // CSS class for back menu item.
429-
backItemIcon: 'fa fa-angle-right', // FontAvesome icon used for back menu item.
430-
groupIcon: 'fa fa-angle-left', // FontAvesome icon used for menu items contaning sub-items.
431-
mode: 'overlap', // Menu sliding mode: overlap/cover.
432-
overlapWidth: 40, // Width in px of menu wrappers overlap
433-
preventItemClick: true, // set to false if you do not need event callback functionality per item click
434-
preventGroupItemClick: true, // set to false if you do not need event callback functionality per group item click
435-
direction: 'ltr', // set to 'rtl' for reverse sliding direction
436-
fullCollapse: false, // set to true to fully hide base level holder when collapsed
437-
swipe: 'both' // or 'touchscreen', or 'desktop', or 'none'. everything else is concidered as 'none'
438432

433+
collapsed: false, // Initialize menu in collapsed/expanded mode
434+
menuID: 'multilevelpushmenu', // ID of <nav> element.
435+
wrapperClass: 'multilevelpushmenu_wrapper', // Wrapper CSS class.
436+
menuInactiveClass: 'multilevelpushmenu_inactive', // CSS class for inactive wrappers.
437+
menu: arrMenu, // JS array of menu items (if markup not provided).
438+
menuWidth: 0, // Wrapper width (integer, '%', 'px', 'em').
439+
menuHeight: 0, // Menu height (integer, '%', 'px', 'em').
440+
backText: 'Back', // Text for 'Back' menu item.
441+
backItemClass: 'backItemClass', // CSS class for back menu item.
442+
backItemIcon: 'fa fa-angle-right', // FontAvesome icon used for back menu item.
443+
groupIcon: 'fa fa-angle-left', // FontAvesome icon used for menu items contaning sub-items.
444+
mode: 'overlap', // Menu sliding mode: overlap/cover.
445+
overlapWidth: 40, // Width in px of menu wrappers overlap
446+
preventItemClick: true, // set to false if you do not need event callback functionality per item click
447+
preventGroupItemClick: true, // set to false if you do not need event callback functionality per group item click
448+
direction: 'ltr', // set to 'rtl' for reverse sliding direction
449+
fullCollapse: false, // set to true to fully hide base level holder when collapsed
450+
swipe: 'both' // or 'touchscreen', or 'desktop', or 'none'. everything else is concidered as 'none'
439451

440452
## Features
441-
- Multi-level menu support
442-
- Endless nesting of navigation elements
443-
- Expand/Collapse navigation with a left/right swipe gesture
444-
- Push/Slide DOM elements of choice
445-
- Left-to-right and Right-to-left sliding directions
446-
- Flexible, simple markup
447-
- JS Array input, as HTML markup replacement
448-
- A number of exposed Options (1 NEW! added), Methods (3 NEW! added) and Events
449-
- Cross-browser compatibility
450-
- Chrome
451-
- Midori
452-
- Firefox
453-
- Safari
454-
- IE8+
455-
- Opera 12.16
456-
- Android Browser 4.1.2
457-
- iOS Safari 7.0.1
458-
- AoT Compilation Support
453+
454+
* Multi-level menu support
455+
* Endless nesting of navigation elements
456+
* Expand/Collapse navigation with a left/right swipe gesture
457+
* Push/Slide DOM elements of choice
458+
* Left-to-right and Right-to-left sliding directions
459+
* Flexible, simple markup
460+
* JS Array input, as HTML markup replacement
461+
* A number of exposed Options (1 NEW! added), Methods (3 NEW! added) and Events
462+
* Cross-browser compatibility
463+
* Chrome
464+
* Midori
465+
* Firefox
466+
* Safari
467+
* IE8+
468+
* Opera 12.16
469+
* Android Browser 4.1.2
470+
* iOS Safari 7.0.1
471+
* AoT Compilation Support

‎libs/ngx-multi-level-push-menu/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@ramiz4/ngx-multi-level-push-menu",
3-
"version": "2.0.4",
3+
"version": "2.0.5",
44
"description": "a package manager for JavaScript",
55
"homepage": "https://github.com/ramiz4/ngx-multi-level-push-menu#readme",
66
"author": "Ramiz Loki <[email protected]> (https://ramizloki.com)",

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ramiz4",
3-
"version": "2.0.4",
3+
"version": "2.0.5",
44
"license": "MIT",
55
"repository": {
66
"type": "git",

0 commit comments

Comments
 (0)