ngx-pluto
Version:
129 lines • 7.91 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Renderer2, ElementRef, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router';
/**
* 侧边菜单
*
* Example of usage:
* <example-url>https://stackblitz.com/edit/x-button?embed=1&file=src/app/app.component.ts</example-url>
*/
export class NpSideNav {
/**
* @param {?} renderer2
* @param {?} el
* @param {?} router
*/
constructor(renderer2, el, router) {
this.renderer2 = renderer2;
this.el = el;
this.router = router;
this.items = [];
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
}
/**
* @return {?}
*/
ngAfterViewInit() {
}
/**
* @param {?} item
* @return {?}
*/
onItemClicked(item) {
item.expanded = !item.expanded;
if (item.route) {
this.router.navigate([item.route]);
}
}
}
NpSideNav.decorators = [
{ type: Component, args: [{
selector: `np-sidenav`,
template: "<div class=\"np-sidenav-wrapper\">\r\n <ng-container *ngTemplateOutlet=\"sidenavItem; context: { items: items }\">\r\n </ng-container>\r\n</div>\r\n\r\n<ng-template #sidenavItem let-items=\"items\">\r\n <div class=\"sidenav-item-wrapper\" *ngFor=\"let item of items\">\r\n <div class=\"sidenav-item flex-wrap row-flex\" (click)=\"onItemClicked(item)\">\r\n <i class=\"sidenav-icon\" [class]=\"item.iconName\" *ngIf=\"item.iconName\"></i>\r\n <span>{{ item.displayName }}</span>\r\n <i *ngIf=\"item.children && item.children.length > 0\" class=\"fa right-arrow\" [ngClass]=\"{'fa-angle-left': !item.expanded, \r\n 'fa-angle-down': item.expanded}\"></i>\r\n </div>\r\n\r\n <ng-container *ngIf=\"item.expanded\">\r\n <ng-container *ngTemplateOutlet=\"sidenavItem; context: { items: item.children }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n",
encapsulation: ViewEncapsulation.None,
styles: [".np-sidenav-wrapper{display:inline-block;width:100%}.np-sidenav-wrapper .sidenav-item-wrapper{font-size:16px;font-weight:500;padding:8px 0 8px 15px}.np-sidenav-wrapper .sidenav-item-wrapper .sidenav-item{align-items:center;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.np-sidenav-wrapper .sidenav-item-wrapper .sidenav-item>span{margin:0 15px}.np-sidenav-wrapper .sidenav-item-wrapper .sidenav-item .right-arrow{position:absolute;top:50%;right:0;transform:translateY(-50%)}"]
}] }
];
/** @nocollapse */
NpSideNav.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef },
{ type: Router }
];
NpSideNav.propDecorators = {
items: [{ type: Input }]
};
if (false) {
/** @type {?} */
NpSideNav.prototype.items;
/**
* @type {?}
* @private
*/
NpSideNav.prototype.renderer2;
/**
* @type {?}
* @private
*/
NpSideNav.prototype.el;
/**
* @type {?}
* @private
*/
NpSideNav.prototype.router;
}
/**
* @record
*/
export function NpSideNavItem() { }
if (false) {
/**
* 唯一id标识
* @type {?}
*/
NpSideNavItem.prototype.id;
/**
* 菜单名称
* @type {?}
*/
NpSideNavItem.prototype.displayName;
/**
* 菜单fa icon，
* @type {?|undefined}
*/
NpSideNavItem.prototype.iconName;
/**
* 菜单跳转路由
* @type {?|undefined}
*/
NpSideNavItem.prototype.route;
/**
* 需要高亮的路由数组，包含在此数组中的路由都会高亮当前route
* @type {?|undefined}
*/
NpSideNavItem.prototype.highlightRoutes;
/**
* 子菜单数组
* @type {?|undefined}
*/
NpSideNavItem.prototype.children;
/**
* 是否展开当前菜单
* @type {?|undefined}
*/
NpSideNavItem.prototype.expanded;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2lkZW5hdi5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC1wbHV0by8iLCJzb3VyY2VzIjpbImxpYi9zaWRlbmF2L3NpZGVuYXYudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQVUsS0FBSyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQTBDLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzNJLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7Ozs7OztBQWV6QyxNQUFNLE9BQU8sU0FBUzs7Ozs7O0lBS3BCLFlBQW9CLFNBQW9CLEVBQzlCLEVBQWMsRUFDZCxNQUFjO1FBRkosY0FBUyxHQUFULFNBQVMsQ0FBVztRQUM5QixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQUxmLFVBQUssR0FBb0IsRUFBRSxDQUFDO0lBTXJDLENBQUM7Ozs7SUFFRCxRQUFRO0lBRVIsQ0FBQzs7Ozs7SUFFRCxXQUFXLENBQUMsT0FBc0I7SUFFbEMsQ0FBQzs7OztJQUVELGVBQWU7SUFDZixDQUFDOzs7OztJQUVELGFBQWEsQ0FBQyxJQUFtQjtRQUMvQixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUMvQixJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDZCxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO1NBQ3BDO0lBQ0gsQ0FBQzs7O1lBakNGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsWUFBWTtnQkFDdEIsazZCQUEyQjtnQkFFM0IsYUFBYSxFQUFFLGlCQUFpQixDQUFDLElBQUk7O2FBQ3RDOzs7O1lBZGtDLFNBQVM7WUFBRSxVQUFVO1lBQy9DLE1BQU07OztvQkFpQlosS0FBSzs7OztJQUFOLDBCQUFxQzs7Ozs7SUFHekIsOEJBQTRCOzs7OztJQUN0Qyx1QkFBc0I7Ozs7O0lBQ3RCLDJCQUFzQjs7Ozs7QUFzQjFCLG1DQWVDOzs7Ozs7SUFiQywyQkFBb0I7Ozs7O0lBRXBCLG9DQUFvQjs7Ozs7SUFFcEIsaUNBQWtCOzs7OztJQUVsQiw4QkFBZTs7Ozs7SUFFZix3Q0FBMkI7Ozs7O0lBRTNCLGlDQUEyQjs7Ozs7SUFFM0IsaUNBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBSZW5kZXJlcjIsIEVsZW1lbnRSZWYsIEhvc3RMaXN0ZW5lciwgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkLCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBSb3V0ZXIgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xyXG5cclxuLyoqXHJcbiAqIOS+p+i+ueiPnOWNlVxyXG4gKiBcclxuICogRXhhbXBsZSBvZiB1c2FnZTpcclxuICogPGV4YW1wbGUtdXJsPmh0dHBzOi8vc3RhY2tibGl0ei5jb20vZWRpdC94LWJ1dHRvbj9lbWJlZD0xJmZpbGU9c3JjL2FwcC9hcHAuY29tcG9uZW50LnRzPC9leGFtcGxlLXVybD5cclxuICovXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiBgbnAtc2lkZW5hdmAsXHJcbiAgdGVtcGxhdGVVcmw6ICdzaWRlbmF2Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWydzaWRlbmF2LnNjc3MnXSxcclxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcbn0pXHJcblxyXG5leHBvcnQgY2xhc3MgTnBTaWRlTmF2IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgQElucHV0KCkgaXRlbXM6IE5wU2lkZU5hdkl0ZW1bXSA9IFtdO1xyXG5cclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSByZW5kZXJlcjI6IFJlbmRlcmVyMixcclxuICAgIHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsXHJcbiAgICBwcml2YXRlIHJvdXRlcjogUm91dGVyKSB7XHJcbiAgfVxyXG5cclxuICBuZ09uSW5pdCgpOiB2b2lkIHtcclxuXHJcbiAgfVxyXG5cclxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XHJcblxyXG4gIH1cclxuXHJcbiAgbmdBZnRlclZpZXdJbml0KCkge1xyXG4gIH1cclxuXHJcbiAgb25JdGVtQ2xpY2tlZChpdGVtOiBOcFNpZGVOYXZJdGVtKSB7XHJcbiAgICBpdGVtLmV4cGFuZGVkID0gIWl0ZW0uZXhwYW5kZWQ7XHJcbiAgICBpZiAoaXRlbS5yb3V0ZSkge1xyXG4gICAgICB0aGlzLnJvdXRlci5uYXZpZ2F0ZShbaXRlbS5yb3V0ZV0pO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBOcFNpZGVOYXZJdGVtIHtcclxuICAvKirllK/kuIBpZOagh+ivhiAqL1xyXG4gIGlkOiBzdHJpbmcgfCBudW1iZXI7XHJcbiAgLyoq6I+c5Y2V5ZCN56ewICovXHJcbiAgZGlzcGxheU5hbWU6IHN0cmluZztcclxuICAvKiroj5zljZVmYSBpY29u77yMICovXHJcbiAgaWNvbk5hbWU/OiBzdHJpbmc7XHJcbiAgLyoq6I+c5Y2V6Lez6L2s6Lev55SxICovXHJcbiAgcm91dGU/OiBzdHJpbmc7XHJcbiAgLyoq6ZyA6KaB6auY5Lqu55qE6Lev55Sx5pWw57uE77yM5YyF5ZCr5Zyo5q2k5pWw57uE5Lit55qE6Lev55Sx6YO95Lya6auY5Lqu5b2T5YmNcm91dGUgKi9cclxuICBoaWdobGlnaHRSb3V0ZXM/OiBzdHJpbmdbXTtcclxuICAvKirlrZDoj5zljZXmlbDnu4QgKi9cclxuICBjaGlsZHJlbj86IE5wU2lkZU5hdkl0ZW1bXTtcclxuICAvKirmmK/lkKblsZXlvIDlvZPliY3oj5zljZUgKi9cclxuICBleHBhbmRlZD86IGJvb2xlYW47XHJcbn1cclxuXHJcbiJdfQ==