Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Albejr/ngx-timeline
Component for rendering timelines from the your data.
https://github.com/Albejr/ngx-timeline
angular component json timeline
Last synced: 2 months ago
JSON representation
Component for rendering timelines from the your data.
- Host: GitHub
- URL: https://github.com/Albejr/ngx-timeline
- Owner: Albejr
- Created: 2018-11-21T17:03:41.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-01T11:50:01.000Z (8 months ago)
- Last Synced: 2024-11-07T01:49:44.240Z (3 months ago)
- Topics: angular, component, json, timeline
- Language: SCSS
- Homepage: https://stackblitz.com/edit/ngx-timeline-albe
- Size: 1.88 MB
- Stars: 7
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- project-awesome - Albejr/ngx-timeline - Component for rendering timelines from the your data. (SCSS)
README
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:
- 'dd MMMM'
- 'dd/MM/yyyy HH:mm:ss'
- 'MM/dd/yyyy'
- 'yyyy/MM/dd'
| [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:
- 'basic'
- 'horizontal'
- 'minimalist'
- 'mobile'
- 'vertical'
#### 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