2020-05-18 14:37:52 +02:00
|
|
|
/**
|
|
|
|
* A single tab page. It renders the passed template
|
|
|
|
* via the @Input properties by using the ngTemplateOutlet
|
|
|
|
* and ngTemplateOutletContext directives.
|
|
|
|
*/
|
|
|
|
|
|
|
|
import { Component, Input } from '@angular/core';
|
|
|
|
|
2022-01-21 14:40:30 +01:00
|
|
|
export interface TabIcon {
|
|
|
|
svg: string;
|
|
|
|
ratio: number;
|
|
|
|
fill: string;
|
|
|
|
}
|
|
|
|
|
2020-05-18 14:37:52 +02:00
|
|
|
@Component({
|
|
|
|
selector: 'my-tab',
|
|
|
|
// styles: [
|
|
|
|
// `
|
|
|
|
// .pane{
|
|
|
|
// padding: 1em;
|
|
|
|
// }
|
|
|
|
// `
|
|
|
|
// ],
|
|
|
|
template: `
|
|
|
|
<!-- [class]="active ? 'uk-active' : ''" [hidden]="!active"-->
|
|
|
|
<!-- <div [class]="active ? 'uk-active' : ''" [hidden]="!active">-->
|
2020-05-25 20:58:13 +02:00
|
|
|
<div class="pane">
|
2020-05-18 14:37:52 +02:00
|
|
|
<ng-content></ng-content>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- <div [hidden]="!active" class="pane">-->
|
|
|
|
<!-- <ng-content></ng-content>-->
|
|
|
|
<!-- </div>-->
|
|
|
|
`
|
|
|
|
})
|
|
|
|
export class TabComponent {
|
|
|
|
@Input('tabTitle') title: string;
|
|
|
|
@Input('tabNumber') num: number;
|
2021-04-08 12:50:11 +02:00
|
|
|
@Input('customClass') customClass:string = "";
|
2020-05-18 14:37:52 +02:00
|
|
|
@Input('tabId') tabId: string;
|
2022-01-21 14:40:30 +01:00
|
|
|
@Input('tabIcon') tabIcon: TabIcon;
|
2020-05-18 14:37:52 +02:00
|
|
|
}
|