ngx-material-timeline
v1.1.1
Published
Angular library for timeline feature. This library includes various customisations for timeline feature in angular.
Downloads
41
Maintainers
rawl05Readme
About
Angular library for timeline feature. This library includes various customisations for timeline feature in angular.
Timeline consist of timecards and each timecard can be customized.
This library works only with Angular Material.
Demo
Installation
npm install ngx-material-timelineUsage
Import the NgxMaterialTimelineModule in your app.module.ts file of your angular application.
import { NgxMaterialTimelineModule } from 'ngx-material-timeline';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
NgxMaterialTimelineModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Now you can use the selector in html file as required.
<!DOCTYPE html>
<html>
<head>
<mate charest="utf-8" />
<title>Hello world!</title>
</head>
<body>
<ngx-material-timeline
[timeline]='timelineArray'
[addTimecard]='true'
[addTimecardPosition]='"bottom"'
[enableFilter]='true'
(actionEvent)='captureEvent($event)'
[cardTitleFontSize]='"16px"'
[cardTimestampFontSize]='"14px"'
[cardDescriptionFontSize]='"14px"'>
</ngx-material-timeline>
</body>
</html>In style.scss import the material theme.
@import "~@angular/material/prebuilt-themes/indigo-pink.css";Setting up Global options for ngx-material-timeline selector.
Inputs[]
Option | Type | Default | Description ---------- | --------- | --------- | ------------------- timeline | array | [] | Array of timecards to be displayed in timeline. addTimecard | boolean | false | Display the add timeline button at the bottom of the timeline. addTimecardPosition | string | bottom | Display the add timeline button at the bottom of the timeline. expandAll | boolean | false | Expand descriptions of all the timecards. enableFilter | boolean | true | Enable the filter option to filter timecards in timeline. defaultTheme | string | #004c88 | Default theme color for timeline. Accepts hex value or any color format. cardTitleFontSize | string | 14px | Change the font-size of card title. cardTimestampFontSize | string | 14px | Change the font-size of card timestamp. cardDescriptionFontSize | string | 14px | Change the font-size of card description.
Output()
Option | Description ---------- | ------------------- actionEvent | Event Emmiter for various event from timecards and timeline.
Following will help you understand the event types.
Event | EventType | Description ---------- | --------- | ------------------- actionEvent | floatingIconClick | Event emmiter for click on floating icon in timecard. actionEvent | timecardIconClick | Event emmiter for click on timecard icon in timeline. actionEvent | timecardClosed | Event emmiter for close of particular timecard descripion. actionEvent | timecardOpened | Event emmiter for open of particular timecard descripion. actionEvent | addtimecardClick | Event emmiter for add timecard button.
Timecard Model
{
index = 0, // timecard index
title = '', // timecard title
description = '', // timecard description
timestamp = '', // timecard timestamp
align = '', // time alignment
timecardIcon = '', // timecard icon
timecardIconColor = '', // timecard icon color
timecardFloatingIcon = '', // timecard floating icon
timecardFloatingIconColor = '', // timecard floating icon color
timecardColor = '', // timecard color
timecardTitleColor = '', // timecard title color
timecardTextColor = '', // timecard description and timestamp color
}Option | Type | Default | Description ---------- | --------- | --------- | ------------------- index | number | auto-increment | Timecard index (Auto-increment if not provided.) title | string | '' | Timecard title. description | string | '' | Timecard description. timestamp | string | '' | Timecard timestamp. align | string | '' | Align timecards. Accepts: left, right timecardIcon | string | '' | Icon for timecard. Accepts Google Mat Icons. timecardIconColor | string | defaultThemeColor | Color for timecard icon. Accepts hex value or any color format. timecardFloatingIcon | string | '' | Floating icon for timecard. Accepts Google Mat Icons. timecardFloatingIconColor | string | defaultThemeColor | Color for floating icon. Accepts hex value or any color format. timecardColor | string | defaultThemeColor | Color for timecard. Accepts hex value or any color format. timecardTitleColor | string | white | Color for timecard title. Accepts hex value or any color format. timecardTextColor | string | black | Color for timecard description and timestamp. Accepts hex value or any color format.
License
MIT