@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1 lines • 9.88 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"TabsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"selector":"d-tabs","exportAs":"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","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}"]}]}],"members":{"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"showContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"activeTab":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"vertical":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"cssClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":3}}]}],"customWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":27,"character":3},"arguments":[{"__symbolic":"reference","name":"TabComponent"}]}]}],"activeTabChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":3}}]}],"beforeChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"canChange":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"select":[{"__symbolic":"method"}]}},"TabsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12}],"exports":[{"__symbolic":"reference","name":"TabsComponent"},{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabTitleDirective"},{"__symbolic":"reference","name":"TabContentDirective"}],"declarations":[{"__symbolic":"reference","name":"TabsComponent"},{"__symbolic":"reference","name":"TabComponent"},{"__symbolic":"reference","name":"TabTitleDirective"},{"__symbolic":"reference","name":"TabContentDirective"}],"providers":[]}]}],"members":{}},"TabContentDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[dTabContent]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"TabTitleDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":2,"character":1},"arguments":[{"selector":"[dTabTitle]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"TabComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"d-tab","template":""}]}],"members":{"tabId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":3}}]}],"id":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}}]}],"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"contentTpl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":13,"character":3},"arguments":[{"__symbolic":"reference","name":"TabContentDirective"},{"static":false}]}]}],"titleTpl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":14,"character":3},"arguments":[{"__symbolic":"reference","name":"TabTitleDirective"},{"static":false}]}]}]}}},"origins":{"TabsComponent":"./tabs.component","TabsModule":"./tabs.module","TabContentDirective":"./tab-content.directive","TabTitleDirective":"./tab-title.directive","TabComponent":"./tab.component"},"importAs":"ng-devui/tabs"}