Skip to content

Commit

Permalink
Fixed #3018 - Custom content support for TabMenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@cagataycivici
cagataycivici committed Jan 3, 2019
1 parent a078065 commit 937882b
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 16 deletions.
39 changes: 32 additions & 7 deletions src/app/components/tabmenu/tabmenu.ts
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,42 @@
import {NgModule,Component,ElementRef,Input,Output} from '@angular/core';
import {NgModule,Component,Input,ContentChildren,QueryList,AfterContentInit,TemplateRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {DomHandler} from '../dom/domhandler';
import {MenuItem} from '../common/menuitem';
import {PrimeTemplate} from '../common/shared';
import {RouterModule} from '@angular/router';

@Component({
selector: 'p-tabMenu',
template: `
<div [ngClass]="'ui-tabmenu ui-widget ui-widget-content ui-corner-all'" [ngStyle]="style" [class]="styleClass">
<ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
<li *ngFor="let item of model"
<li *ngFor="let item of model; let i = index"
[ngClass]="{'ui-tabmenuitem ui-state-default ui-corner-top':true,'ui-state-disabled':item.disabled,
'ui-tabmenuitem-hasicon':item.icon,'ui-state-active':activeItem==item,'ui-helper-hidden': item.visible === false}"
[routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}">
<a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" (click)="itemClick($event,item)"
[attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id">
<span class="ui-menuitem-icon " [ngClass]="item.icon" *ngIf="item.icon"></span>
<span class="ui-menuitem-text">{{item.label}}</span>
<ng-container *ngIf="!itemTemplate">
<span class="ui-menuitem-icon " [ngClass]="item.icon" *ngIf="item.icon"></span>
<span class="ui-menuitem-text">{{item.label}}</span>
</ng-container>
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
</a>
<a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" class="ui-menuitem-link ui-corner-all" (click)="itemClick($event,item)"
[attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id">
<span class="ui-menuitem-icon " [ngClass]="item.icon" *ngIf="item.icon"></span>
<span class="ui-menuitem-text">{{item.label}}</span>
<ng-container *ngIf="!itemTemplate">
<span class="ui-menuitem-icon " [ngClass]="item.icon" *ngIf="item.icon"></span>
<span class="ui-menuitem-text">{{item.label}}</span>
</ng-container>
<ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item, index: i}"></ng-container>
</a>
</li>
</ul>
</div>
`,
providers: [DomHandler]
})
export class TabMenu {
export class TabMenu implements AfterContentInit {

@Input() model: MenuItem[];

Expand All @@ -41,6 +48,24 @@ export class TabMenu {

@Input() styleClass: string;

@ContentChildren(PrimeTemplate) templates: QueryList<any>;

itemTemplate: TemplateRef<any>;

ngAfterContentInit() {
this.templates.forEach((item) => {
switch(item.getType()) {
case 'item':
this.itemTemplate = item.template;
break;

default:
this.itemTemplate = item.template;
break;
}
});
}

itemClick(event: Event, item: MenuItem) {
if(item.disabled) {
event.preventDefault();
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/tabview/tabview.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import {NgModule,Component,ElementRef,OnDestroy,Input,Output,EventEmitter,HostListener,AfterContentInit,
ContentChildren,ContentChild,QueryList,TemplateRef,EmbeddedViewRef,ViewContainerRef} from '@angular/core';
import {NgModule,Component,ElementRef,OnDestroy,Input,Output,EventEmitter,AfterContentInit,
ContentChildren,QueryList,TemplateRef,EmbeddedViewRef,ViewContainerRef} from '@angular/core';
import {CommonModule} from '@angular/common';
import {TooltipModule} from '../tooltip/tooltip';
import {SharedModule,PrimeTemplate} from '../common/shared';
Expand Down
74 changes: 69 additions & 5 deletions src/app/showcase/components/tabmenu/tabmenudemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,23 @@
</div>

<div class="content-section implementation">
<p-tabMenu [model]="items" [activeItem]="items[0]"></p-tabMenu>
<h3 class="first">Default</h3>
<p-tabMenu [model]="items1" [activeItem]="items1[0]"></p-tabMenu>

<h3>Templating</h3>
<p-tabMenu [model]="items2" [activeItem]="activeItem">
<ng-template pTemplate="item" let-item let-i="index">
<div style="position: relative; text-align: center; min-width: 10em">
<div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"></div>
<div class="ui-menuitem-text">
{{item.label}}
</div>
<a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0">
<span class="pi pi-times"></span>
</a>
</div>
</ng-template>
</p-tabMenu>
</div>

<div class="content-section documentation">
Expand Down Expand Up @@ -51,7 +67,7 @@ <h3>Getting Started</h3>
</pre>

<h3>ActiveItem</h3>
<p>By defaulttem item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.</p>
<p>By default item that matches the active route is highlighted, alternatively activeItem property can be used choose the initial active item.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-tabMenu [model]="items" [activeItem]="items[0]"&gt;&lt;/p-tabMenu&gt;
Expand Down Expand Up @@ -79,6 +95,18 @@ <h3>ActiveItem</h3>
&#125;
&#125;
</code>
</pre>

<h3>Templating</h3>
<p>Menuitem content supports templating via the "item" template which gets the menuitem instance and the index.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
&lt;p-tabMenu [model]="items"&gt;
&lt;ng-template pTemplate="item" let-item let-i="index"&gt;
//item content
&lt;/ng-template&gt;
&lt;/p-tabMenu&gt;
</code>
</pre>

<h3>Properties</h3>
Expand Down Expand Up @@ -171,25 +199,61 @@ <h3>Dependencies</h3>
</a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-tabMenu [model]="items"&gt;&lt;/p-tabMenu&gt;
&lt;h3 class="first"&gt;Default&lt;/h3&gt;
&lt;p-tabMenu [model]="items1" [activeItem]="items1[0]"&gt;&lt;/p-tabMenu&gt;

&lt;h3&gt;Templating&lt;/h3&gt;
&lt;p-tabMenu [model]="items2" [activeItem]="activeItem"&gt;
&lt;ng-template pTemplate="item" let-item let-i="index"&gt;
&lt;div style="position: relative; text-align: center; min-width: 10em"&gt;
&lt;div class="ui-menuitem-icon" [ngClass]="item.icon" *ngIf="item.icon" style="font-size: 2em"&gt;&lt;/div&gt;
&lt;div class="ui-menuitem-text"&gt;
&#123;&#123;item.label&#125;&#125;
&lt;/div&gt;
&lt;a tabindex="0" class="ui-menuitem-icon" (click)="closeItem($event, i)" style="position: absolute; right: -1em; top: -.5em; padding: 0" *ngIf="i !== 0"&gt;
&lt;span class="pi pi-times"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/ng-template&gt;
&lt;/p-tabMenu&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class TabMenuDemo &#123;

items: MenuItem[];
items1: MenuItem[];

items2: MenuItem[];

activeItem: MenuItem;

ngOnInit() &#123;
this.items = [
this.items1 = [
&#123;label: 'Stats', icon: 'fa fa-fw fa-bar-chart'&#125;,
&#123;label: 'Calendar', icon: 'fa fa-fw fa-calendar'&#125;,
&#123;label: 'Documentation', icon: 'fa fa-fw fa-book'&#125;,
&#123;label: 'Support', icon: 'fa fa-fw fa-support'&#125;,
&#123;label: 'Social', icon: 'fa fa-fw fa-twitter'&#125;
];

this.items2 = [
&#123;label: 'Stats', icon: 'fa fa-fw fa-bar-chart'&#125;,
&#123;label: 'Calendar', icon: 'fa fa-fw fa-calendar'&#125;,
&#123;label: 'Documentation', icon: 'fa fa-fw fa-book'&#125;,
&#123;label: 'Support', icon: 'fa fa-fw fa-support'&#125;,
&#123;label: 'Social', icon: 'fa fa-fw fa-twitter'&#125;
];

this.activeItem = this.items2[0];
&#125;

closeItem(event, index) &#123;
this.items2 = this.items2.filter((item, i) => i !== index);
event.preventDefault();
&#125;

&#125;
</code>
</pre>
Expand Down
23 changes: 21 additions & 2 deletions src/app/showcase/components/tabmenu/tabmenudemo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,34 @@ import {MenuItem} from '../../../components/common/api';
})
export class TabMenuDemo {

items: MenuItem[];
items1: MenuItem[];

items2: MenuItem[];

activeItem: MenuItem;

ngOnInit() {
this.items = [
this.items1 = [
{label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa fa-fw fa-book'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Social', icon: 'fa fa-fw fa-twitter'}
];

this.items2 = [
{label: 'Stats', icon: 'fa fa-fw fa-bar-chart'},
{label: 'Calendar', icon: 'fa fa-fw fa-calendar'},
{label: 'Documentation', icon: 'fa fa-fw fa-book'},
{label: 'Support', icon: 'fa fa-fw fa-support'},
{label: 'Social', icon: 'fa fa-fw fa-twitter'}
];

this.activeItem = this.items2[0];
}

closeItem(event, index) {
this.items2 = this.items2.filter((item, i) => i !== index);
event.preventDefault();
}
}

0 comments on commit 937882b

Please sign in to comment.