Add svg icon option for tabs component
This commit is contained in:
parent
03f412c550
commit
a59143f381
|
@ -6,6 +6,12 @@
|
||||||
|
|
||||||
import { Component, Input } from '@angular/core';
|
import { Component, Input } from '@angular/core';
|
||||||
|
|
||||||
|
export interface TabIcon {
|
||||||
|
svg: string;
|
||||||
|
ratio: number;
|
||||||
|
fill: string;
|
||||||
|
}
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'my-tab',
|
selector: 'my-tab',
|
||||||
// styles: [
|
// styles: [
|
||||||
|
@ -32,4 +38,5 @@ export class TabComponent {
|
||||||
@Input('tabNumber') num: number;
|
@Input('tabNumber') num: number;
|
||||||
@Input('customClass') customClass:string = "";
|
@Input('customClass') customClass:string = "";
|
||||||
@Input('tabId') tabId: string;
|
@Input('tabId') tabId: string;
|
||||||
|
@Input('tabIcon') tabIcon: TabIcon;
|
||||||
}
|
}
|
||||||
|
|
|
@ -20,7 +20,8 @@ import { TabComponent } from './tab.component';
|
||||||
<li *ngFor="let tab of tabs.toArray(); let i=index"
|
<li *ngFor="let tab of tabs.toArray(); let i=index"
|
||||||
[class]="'uk-padding-remove '+ tab.customClass + (i == 0?' uk-active':'')"
|
[class]="'uk-padding-remove '+ tab.customClass + (i == 0?' uk-active':'')"
|
||||||
(click)="selectTab(tab)">
|
(click)="selectTab(tab)">
|
||||||
<a class="uk-width-1-1 uk-height-1-1">
|
<a class="uk-width-1-1 uk-height-1-1" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
|
||||||
|
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon>
|
||||||
<div class="tab-header">{{tab.title}}</div>
|
<div class="tab-header">{{tab.title}}</div>
|
||||||
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
|
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
|
||||||
<div *ngIf="tab.customClass == 'statistics'" class="number">
|
<div *ngIf="tab.customClass == 'statistics'" class="number">
|
||||||
|
|
|
@ -5,10 +5,11 @@ import { FormsModule } from '@angular/forms';
|
||||||
import {TabsComponent} from './tabs.component';
|
import {TabsComponent} from './tabs.component';
|
||||||
import {TabComponent} from "./tab.component";
|
import {TabComponent} from "./tab.component";
|
||||||
import {SmallTabsComponent} from "./small-tabs.component";
|
import {SmallTabsComponent} from "./small-tabs.component";
|
||||||
|
import {IconsModule} from '../icons/icons.module';
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
CommonModule, FormsModule
|
CommonModule, FormsModule, IconsModule
|
||||||
],
|
],
|
||||||
declarations: [
|
declarations: [
|
||||||
TabsComponent, TabComponent, SmallTabsComponent
|
TabsComponent, TabComponent, SmallTabsComponent
|
||||||
|
|
Loading…
Reference in New Issue