Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramiz4
ramiz4 committed Dec 19, 2019
1 parent b83a230 commit bf486bb
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 49 deletions.
107 changes: 60 additions & 47 deletions libs/ngx-multi-level-push-menu/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,24 @@ Multi-level push menu is cross-browser compatible angular 6+ component allowing

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


## Installation

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):

```bash
$ npm i @ramiz4/ngx-multi-level-push-menu --save
npm i @ramiz4/ngx-multi-level-push-menu --save
```

## Install dependencies

```bash
$ npm i jquery font-awesome --save
npm i jquery font-awesome --save
```

## Usage

#### 1. Update your `angular.json`:
### 1. Update your `angular.json`

```json
"styles": [
"node_modules/font-awesome/css/font-awesome.min.css",
Expand All @@ -38,7 +41,8 @@ $ npm i jquery font-awesome --save
],
```

#### 2. Import the `NgxMultiLevelPushMenuModule` to `app.module.ts`:
### 2. Import the `NgxMultiLevelPushMenuModule` to `app.module.ts`

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.

```ts
Expand Down Expand Up @@ -69,9 +73,12 @@ export class AppModule { }
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:

```bash
$ ng g component home && ng g component about-us && ng g component collections && ng g component credits && ng g component page-not-found
ng g component home && ng g component about-us && ng g component collections && ng g component credits && ng g component page-not-found
```

**NOTE**
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!

Edit the generated app-routing.module.ts to this:

```ts
Expand Down Expand Up @@ -107,7 +114,8 @@ const routes: Routes = [
export class AppRoutingModule { }
```

#### 3. Add menu options and items to `app.component.ts`:
### 3. Add menu options and items to `app.component.ts`

```ts
import { Component, OnInit } from '@angular/core';
import { MultiLevelPushMenuService, MultiLevelPushMenuOptions } from '@ramiz4/ngx-multi-level-push-menu';
Expand Down Expand Up @@ -393,9 +401,11 @@ export class AppComponent implements OnInit {
}
}
```

Full list of options is provided below.

#### 4. Replace content in `app.component.html`:
### 4. Replace content in `app.component.html`

```html
<ramiz4-multi-level-push-menu [options]="options">
<button (click)="collapseMenu()">collapse menu</button>
Expand All @@ -404,55 +414,58 @@ Full list of options is provided below.
</ramiz4-multi-level-push-menu>
```

#### 5. Add to `styles.css` (optional):
### 5. Add to `styles.css` (optional)

```css
html, body {
margin: 0;
}
```

#### 6. Run your app from your project directory:
### 6. Run your app from your project directory

```bash
$ npm start
npm start
```

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

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

## Features
- Multi-level menu support
- Endless nesting of navigation elements
- Expand/Collapse navigation with a left/right swipe gesture
- Push/Slide DOM elements of choice
- Left-to-right and Right-to-left sliding directions
- Flexible, simple markup
- JS Array input, as HTML markup replacement
- A number of exposed Options (1 NEW! added), Methods (3 NEW! added) and Events
- Cross-browser compatibility
- Chrome
- Midori
- Firefox
- Safari
- IE8+
- Opera 12.16
- Android Browser 4.1.2
- iOS Safari 7.0.1
- AoT Compilation Support

* Multi-level menu support
* Endless nesting of navigation elements
* Expand/Collapse navigation with a left/right swipe gesture
* Push/Slide DOM elements of choice
* Left-to-right and Right-to-left sliding directions
* Flexible, simple markup
* JS Array input, as HTML markup replacement
* A number of exposed Options (1 NEW! added), Methods (3 NEW! added) and Events
* Cross-browser compatibility
* Chrome
* Midori
* Firefox
* Safari
* IE8+
* Opera 12.16
* Android Browser 4.1.2
* iOS Safari 7.0.1
* AoT Compilation Support
2 changes: 1 addition & 1 deletion libs/ngx-multi-level-push-menu/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ramiz4/ngx-multi-level-push-menu",
"version": "2.0.4",
"version": "2.0.5",
"description": "a package manager for JavaScript",
"homepage": "https://github.com/ramiz4/ngx-multi-level-push-menu#readme",
"author": "Ramiz Loki <me@ramizloki.com> (https://ramizloki.com)",
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ramiz4",
"version": "2.0.4",
"version": "2.0.5",
"license": "MIT",
"repository": {
"type": "git",
Expand Down

0 comments on commit bf486bb

Please sign in to comment.