@next-level-integration/nli-timeline-lib

The general structure of component: ```html <nli-timeline [showDatePicker]="" [visibleSteps]="" (onSelect)=""> <nli-timelineitem [model]=""></nli-timelineitem> <nli-timelineitem [model]=""></nli-timelineitem> ... </nli-timeline> ```

Stats

StarsIssuesVersionUpdatedCreatedSize
@next-level-integration/nli-timeline-lib
1.2.02 years ago4 years agoMinified + gzip package size for @next-level-integration/nli-timeline-lib in KB

Readme

NliTimelineLib

The general structure of component:

    <nli-timeline [showDatePicker]="" [visibleSteps]="" (onSelect)="">
        <nli-timelineitem [model]=""></nli-timelineitem>
        <nli-timelineitem [model]=""></nli-timelineitem>
        ...
    </nli-timeline>

Setup Steps:

1-at packege.json insert this line for dependency:Notice that this version number is not fixed and will be changed after every mudule bulding.

"dependencies": {
    "nli-timeline-lib": "1.2.0",
},

2-for importing material icons and fonts add this line to your main html file for example:index.html :

    <head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?                        family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic"
          type="text/css" rel="stylesheet">
  </head>  

3-to import TimeLine component to your project insert this lines to app.module.ts:

import { LibModule as TimelineModule} from 'nli-timeline-lib';
@NgModule({
  declarations: [
        ...
  ],
  imports: [
    ...
    TimelineModule,
    ...
   ],
  providers: [
    ...    
             ],
  bootstrap: [AppComponent]
});

4- Apply material theme. create app-theme.scss file and apply material theme. You should also add style dependency in .angular-cli.json file:

"styles": [
...
"app-theme.scss"
],

Do not forget to include timeline theme. The sample app-theme.scss exists at the end of this file.

5-Execute npm install to install nli-time-line module;

Usage example:

in .ts file you can write this code for creating timeline model:

import { TimeLineStepModel } from 'nli-timeline-lib/lib/timeline/timelineitem/timelineitem-model';
import { TimeLineModel } from 'nli-timeline-lib/lib/timeline/timeline-model';

timelineModel: TimeLineModel = new TimeLineModel(5, [
                                                           new TimeLineStepModel('17','Zählerwechsel17', new Date('2014-04-03')),
                                                           new TimeLineStepModel('18','Zählerwechsel18', new Date('2015-04-03')),
                                                           new TimeLineStepModel('1','Zählerwechsel1', new Date('2016-04-03')),
                                                           new TimeLineStepModel('2','Zählerwechsel2', new Date('2017-04-03')),
                                                           new TimeLineStepModel('3','Zählerwechsel3', new Date('2018-04-03')),
                                                           new TimeLineStepModel('4','Zählerwechsel4', new Date('2019-04-03')),
                                                           new TimeLineStepModel('5','Zählerwechsel5', new Date('2020-04-03')),
                                                           new TimeLineStepModel('6','Zählerwechsel6', new Date('2013-04-03')),
                                                           new TimeLineStepModel('7','Zählerwechsel7', new Date('2012-04-03')),
                                                           new TimeLineStepModel('8','Zählerwechsel8', new Date('2011-04-03')),
                                                           new TimeLineStepModel('9','Zählerwechsel9', new Date('2010-04-03')),
                                                           new TimeLineStepModel('10','Zählerwechsel10', new Date('2009-04-03')),
                                                           new TimeLineStepModel('11','Zählerwechsel11', new Date('2008-04-03')),
                                                           new TimeLineStepModel('12','Zählerwechsel12', new Date('2007-04-03')),
                                                           new TimeLineStepModel('13','Zählerwechsel13', new Date('2006-04-03')),
                                                           new TimeLineStepModel('14','Zählerwechsel14', new Date('2003-04-03')),
                                                           new TimeLineStepModel('15','Zählerwechsel15', new Date('2002-04-03')),
                                                           new TimeLineStepModel('16','Zählerwechsel16', new Date('2000-11-11'))
                                                         ]);

in .html file:

    <div style="width:100%;">
        <nli-timeline [showDatePicker]="true" [visibleSteps]="14" > <nli-timelineitem
            *ngFor="let timeLineStepModel of timelineModel.steps let i=index "
            [model]="timeLineStepModel">
         </nli-timelineitem> </nli-timeline>
    </div>

Appendix:

  1. Sample app-theme.scss

    @import '~@angular/material/theming';
    // Plus imports for other components in your app.

    // Include the base styles for Angular Material core. We include this here so that you only
    // have to load a single css file for Angular Material in your app.
    @include mat-core();

    // Define the palettes for your theme using the Material Design palettes available in palette.scss
    // (imported above). For each palette, you can optionally specify a default, lighter, and darker
    // hue.
    $app-primary: mat-palette($mat-blue);
    $app-secondary: mat-palette($mat-blue);
    $app-accent:  mat-palette($mat-orange, A200, A100, A400);

    // The warn palette is optional (defaults to red).
    $app-warn:    mat-palette($mat-red);

    // Create the theme object (a Sass map containing all of the palettes).
    $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

    // Include theme styles for core and each component used in your app.
    // Alternatively, you can import and @include the theme mixins for each component
    // that you are using.
    @include angular-material-theme($app-theme);

    @import '~nli-timeline-lib/lib/timeline/timeline.component.scss';
    @include nli-material-theme($app-theme);

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.