This is a animated vertical timeline component for Angular 2+. Angular Material is supported but not mandatory.
An Online Demo with live editing is available on stackblitz.
- run
npm install --save angular-mgl-timeline
- in your app module:
...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MglTimelineModule } from 'angular-mgl-timeline';
@NgModule({
...
imports: [
...
BrowserAnimationsModule,
MglTimelineModule
]
})
export class AppModule { }
<mgl-timeline>
<mgl-timeline-entry>
<mgl-timeline-entry-header>Header</mgl-timeline-entry-header>
<mgl-timeline-entry-content>Content</mgl-timeline-entry-content>
</mgl-timeline-entry>
</mgl-timeline>
<mgl-timeline>
<mgl-timeline-entry>
<mgl-timeline-entry-header>Header</mgl-timeline-entry-header>
<mgl-timeline-entry-content>Content</mgl-timeline-entry-content>
<mgl-timeline-entry-dot></mgl-timeline-entry-dot>
</mgl-timeline-entry>
</mgl-timeline>
<mgl-timeline>
<mgl-timeline-entry>
<mgl-timeline-entry-header>Header</mgl-timeline-entry-header>
<mgl-timeline-entry-content>Content</mgl-timeline-entry-content>
<mgl-timeline-entry-side>2018</mgl-timeline-entry-side>
</mgl-timeline-entry>
</mgl-timeline>
The package includes a theme for angular material. In your own angular material theme:
@import '~@angular/material/theming';
@import '~mgl-angular-timeline/theme';
...
@include angular-material-theme($your-theme);
@include mgl-timeline-theme($your-theme);
If the theme is included, the components will be styled according to $your-theme
including support for primary and accent colors for the dot.
tag | number |
---|---|
<mgl-timeline-entry> |
n |
property | type | default | impact |
---|---|---|---|
toggle | boolean | true | If set to true, expanding one entry will collapse all other entries and vice versa |
alternate | boolean | true | If set to true, entries will be displayed alternately (left / right). No effect in mobile mode |
focusOnOpen | boolean | false | If set to true, expanding an entry will scroll it into view |
tag | number |
---|---|
<mgl-timeline-entry-header> |
1 |
<mgl-timeline-entry-content> |
1 |
<mgl-timeline-entry-dot> |
0...1 |
<mgl-timeline-entry-side> |
0...1 |
property | type | default | impact |
---|---|---|---|
size | number | 45 | Size of the dot [px] |
color | string | primary | Will be set as class name of the dot element. primary and accent can be used when using the angular material theme |
When an entry is toggled, it will scroll into view. Smooth behavior is currently not supported in Chrome. A polyfill is available in iamdustan's smoothscroll
Animations are implemented with Angular animations which are based on the web animations API which has not landed in Safari and Edge yet. A polyfill is available in Web Animations JS
This project was generated with Angular CLI version 1.6.5. The NPM Version was packend with ng-packagr.
MIT License (c) Markus Glutting