desktop-menu-bar
Version:
An angular component for a desktop like menu bar
20 lines • 2.71 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
let DesktopMenuBarComponent = class DesktopMenuBarComponent {
constructor() {
this.items = [];
}
ngOnInit() { }
};
__decorate([
Input()
], DesktopMenuBarComponent.prototype, "items", void 0);
DesktopMenuBarComponent = __decorate([
Component({
selector: 'desktop-menu-bar',
template: "<div class=\"menu-bar\">\n <div class=\"menu-bar-item\" *ngFor=\"let item of items\">\n <span>{{ item.text }}</span>\n <desktop-menu-bar-vertical class=\"dropdown\" [items]=\"item.children\"></desktop-menu-bar-vertical>\n </div>\n</div>\n",
styles: [".menu-bar{background-color:#d3d3d3;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.menu-bar .menu-bar-item{padding:6px 12px;cursor:pointer;position:relative}.menu-bar .menu-bar-item:hover{background-color:#b9b9b9}.menu-bar .menu-bar-item .dropdown{z-index:1;position:absolute;top:100%;left:0;visibility:hidden;-webkit-transition:visibility;transition:visibility}.menu-bar .menu-bar-item:hover>.dropdown{visibility:visible;-webkit-transition-delay:.2s;transition-delay:.2s}"]
})
], DesktopMenuBarComponent);
export { DesktopMenuBarComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVza3RvcC1tZW51LWJhci5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9kZXNrdG9wLW1lbnUtYmFyLyIsInNvdXJjZXMiOlsibGliL2Rlc2t0b3AtbWVudS1iYXIvZGVza3RvcC1tZW51LWJhci5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBUXpELElBQWEsdUJBQXVCLEdBQXBDLE1BQWEsdUJBQXVCO0lBR2hDO1FBRlMsVUFBSyxHQUF5QixFQUFFLENBQUM7SUFFM0IsQ0FBQztJQUVoQixRQUFRLEtBQVUsQ0FBQztDQUN0QixDQUFBO0FBTFk7SUFBUixLQUFLLEVBQUU7c0RBQWtDO0FBRGpDLHVCQUF1QjtJQUxuQyxTQUFTLENBQUM7UUFDUCxRQUFRLEVBQUUsa0JBQWtCO1FBQzVCLGtRQUE4Qzs7S0FFakQsQ0FBQztHQUNXLHVCQUF1QixDQU1uQztTQU5ZLHVCQUF1QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRGVza3RvcE1lbnVCYXJJdGVtIH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9kZXNrdG9wLW1lbnUtYmFyLWl0ZW0uaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdkZXNrdG9wLW1lbnUtYmFyJyxcbiAgICB0ZW1wbGF0ZVVybDogJ2Rlc2t0b3AtbWVudS1iYXIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWydkZXNrdG9wLW1lbnUtYmFyLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgRGVza3RvcE1lbnVCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIEBJbnB1dCgpIGl0ZW1zOiBEZXNrdG9wTWVudUJhckl0ZW1bXSA9IFtdO1xuXG4gICAgY29uc3RydWN0b3IoKSB7fVxuXG4gICAgbmdPbkluaXQoKTogdm9pZCB7fVxufVxuIl19