ngx-mzd-timeline v1.0.3
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-cardcan 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-timelineor else it will be added to the default project in yourangular.jsonfile.
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.