ng-vertical-timeline
Version:
This is a Angular library that generates a vertical timeline.
39 lines • 5.09 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input } from '@angular/core';
export class NgVerticalTimelineComponent {
constructor() { }
/**
* @return {?}
*/
ngOnInit() { }
/**
* @param {?} id
* @return {?}
*/
isPair(id) {
return !(id % 2);
}
}
NgVerticalTimelineComponent.decorators = [
{ type: Component, args: [{
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}}"]
}] }
];
/** @nocollapse */
NgVerticalTimelineComponent.ctorParameters = () => [];
NgVerticalTimelineComponent.propDecorators = {
data: [{ type: Input }],
primaryColor: [{ type: Input }]
};
if (false) {
/** @type {?} */
NgVerticalTimelineComponent.prototype.data;
/** @type {?} */
NgVerticalTimelineComponent.prototype.primaryColor;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctdmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmctdmVydGljYWwtdGltZWxpbmUvIiwic291cmNlcyI6WyJsaWIvbmctdmVydGljYWwtdGltZWxpbmUuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQVF6RCxNQUFNLE9BQU8sMkJBQTJCO0lBTXRDLGdCQUFlLENBQUM7Ozs7SUFFaEIsUUFBUSxLQUFJLENBQUM7Ozs7O0lBRWIsTUFBTSxDQUFDLEVBQVU7UUFDZixPQUFPLENBQUMsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDbkIsQ0FBQzs7O1lBakJGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsc0JBQXNCO2dCQUNoQywyckJBQW9EOzthQUVyRDs7Ozs7bUJBRUUsS0FBSzsyQkFFTCxLQUFLOzs7O0lBRk4sMkNBQ3NCOztJQUN0QixtREFDcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uSW5pdCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgVGltZWxpbmVFdmVudCB9IGZyb20gJy4vdGltZWxpbmUtZXZlbnQnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZy12ZXJ0aWNhbC10aW1lbGluZScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL25nLXZlcnRpY2FsLXRpbWVsaW5lLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9uZy12ZXJ0aWNhbC10aW1lbGluZS5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOZ1ZlcnRpY2FsVGltZWxpbmVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xyXG4gIEBJbnB1dCgpXHJcbiAgZGF0YTogVGltZWxpbmVFdmVudFtdO1xyXG4gIEBJbnB1dCgpXHJcbiAgcHJpbWFyeUNvbG9yOiBzdHJpbmc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKCkge31cclxuXHJcbiAgbmdPbkluaXQoKSB7fVxyXG5cclxuICBpc1BhaXIoaWQ6IG51bWJlcik6IGJvb2xlYW4ge1xyXG4gICAgcmV0dXJuICEoaWQgJSAyKTtcclxuICB9XHJcbn1cclxuIl19