README
Albe Timeline 1.2.11
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.
This project use angular version 11.2.4
Use license
The component is open source and released for free commercial use at no cost. Donations are welcome.
Installation
$ npm install ngx-timeline-albe
or
$ bit import albejr.ngx/ngx-timeline-albe
How to use
Import the module
import { NgxTimelineAlbeModule } from 'ngx-timeline-albe';
@NgModule({
imports: [ NgxTimelineAlbeModule ],
...
})
export class AppModule {}
Template
<ngx-timeline [itens]="data"></ngx-timeline>
- Instance with options:
<ngx-timeline [itens]="data"
[formatDate]="'dd MMMM'"
[sortDesc]="true"
[showMenu]="true"
[showGroup]="true"
[theme]="'basic'">
</ngx-timeline>
<!-- FORMATS: 'dd MMMM', 'dd/MM/yyyy HH:mm:ss', 'MM/dd/yyyy', 'yyyy/MM/dd' -->
<!-- THEMES: 'basic', 'horizontal', 'minimalist', 'mobile', 'vertical' -->
Component
import { TimelineItem } from 'ngx-timeline-albe';
//The Json object is also accepted in string format.
data: Array<TimelineItem> | String;
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 <a href=\"https://github.com/Albejr/ngx-timeline\" target=\"_blank\">more details</a>'
}
];
//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 <a href='https://github.com/Albejr/jquery-albe-timeline' target='_blank'>more details</a>"
}]`;
}
Html Structure
We'll have a similar result:
<ngx-timeline>
<div id="timeline-albe" class="clasic">
<section>
<header class="group">2020</header>
<div class="item">
<div class="badge">
<span>29/03</span>
</div>
<article>
<header>Sample of header</header>
<div class="body">
<span>2017-03-29 23:59:59</span>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, nisl lorem, wisi egestas orci tempus class massa.</p>
</div>
<footer>Sample of footer.</footer>
</article>
<div class="badge last">
</div>
</div>
</section>
</div>
<ngx-timeline>
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:
- Clone the repository to your local machine
- From the project folder, run
npm i
to install all required dependencies - Run
ng b ngx-timeline-albe
to build in dist folder. - Run
ng s
to serve the project from a live-updating server. - Go to
localhost:4200
to see the demo site
To do
- Se for passado 'json' (string), converter para 'object'.
- Exibe mensagem padão.
- Inserir animação.
- Ordenar itens pela data.
- Multiplas linguagens.
- Multiplos estilos.
- Documentar customização do CSS.
- Documentar 'json' ou 'object'.
Inspired on the plug-in: https://github.com/Albejr/jquery-albe-timeline