Skip to content

Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanations purposes)

License

Notifications You must be signed in to change notification settings

angular-material-extensions/pages

Repository files navigation

ngx-material-pages - Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanation purposes)

npm version, npm CircleCI branch Coverage Status dependency Status devDependency Status Greenkeeper Badge license

ngx-material-pages

Do you need an illustration for your explanations and tutorials ? Are you using angular to build wonderful pwa ? You favorite front-end framework is angular material ?

ngx-material-pages is the right UI component for you! You build wonderful and comprehensive tutorials pages by providing an outlook and content for each step of your explanation.

Try it out!

ngx-material-pages

Demo

View all the directives in action at https://anthonynahas.github.io/ngx-material-pages

Dependencies

  • Angular (requires Angular 2 or higher)

Peer Dependencies Requirements:

Requirements:

Install Peer Dependencies - help

npm i -s @angular/animations @angular/material @angular/cdk

Installation

Install above dependencies via npm.

Now install ngx-material-pages via:

npm install --save ngx-material-pages

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle. In your systemjs config file, map needs to tell the System loader where to look for ngx-material-pages:

map: {
  'ngx-material-pages': 'node_modules/ngx-material-pages/bundles/ngx-material-pages.umd.js',
}

Once installed you need to import the main module:

import { NgxMaterialPagesModule } from 'ngx-material-pages';

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgxMaterialPagesModule .forRoot()):

NB: please do not forget to import the angular animations module in your root component too! (usally app.component.ts)

import { NgxMaterialPagesModule } from 'ngx-material-pages';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxMaterialPagesModule.forRoot(),
  BrowserAnimationsModule,
   ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgxMaterialPagesModule:

import { NgxMaterialPagesModule } from 'ngx-material-pages';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgxMaterialPagesModule, ...], 
})
export class OtherModule {
}

Add a material theme - help

The easiest way is to add

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

to you styles.css files

learn more

Add a material icons - help

The easiest way is to add

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

to you index.html files

learn more

Usage - Library's components

This library consists of 4 essential components.

  1. ngx-material-pages the main container that hold the pages incl. the outlook view and the content

  2. ngx-material-page-loader the container of each page. This component should have two nested elements which are the outlook and the content components (see below)

  3. ngx-material-page-outlook the outlook view of a page. This can contain a custom component, custom layout or just a title.

  4. ngx-material-page-content this is the content view of the page. This can be anything!!

  5. Example:

<ngx-material-pages>
    <ngx-material-page-loader>
      <ngx-material-page-outlook>
        <!-- put your own outlook view for the first page -->
      </ngx-material-page-outlook>
      <ngx-material-page-content>
        <!-- put your own content view for the first page -->
      </ngx-material-page-content>
    </ngx-material-page-loader>
    <ngx-material-page-loader>
      <ngx-material-page-outlook>
        <!-- put your own outlook view for the second page -->
      </ngx-material-page-outlook>
      <ngx-material-page-content>
        <!-- put your own content view for the second page -->
      </ngx-material-page-content>
    </ngx-material-page-loader>
  </ngx-material-pages>

Support

Drop an email to: Anthony Nahas and I will help you!

License

Copyright (c) 2018 Anthony Nahas. Licensed under the MIT License (MIT)

About

Open source library for angular apps to illustrate custom material pages content with steps (ideal for tutorials and explanations purposes)

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published

Contributors 2