@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 6.8 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-devui/tabs",["exports","@angular/core","@angular/common"],e):e(((t=t||self)["ng-devui"]=t["ng-devui"]||{},t["ng-devui"].tabs={}),t.ng.core,t.ng.common)}(this,(function(t,e,i){"use strict";var n=function(){function t(t){this.templateRef=t}return t.decorators=[{type:e.Directive,args:[{selector:"[dTabContent]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}();var a=function(){function t(t){this.templateRef=t}return t.decorators=[{type:e.Directive,args:[{selector:"[dTabTitle]"}]}],t.ctorParameters=function(){return[{type:e.TemplateRef}]},t}();var o=function(){function t(){this.disabled=!1}return t.decorators=[{type:e.Component,args:[{selector:"d-tab",template:""}]}],t.propDecorators={tabId:[{type:e.Input}],id:[{type:e.Input}],title:[{type:e.Input}],disabled:[{type:e.Input}],contentTpl:[{type:e.ContentChild,args:[n,{static:!1}]}],titleTpl:[{type:e.ContentChild,args:[a,{static:!1}]}]},t}();var r=function(){function t(){this.type="tabs",this.showContent=!0,this.vertical=!1,this.activeTabChange=new e.EventEmitter}return t.prototype.ngOnInit=function(){},t.prototype.canChange=function(t){var e=Promise.resolve(!0);if(this.beforeChange){var i=this.beforeChange(t);void 0!==i&&(e=i.then?i:i.subscribe?i.toPromise():Promise.resolve(i))}return e},t.prototype.ngAfterContentInit=function(){void 0===this.activeTab&&this.tabs.length>0&&this.select(this.tabs.first.id)},t.prototype.select=function(t){var e=this;this.canChange(t).then((function(i){if(i){var n=e.tabs.find((function(e){return e.id===t}));n&&!n.disabled&&(e.activeTab=t,e.activeTabChange.emit(t))}}))},t.decorators=[{type:e.Component,args:[{selector:"d-tabs",template:'<ul\r\n class="devui-nav devui-nav-{{ type }} {{ cssClass }}"\r\n [ngClass]="{\r\n \'devui-nav-stacked\': vertical\r\n }"\r\n role="tablist"\r\n>\r\n <ng-container *ngFor="let tab of tabs">\r\n <li role="presentation" [class.disabled]="tab.disabled" [id]="tab.tabId" [class.active]="tab.id == activeTab" (click)="select(tab.id)">\r\n <a\r\n role="tab"\r\n data-toggle="tab"\r\n [attr.aria-expanded]="tab.id == activeTab"\r\n [style.width]="customWidth"\r\n [ngClass]="{ \'custom-width\': customWidth }"\r\n >\r\n <ng-template *ngIf="!tab.title" [ngTemplateOutlet]="tab.titleTpl?.templateRef"></ng-template>\r\n <span *ngIf="tab.title">{{ tab.title }}</span>\r\n </a>\r\n </li>\r\n </ng-container>\r\n</ul>\r\n<div class="devui-tab-content" *ngIf="showContent">\r\n <ng-container *ngFor="let tab of tabs">\r\n <div class="devui-tab-pane fade in" role="tabpanel" *ngIf="tab.id == activeTab" [ngClass]="{ \'in active\': tab.id == activeTab }">\r\n <ng-template [ngTemplateOutlet]="tab.contentTpl.templateRef"></ng-template>\r\n </div>\r\n </ng-container>\r\n</div>\r\n',exportAs:"tabs",styles:[":host{display:block}.devui-nav-pills,.devui-nav-tabs{background:0 0;font-size:14px;font-weight:700}.devui-nav-pills li,.devui-nav-tabs li{cursor:pointer;border:2px solid transparent}.devui-nav-pills li>a,.devui-nav-tabs li>a{cursor:pointer;border:none;line-height:30px;background-color:transparent;padding:0;color:#252b3a}.devui-nav-pills li>a:active,.devui-nav-pills li>a:focus,.devui-nav-pills li>a:hover,.devui-nav-tabs li>a:active,.devui-nav-tabs li>a:focus,.devui-nav-tabs li>a:hover{outline:0}.devui-nav-pills li.disabled a,.devui-nav-tabs li.disabled a{opacity:.3;cursor:not-allowed}.devui-nav-pills li.active>a,.devui-nav-pills li:hover:not(.disabled)>a,.devui-nav-tabs li.active>a,.devui-nav-tabs li:hover:not(.disabled)>a{color:#5e7ce0}.devui-nav-pills li:after,.devui-nav-tabs li:after{content:'';display:block;margin:auto;height:2px;width:0;background:0 0;-webkit-transition:width .3s ease-out,background-color .3s ease-out;transition:width .3s ease-out,background-color .3s ease-out}.devui-nav-pills li.active:after,.devui-nav-tabs li.active:after{width:100%;background:#5e7ce0}.devui-nav-options{font-size:14px;background:0 0;border:none;border-radius:1px}.devui-nav-options>li{cursor:pointer;border:1px solid #adb0b8;border-left-width:0;background-color:#fff;float:left}.devui-nav-options>li:first-child{border-left-width:1px;border-radius:1px 0 0 1px}.devui-nav-options>li:last-child{border-radius:0 1px 1px 0}.devui-nav-options>li>a{cursor:pointer;border:none;color:#252b3a;line-height:30px;padding:0 15px}.devui-nav-options>li>a:active,.devui-nav-options>li>a:focus,.devui-nav-options>li>a:hover{outline:0}.devui-nav-options>li.disabled a{opacity:.3;cursor:not-allowed}.devui-nav-options>li.active>a,.devui-nav-options>li:hover:not(.disabled)>a{color:#fff}.devui-nav-options>li.active>a:hover,.devui-nav-options>li:hover:not(.disabled)>a:hover{color:#fff;background:0 0}.devui-nav-options>li.active:not(:first-child)::before,.devui-nav-options>li:hover:not(.disabled):not(:first-child)::before{content:'';display:block;top:-1px;left:-1px;width:1px;height:'calc(100% + 2px)';position:absolute}.devui-nav-options>li.active{background-color:#5e7ce0;border-color:#5e7ce0}.devui-nav-options>li.active+li::before,.devui-nav-options>li.active:not(:first-child)::before{background-color:#5e7ce0}.devui-nav-options>li:hover:not(.active):not(.disabled){background-color:#344899;border-color:#344899}.devui-nav-options>li:hover:not(.active):not(.disabled):not(:first-child)::before{background-color:#344899}.devui-nav li>a.custom-width{display:inline-block;padding:0;text-align:center}.devui-nav-tabs:not(.devui-nav-stacked){border-bottom:1px solid #adb0b8}.devui-nav-tabs:not(.devui-nav-stacked) li{float:left;margin-left:32px;margin-bottom:-3px}.devui-nav-tabs:not(.devui-nav-stacked) li:first-child{margin-left:0}.devui-nav-pills:not(.devui-nav-stacked)>li{float:left;margin-left:32px}.devui-nav-pills:not(.devui-nav-stacked)>li:first-child{margin-left:0}.devui-nav:after,.devui-nav:before{content:' ';display:table}.devui-nav:after{clear:both}.devui-tab-content{margin-top:20px}"]}]}],t.ctorParameters=function(){return[]},t.propDecorators={type:[{type:e.Input}],showContent:[{type:e.Input}],activeTab:[{type:e.Input}],vertical:[{type:e.Input}],cssClass:[{type:e.Input}],customWidth:[{type:e.Input}],tabs:[{type:e.ContentChildren,args:[o]}],activeTabChange:[{type:e.Output}],beforeChange:[{type:e.Input}]},t}();var l=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[i.CommonModule],exports:[r,o,a,n],declarations:[r,o,a,n],providers:[]}]}],t}();t.TabComponent=o,t.TabContentDirective=n,t.TabTitleDirective=a,t.TabsComponent=r,t.TabsModule=l,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-tabs.umd.min.js.map