Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/glutengo/angular-mgl-timeline
Timeline component for Angular
https://github.com/glutengo/angular-mgl-timeline
angular javascript material timeline typescript
Last synced: 3 months ago
JSON representation
Timeline component for Angular
- Host: GitHub
- URL: https://github.com/glutengo/angular-mgl-timeline
- Owner: glutengo
- License: mit
- Created: 2018-02-02T18:26:17.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T18:42:23.000Z (almost 2 years ago)
- Last Synced: 2024-04-16T06:39:53.330Z (7 months ago)
- Topics: angular, javascript, material, timeline, typescript
- Language: TypeScript
- Size: 2.3 MB
- Stars: 66
- Watchers: 6
- Forks: 33
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-material-design - angular-mgl-timeline - A vertical timeline component built for Angular Material (Angular / Components)
README
# angular-mgl-timeline
[](https://badge.fury.io/js/angular-mgl-timeline)
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](https://stackblitz.com/edit/angular-mgl-timeline).
## Getting started
1) run `npm install --save angular-mgl-timeline`
2) in your app module:
```typescript
...
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MglTimelineModule } from 'angular-mgl-timeline';
@NgModule({
...
imports: [
...
BrowserAnimationsModule,
MglTimelineModule
]
})
export class AppModule { }
```
## Usage
### Minimal Setup
```xml
Header
Content
```
### Include a dot
```xml
Header
Content
For Angular 8,9,10
```
### Include side data
```xml
Header
Content
2018
```
## Angular Material
The package includes a theme for angular material. In your own angular material theme:
```scss
@use '@angular/material' as mat;
@use 'angular-mgl-timeline' as mgl;
...
@include mat.all-component-themes($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
| tag | number |
| ---------------------- | ------ |
| `` | n |
#### Inputs
| property | type | default | impact |
| -------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------- |
| toggle | boolean | true | If set to true, expanding one entry will collapse all other entries and vice versa |
| alternate | boolean | true | If set to true, entries will be displayed alternately (left / right). No effect in mobile mode |
| focusOnOpen | boolean | false | If set to true, expanding an entry will scroll it into view |
| side | string | 'left' | Changes side (`'left'` | `'right'`) the entries are shown on. No effect if alternate is `true` |
| mobileWidthThreshold | number | 640 | Decides when the mobile layout is used |
### MglTimelineEntry
The `expanded` class will be added to the timeline-entry compnent when the entry is expanded.
#### Content
| tag | number |
| ------------------------------ | ------ |
| `` | 1 |
| `` | 1 |
| `` | 0...1 |
| `` | 0...1 |
#### Outputs
| event | type | description
| --------------- | ------- | --------------------------------------------
| expand | boolean | fired when an entry is expanded / collapsed. Value is true for expanded and false for collapsed
### MglTimelineEntryHeader
### MglTimelineEntryContent
#### Inputs
| property | type | default | impact |
| ------------------------ | ------- | ------------ | ---------------------------------------------------------------------------------------------- |
| expandAnimationTiming | string | '200ms ease' | Controls the animation speed of the content of an entry. Set to `0ms` to disable the animation |
| collapseAnimationTiming | string | '100ms ease' | Controls the animation speed of the content of an entry. Set to `0ms` to disable the animation |
### MglTimelineEntryDot
#### Inputs
| property | type | default | impact |
| -------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------ |
| size | number | 45 | Size of the dot [px] |
| class | string | primary | Will be set as class name of the dot element. primary and accent can be used when using the angular material theme |
| expandAnimationTiming | string | '200ms ease' | Controls the animation speed of the dot of an entry. Set to `0ms` to disable the animation |
| collapseAnimationTiming | string | '100ms ease' | Controls the animation speed of the dot of an entry. Set to `0ms` to disable the animation |
## License
MIT License (c) Markus Glutting