{"id":13637446,"url":"https://github.com/glutengo/angular-mgl-timeline","last_synced_at":"2025-04-19T08:34:06.997Z","repository":{"id":29018984,"uuid":"120016173","full_name":"glutengo/angular-mgl-timeline","owner":"glutengo","description":"Timeline component for Angular","archived":false,"fork":false,"pushed_at":"2023-02-04T18:42:23.000Z","size":2408,"stargazers_count":67,"open_issues_count":17,"forks_count":33,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-30T07:03:10.080Z","etag":null,"topics":["angular","javascript","material","timeline","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/glutengo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-02-02T18:26:17.000Z","updated_at":"2024-08-01T12:12:39.000Z","dependencies_parsed_at":"2023-02-15T10:46:16.205Z","dependency_job_id":null,"html_url":"https://github.com/glutengo/angular-mgl-timeline","commit_stats":{"total_commits":81,"total_committers":17,"mean_commits":4.764705882352941,"dds":0.4320987654320988,"last_synced_commit":"0716207761efffc6a913dbfdcad7a157a3453e97"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glutengo%2Fangular-mgl-timeline","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glutengo%2Fangular-mgl-timeline/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glutengo%2Fangular-mgl-timeline/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/glutengo%2Fangular-mgl-timeline/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/glutengo","download_url":"https://codeload.github.com/glutengo/angular-mgl-timeline/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223795266,"owners_count":17204137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","javascript","material","timeline","typescript"],"created_at":"2024-08-02T00:01:17.544Z","updated_at":"2024-11-09T06:31:17.631Z","avatar_url":"https://github.com/glutengo.png","language":"TypeScript","readme":"# angular-mgl-timeline\n\n[![npm version](https://badge.fury.io/js/angular-mgl-timeline.svg)](https://badge.fury.io/js/angular-mgl-timeline)\n\nThis is a animated vertical timeline component for Angular 2+. Angular Material is supported but not mandatory.\n\n## Online Demo\n\nAn Online Demo with live editing is available on [stackblitz](https://stackblitz.com/edit/angular-mgl-timeline).\n\n## Getting started\n\n1) run `npm install --save angular-mgl-timeline` \n2) in your app module: \n```typescript\n...\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { MglTimelineModule } from 'angular-mgl-timeline';\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    BrowserAnimationsModule,\n    MglTimelineModule\n  ]\n})\nexport class AppModule { }\n```\n## Usage\n\n### Minimal Setup\n```xml\n\u003cmgl-timeline\u003e\n    \u003cmgl-timeline-entry\u003e\n        \u003cmgl-timeline-entry-header\u003eHeader\u003c/mgl-timeline-entry-header\u003e\n        \u003cmgl-timeline-entry-content\u003eContent\u003c/mgl-timeline-entry-content\u003e\n    \u003c/mgl-timeline-entry\u003e\n\u003c/mgl-timeline\u003e\n```\n\n### Include a dot\n```xml\n\u003cmgl-timeline\u003e\n    \u003cmgl-timeline-entry\u003e\n        \u003cmgl-timeline-entry-header\u003eHeader\u003c/mgl-timeline-entry-header\u003e\n        \u003cmgl-timeline-entry-content\u003eContent\u003c/mgl-timeline-entry-content\u003e\n        \u003cmgl-timeline-entry-dot\u003e\u003c/mgl-timeline-entry-dot\u003e\n    \u003c/mgl-timeline-entry\u003e\n\u003c/mgl-timeline\u003e\n\nFor Angular 8,9,10\n\u003cmgl-timeline-entry-dot [size]=\"size\" style=\"background-color: color;\"\u003e\u003c/mgl-timeline-entry-dot\u003e\n```\n\n### Include side data\n```xml\n\u003cmgl-timeline\u003e\n    \u003cmgl-timeline-entry\u003e\n        \u003cmgl-timeline-entry-header\u003eHeader\u003c/mgl-timeline-entry-header\u003e\n        \u003cmgl-timeline-entry-content\u003eContent\u003c/mgl-timeline-entry-content\u003e\n        \u003cmgl-timeline-entry-side\u003e2018\u003c/mgl-timeline-entry-side\u003e\n    \u003c/mgl-timeline-entry\u003e\n\u003c/mgl-timeline\u003e\n```\n\n## Angular Material\n\nThe package includes a theme for angular material. In your own angular material theme:\n\n```scss\n@use '@angular/material' as mat;\n@use 'angular-mgl-timeline' as mgl;\n...\n\n@include mat.all-component-themes($your-theme);\n@include mgl.timeline-theme($your-theme);\n```\nIf the theme is included, the components will be styled according to `$your-theme` including support for primary and accent colors for the dot.\n\n## Components\n\n### MglTimeline\n\n#### Content\n| tag                    | number |\n| ---------------------- | ------ |\n| `\u003cmgl-timeline-entry\u003e` |     n  |\n\n#### Inputs\n\n| property             | type    | default  | impact                                                                                          |\n| -------------------- | ------- | -------- | ----------------------------------------------------------------------------------------------- |\n| toggle               | boolean | true     | If set to true, expanding one entry will collapse all other entries and vice versa              |\n| alternate            | boolean | true     | If set to true, entries will be displayed alternately (left / right). No effect in mobile mode  |\n| focusOnOpen          | boolean | false    | If set to true, expanding an entry will scroll it into view                                     |\n| side                 | string  | 'left'   | Changes side (`'left'` | `'right'`) the entries are shown on. No effect if alternate is `true`  |\n| mobileWidthThreshold | number  | 640      | Decides when the mobile layout is used                                                          |\n\n### MglTimelineEntry\nThe `expanded` class will be added to the timeline-entry compnent when the entry is expanded.  \n\n#### Content\n| tag                            | number |\n| ------------------------------ | ------ |\n| `\u003cmgl-timeline-entry-header\u003e`  |     1  |\n| `\u003cmgl-timeline-entry-content\u003e` |     1  |\n| `\u003cmgl-timeline-entry-dot\u003e`     | 0...1  |\n| `\u003cmgl-timeline-entry-side\u003e`    | 0...1  |\n\n#### Outputs\n\n| event           | type    | description\n| --------------- | ------- | --------------------------------------------\n| expand          | boolean | fired when an entry is expanded / collapsed. Value is true for expanded and false for collapsed\n\n### MglTimelineEntryHeader\n\n### MglTimelineEntryContent\n\n#### Inputs\n\n| property                 | type    | default      | impact                                                                                         |\n| ------------------------ | ------- | ------------ | ---------------------------------------------------------------------------------------------- |\n| expandAnimationTiming    | string  | '200ms ease' | Controls the animation speed of the content of an entry. Set to `0ms` to disable the animation |\n| collapseAnimationTiming  | string  | '100ms ease' | Controls the animation speed of the content of an entry. Set to `0ms` to disable the animation |\n\n\n### MglTimelineEntryDot\n\n#### Inputs\n| property | type   | default | impact                                                                                                             |\n| -------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------ |\n| size     | number |     45  | Size of the dot [px]                                                                                               |\n| 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 |\n| expandAnimationTiming    | string  | '200ms ease' | Controls the animation speed of the dot of an entry. Set to `0ms` to disable the animation   |\n| collapseAnimationTiming  | string  | '100ms ease' | Controls the animation speed of the dot of an entry. Set to `0ms` to disable the animation   |\n\n\n## License\nMIT License (c) Markus Glutting\n","funding_links":[],"categories":["Angular"],"sub_categories":["Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglutengo%2Fangular-mgl-timeline","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fglutengo%2Fangular-mgl-timeline","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fglutengo%2Fangular-mgl-timeline/lists"}