Albe Timeline 1.7.0

Albe Timeline is a simple yet highly customizable component that helps you render a responsive horizontal (or vertical) timeline from JSON data. The data will be automatically grouped by year and the events will be sorted by date.

- Content HTML highly manipulable. - Styles for the template are easily customizable. - Simplifies the aspects of internationalization, displaying dates and alternatives texts in a local format. Version history: | Library | Angular | | ------- | ------- | | Lastet | 18.0.1 | | 1.6.0 | 17.3.0 | | 1.5.0 | 16.0.0 | | 1.4.1 | 15.2.6 | | 1.3.0 | 14.2.0 | | 1.2.11 | 11.2.4 | | 1.2.0 | 10.1.2 | | 1.1.0 | 8.0.0 | ## Use license The component is open source and released for free commercial use at no cost. Donations are welcome. ## Installation ```html $ npm install ngx-timeline-albe ``` ## How to use ### Import the module ```typescript import { NgxTimelineAlbeModule } from 'ngx-timeline-albe'; @NgModule({ imports: [ NgxTimelineAlbeModule ], ... }) export class AppModule {} ``` ### Template ```html ``` * Instance with options: ```html ``` ### Component ```typescript import { TimelineItem } from 'ngx-timeline-albe'; ``` ```typescript //The Json object is also accepted in string format. data: Array | String; ``` ```typescript ngOnInit() { //Object type this.data = [ { datetime: new Date('2020-03-29 23:59:59'), header: 'Sample of header', body: [ { tag: 'h1', content: "Lorem ipsum" }, { tag: 'p', content: 'Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa.' }], footer: 'Sample of footer. See more details' } ]; //OR Json format this.data = `[{ "datetime": "2020-03-29 23:59:59", "header": "Sample of header", "body": [{ "tag": "h1", "content": "Lorem ipsum" }, { "tag": "p", "content": "Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa." } ], "footer": "Sample of footer. See more details" }]`; } ``` ### Options | Name | | Type | Default | Description | | -------------- | -------- | ---------------------------------- | --------- | ------------------------------------------------------------------------------------------------- | | [itens] | required | `Array` or `String Json` | [ ] | List of itens to be displayed. | | [showGroup] | optional | Boolean | true | Sets the visibility of the annual grouper. | | [showMenu] | optional | Boolean | true | Sets the anchor menu visibility for annual groupings (depends on 'showGroup'). | | [sortDesc] | optional | Boolean | true | Defines ordering of items, true: Descendente, false: Ascendente. | | [formatDate] | optional | String | 'dd MMMM' | Sets the date display format: | | [language] | optional | String | 'pt-BR' | Specifies manually the display language of texts (i18n), if the token LocaleID is not configured. | | [theme] | optional | String | 'basic' | Defines the style: | #### TimelineItem Type | Name | | Type | Description | | -------- | -------- | ----------------- | -------------------------- | | datetime | required | Date | | | icon | optional | string | | | header | optional | string | | | body | required | `Array` | | | footer | optional | string | | #### ItemBody Type | Name | | Type | Description | | ------- | -------- | -------------- | -------------------------- | | tag | required | string | | | content | required | string | | | attr | optional | `TagAttribute` | | #### TagAttribute Type | Name | | Type | Description | | -------- | -------- | ------ | -------------------------- | | href | optional | string | | | target | optional | string | | | title | optional | string | | | src | optional | string | | | width | optional | string | | | cssclass | optional | string | | ## Html Structure We'll have a similar result: ```html
2020
29/03
Sample of header
2017-03-29 23:59:59

Lorem ipsum

Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa.

Sample of footer.
``` ## Styling guide There are several classes that help you to create your custom styles `app.component.css` ```css :host ::ng-deep #timeline-albe.minimalist { color: inherit; font-size: inherit; width: inherit; margin: 10px; } ``` ## Notes * The **datetime** element must meet the ISO 8601 standard in year-month-day format "yyyy-MM-dd" or "yyyy-MM-dd HH:mm:ss" ## Demo App Follow these instructions to run the demo: 1. Clone the repository to your local machine 2. From the project folder, run `npm i` to install all required dependencies 3. Run `ng b ngx-timeline-albe` to build in **dist** folder. 4. Run `ng s` to serve the project from a live-updating server. 5. Go to `localhost:4200` to see the demo site ## To do - [x] If 'json' (string) is passed, convert to 'object'. - [x] Displays default message. - [ ] Insert animation. - [x] Sort items by date. - [x] Multiple languages. - [x] Multiple styles. - [ ] Document CSS customization. - [x] Document 'json' or 'object'. >Inspired on the plug-in: https://github.com/Albejr/jquery-albe-timeline