ng-vertical-timeline
Version:
This is a Angular library that generates a vertical timeline.
1 lines • 4.44 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"NgVerticalTimelineService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"NgVerticalTimelineComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"ng-vertical-timeline","template":"<div class=\"timeline\">\r\n\r\n <div *ngFor=\"let item of data\">\r\n\r\n <div class=\"container left\" [ngClass]=\"isPair(item.id)?'left':'right'\">\r\n <div class=\"inner\">\r\n <div class=\"head\" [style.backgroundColor]=\"primaryColor\">\r\n <div class=\"icon\">\r\n <img class=\"ui tiny image\" [src]=\"item.icon\">\r\n </div>\r\n\r\n <div class=\"title\">\r\n <span>{{item.date}}</span>\r\n {{item.title }}\r\n </div>\r\n\r\n </div>\r\n <div class=\"body\">\r\n <p [innerHTML]=\"item.content\"></p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n","styles":[".timeline{position:relative;max-width:1200px;margin:0 auto}.timeline:after{content:\"\";position:absolute;width:6px;background-color:#222;top:0;bottom:0;left:50%;margin-left:-3px}.timeline .container{position:relative;width:50%;margin:initial;padding:10px 40px;background-color:initial;box-sizing:border-box}.timeline .container:after{content:\"\";position:absolute;width:25px;height:25px;right:-16px;background-color:#000428;border:4px solid #004e92;top:15px;border-radius:50%;z-index:1}.timeline .container .inner{background-color:#fff;color:#222;box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}.timeline .container .inner .head{display:flex;align-items:center;color:#fff;background-color:#222}.timeline .container .inner .head .icon{margin:20px;max-width:50px}.timeline .container .inner .head .icon img{width:100%;height:100%}.timeline .container .inner .head .title{font-size:24px;text-transform:uppercase}.timeline .container .inner .head .title span{display:block;font-size:14px}.timeline .container .inner .body{background-color:#fff;padding:20px}.left{left:0}.left:before{content:\" \";height:0;position:absolute;top:22px;width:0;z-index:1;right:30px;border:solid #222;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #222}.right{left:50%}.right:before{content:\" \";height:0;position:absolute;top:22px;width:0;z-index:1;left:30px;border:solid #222;border-width:10px 10px 10px 0;border-color:transparent #222 transparent transparent}.right:after{left:-16px}@media screen and (max-width:600px){.timeline:after{left:31px}.timeline .container{width:100%;padding-left:70px;padding-right:25px}.timeline .container:before{left:60px;border:solid #222;border-width:10px 10px 10px 0;border-color:transparent #222 transparent transparent}.left::after,.right::after{left:12px}.right{left:0}#timeline--1,#timeline--2,#timeline--3{top:initial}}"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"primaryColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"isPair":[{"__symbolic":"method"}]}},"NgVerticalTimelineModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":5,"character":12}],"declarations":[{"__symbolic":"reference","name":"NgVerticalTimelineComponent"}],"exports":[{"__symbolic":"reference","name":"NgVerticalTimelineComponent"}]}]}],"members":{}}},"origins":{"NgVerticalTimelineService":"./lib/ng-vertical-timeline.service","NgVerticalTimelineComponent":"./lib/ng-vertical-timeline.component","NgVerticalTimelineModule":"./lib/ng-vertical-timeline.module"},"importAs":"ng-vertical-timeline"}