ngx-mzd-timeline

Angular material theme supported minimalist's vertical timeline library for Angular applications.

Live Demo

Live demo is available at github pages.

Getting Started

1. run npm install --save ngx-mzd-timeline
2. import MzdTimelineModule in your app module

...
import { MzdTimelineModule } from 'ngx-mzd-timeline';

@NgModule({
  ...
  imports: [
    ...
    MzdTimelineModule
  ]
})
export class AppModule { }

Usage

Minimal Setup

<mzd-timeline>
  <mzd-timeline-content>
      Your HTML code or any angular component can be placed here.
      Content will be displayed in a card.
  </mzd-timeline-content>
</mzd-timeline>

Icon

mzd-icon supports fontawesome icons.

<mzd-timeline>
  <mzd-icon><fa-icon icon="briefcase"></fa-icon></mzd-icon>
  <mzd-timeline-content>
      Your HTML code or any angular component can be placed here.
      Content will be displayed in a card.
  </mzd-timeline-content>
</mzd-timeline>

Border

Border around the content

<mzd-timeline>
  <mzd-icon><fa-icon icon="briefcase"></fa-icon></mzd-icon>
  <mzd-timeline-content [border]="true">
      Your HTML code or any angular component can be placed here.
      Content will be displayed in a card.
  </mzd-timeline-content>
</mzd-timeline>

Other Examples

Other examples can be found in the app.component.html file.

Angular Material Theme

The package supports angular material theme. In your own angular material theme:

@import '~@angular/material/theming';
@import "~ngx-mzd-timeline/src/mzd-timeline.theme.scss";

...

@include angular-material-theme($your-theme);
@include mzd-timeline-theme($your-theme);

Components

MzdTimeline

Content

| tag | number | | ------------------------ | ------ | | <mzd-timeline-content> | n |

Inputs

| property | type | default | impact | | ------------------ | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | alternateSide | boolean | true | If set to true, entries will be displayed alternately ('left' / 'right'). In XS devices, if set ture, contents will be placed at 'right' side of the vertical line; if set false, content will be placed at 'left'/'right' depending on the value of firstContentSide. | | firstContentSide | string | 'left' | Changes side ('left' / 'right') of the first content is shown on. If alternateSide is false, all the contents will follow the side of the first content, otherwise contents will take side alternately. No effect in XS devices if alternateSide is true. |

MzdTimelineContent

Content

| tag | number | | ---------------------------- | ------ | | <mzd-icon> | 0/1 | | any html / angular component | n |

mat-card can also be used. An example can be found in app.component.html file.

Inputs

| property | type | default | impact | | -------- | ------- | ------- | ------------------------------------------------------------- | | card | boolean | true | Creates box shadow around the content, similar to mat-card. | | border | boolean | false | Creates border around the content. |

MzdIcon

Content

Supports fontawesome icon as content. | tag | number | | ---------------------------- | ------ | | <fa-icon> | 0/1 |

Single English letter can also be used as icon. For example:

<mzd-icon><strong>X<strong></mzd-icon>

Inputs

No input for this component.

About

This library was generated with Angular CLI version 9.0.7.

For Devlopers Who Want To Contribute

Code scaffolding

Run ng generate component component-name --project ngx-mzd-timeline to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-mzd-timeline.

Note: Don't forget to add --project ngx-mzd-timeline or else it will be added to the default project in your angular.json file.

Build

Run ng build ngx-mzd-timeline --prod to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test ngx-mzd-timeline to execute the unit tests via Karma.