desktop-menu-bar
Version:
An angular component for a desktop like menu bar
20 lines • 2.93 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
var DesktopMenuBarVerticalComponent = /** @class */ (function () {
function DesktopMenuBarVerticalComponent() {
}
DesktopMenuBarVerticalComponent.prototype.ngOnInit = function () { };
__decorate([
Input()
], DesktopMenuBarVerticalComponent.prototype, "items", void 0);
DesktopMenuBarVerticalComponent = __decorate([
Component({
selector: 'desktop-menu-bar-vertical',
template: "<div>\n <div *ngFor=\"let item of items\" class=\"vertical-menu-item\">\n <span (click)=\"item.action ? item.action() : null\">\n {{ item.text }}\n <span *ngIf=\"item.children && item.children.length\">></span>\n </span>\n <desktop-menu-bar-vertical class=\"dropdown\" [items]=\"item.children\"></desktop-menu-bar-vertical>\n </div>\n</div>\n",
styles: [".vertical-menu-item{white-space:nowrap;background-color:#d3d3d3;padding:6px 12px;cursor:pointer;position:relative}.vertical-menu-item:hover{background-color:#b9b9b9}.vertical-menu-item .dropdown{z-index:1;position:absolute;top:0;left:100%;visibility:hidden;-webkit-transition:visibility;transition:visibility}.vertical-menu-item:hover>.dropdown{visibility:visible;-webkit-transition-delay:.2s;transition-delay:.2s}.vertical-menu-item:not(:last-child){border-bottom:1px solid rgba(255,255,255,.4)}"]
})
], DesktopMenuBarVerticalComponent);
return DesktopMenuBarVerticalComponent;
}());
export { DesktopMenuBarVerticalComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVza3RvcC1tZW51LWJhci12ZXJ0aWNhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9kZXNrdG9wLW1lbnUtYmFyLyIsInNvdXJjZXMiOlsibGliL2Rlc2t0b3AtbWVudS1iYXItdmVydGljYWwvZGVza3RvcC1tZW51LWJhci12ZXJ0aWNhbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBUXpEO0lBR0k7SUFBZSxDQUFDO0lBRWhCLGtEQUFRLEdBQVIsY0FBa0IsQ0FBQztJQUpWO1FBQVIsS0FBSyxFQUFFO2tFQUE2QjtJQUQ1QiwrQkFBK0I7UUFMM0MsU0FBUyxDQUFDO1lBQ1AsUUFBUSxFQUFFLDJCQUEyQjtZQUNyQyx1WEFBeUQ7O1NBRTVELENBQUM7T0FDVywrQkFBK0IsQ0FNM0M7SUFBRCxzQ0FBQztDQUFBLEFBTkQsSUFNQztTQU5ZLCtCQUErQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRGVza3RvcE1lbnVCYXJJdGVtIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9kZXNrdG9wLW1lbnUtYmFyLWl0ZW0uaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdkZXNrdG9wLW1lbnUtYmFyLXZlcnRpY2FsJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vZGVza3RvcC1tZW51LWJhci12ZXJ0aWNhbC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vZGVza3RvcC1tZW51LWJhci12ZXJ0aWNhbC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIERlc2t0b3BNZW51QmFyVmVydGljYWxDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIGl0ZW1zOiBEZXNrdG9wTWVudUJhckl0ZW1bXTtcblxuICAgIGNvbnN0cnVjdG9yKCkge31cblxuICAgIG5nT25Jbml0KCk6IHZvaWQge31cbn1cbiJdfQ==