MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add active status and name alternative instead of svg in tabicon

This commit is contained in:
Konstantinos Triantafyllou 2022-03-10 19:45:44 +02:00
parent 2942392d0a
commit 7e76c885ba
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
utils/tabs/tab.component.ts
View File

@ -7,9 +7,10 @@
import { Component, Input } from '@angular/core';
export interface TabIcon {
svg: string;
ratio: number;
fill: string;
name?: string;
svg?: string;
ratio?: number;
active: string;
}
@Component({

20
utils/tabs/tabs.component.ts
View File

@ -2,16 +2,17 @@
* The main component that renders single TabComponent
* instances.
*/
import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
import {AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
import {TabComponent} from './tab.component';
@Component({
selector: 'my-tabs',
template: `
<ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)">
<li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="selected === tab.tabId" (click)="selectTab(tab)">
<a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon>
<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
[ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>
<div>{{tab.title}}</div>
<div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
</a>
@ -22,14 +23,21 @@ import {TabComponent} from './tab.component';
</div>
`
})
export class TabsComponent {
export class TabsComponent implements AfterContentInit {
@Input()
public customClass: string;
@ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
@Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
public selected: string;
ngAfterContentInit() {
if(this.tabs.length > 0) {
this.selected = this.tabs.get(0).tabId;
}
}
selectTab(tab: TabComponent){
// activate the tab the user has clicked on.
this.selected = tab.tabId;
this.selectedActiveTab.emit(tab.tabId);
}
}