@beyond-vision/angular-mgl-timeline v0.3.4
angular-mgl-timeline
This project was forked from angualr-mgl-timeline to support angular 10. This is a animated vertical timeline component for Angular 2+. Angular Material is supported but not mandatory.
Online Demo
An Online Demo with live editing is available on stackblitz.
Getting started
1) run npm install --save @beyond-skyline/angular-mgl-timeline
2) in your app module:
...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MglTimelineModule } from 'angular-mgl-timeline';
@NgModule({
...
imports: [
...
BrowserAnimationsModule,
MglTimelineModule
]
})
export class AppModule { }Usage
Minimal Setup
<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>Include a dot
<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>Include side data
<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>Angular Material
The package includes a theme for angular material. In your own angular material theme:
@import '~@angular/material/theming';
@import '~angular-mgl-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.
Components
MglTimeline
Content
| tag | number |
|---|---|
<mgl-timeline-entry> | n |
Inputs
| 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 | |
| side | string | 'left' | Changes side ('left' | 'right') the entries are shown on. No effect if alternate is true |
| mobileWidthThreshold | number | 640 | Decides when the mobile layout is used |
MglTimelineEntry
The expanded class will be added to the timeline-entry compnent when the entry is expanded.
Content
| tag | number |
|---|---|
<mgl-timeline-entry-header> | 1 |
<mgl-timeline-entry-content> | 1 |
<mgl-timeline-entry-dot> | 0...1 |
<mgl-timeline-entry-side> | 0...1 |
Outputs
| event | type | description |
|---|---|---|
| expand | boolean | fired when an entry is expanded / collapsed. Value is true for expanded and false for collapsed |
MglTimelineEntryHeader
MglTimelineEntryContent
Inputs
| property | type | default | impact |
|---|---|---|---|
| expandAnimationTiming | string | '200ms ease' | Controls the animation speed of the content of an entry. Set to 0ms to disable the animation |
| collapseAnimationTiming | string | '100ms ease' | Controls the animation speed of the content of an entry. Set to 0ms to disable the animation |
MglTimelineEntryDot
Inputs
| property | type | default | impact |
|---|---|---|---|
| size | number | 45 | Size of the dot px |
| class | string | primary | Will be set as class name of the dot element. primary and accent can be used when using the angular material theme |
| expandAnimationTiming | string | '200ms ease' | Controls the animation speed of the dot of an entry. Set to 0ms to disable the animation |
| collapseAnimationTiming | string | '100ms ease' | Controls the animation speed of the dot of an entry. Set to 0ms to disable the animation |
Polyfills
Smoothscroll
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
ClassList
ClassList.toggle was used at some points, including the second parameter. If you need to support browsers which do not support this, be sure to use a polyfill, e.g. this one.
Web Animations API
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
About
This project was generated with Angular CLI version 1.6.5. The NPM Version was packend with ng-packagr.
License
MIT License (c) Markus Glutting