Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including angular-mgl-timeline with all npm packages installed. Try it out:

require("zone.js/package.json"); // zone.js is a peer dependency. require("@angular/compiler/package.json"); // @angular/compiler is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. require("@angular/platform-browser-dynamic/package.json"); // @angular/platform-browser-dynamic is a peer dependency. require("rxjs/package.json"); // rxjs is a peer dependency. require("core-js/package.json"); // core-js is a peer dependency. require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/platform-browser/package.json"); // @angular/platform-browser is a peer dependency. require("@angular/animations/package.json"); // @angular/animations is a peer dependency. var angularMglTimeline = require("angular-mgl-timeline")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

angular-mgl-timeline v0.3.3

angular-mgl-timeline

npm version

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 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

tagnumber
<mgl-timeline-entry>n

Inputs

propertytypedefaultimpact
togglebooleantrueIf set to true, expanding one entry will collapse all other entries and vice versa
alternatebooleantrueIf set to true, entries will be displayed alternately (left / right). No effect in mobile mode
focusOnOpenbooleanfalseIf set to true, expanding an entry will scroll it into view
sidestring'left'Changes side ('left'
mobileWidthThresholdnumber640Decides when the mobile layout is used

MglTimelineEntry

The expanded class will be added to the timeline-entry compnent when the entry is expanded.

Content

tagnumber
<mgl-timeline-entry-header>1
<mgl-timeline-entry-content>1
<mgl-timeline-entry-dot>0...1
<mgl-timeline-entry-side>0...1

Outputs

eventtypedescription
expandbooleanfired when an entry is expanded / collapsed. Value is true for expanded and false for collapsed

MglTimelineEntryHeader

MglTimelineEntryContent

Inputs

propertytypedefaultimpact
expandAnimationTimingstring'200ms ease'Controls the animation speed of the content of an entry. Set to 0ms to disable the animation
collapseAnimationTimingstring'100ms ease'Controls the animation speed of the content of an entry. Set to 0ms to disable the animation

MglTimelineEntryDot

Inputs

propertytypedefaultimpact
sizenumber45Size of the dot [px]
classstringprimaryWill be set as class name of the dot element. primary and accent can be used when using the angular material theme
expandAnimationTimingstring'200ms ease'Controls the animation speed of the dot of an entry. Set to 0ms to disable the animation
collapseAnimationTimingstring'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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free