Skip to content

Commit 0039b05

Browse files
rmkrmkgedinakova
rmkrmk
authored and
gedinakova
committed
IgxTabs/IgxBottonNav support of tab items definition (#4787)
* feat(bottomNav): adding support for defining tabs instead of panels #4297 * feat(bottomNav): adding sample for bottomNav routing #4297 * feat(tabs): adding support for defining tabs and a dev demo #4297 * chore(bottom-nav): removing a redundant code from a sample #4297 * chore(bottomnav): simplifying IF statements #4297 * test(bootomNav): adding tests for tabItem definition support #4297 * feat(bottomNav/Tabs): changing properties names #4297 * test(bottomNav): fixing a broken test #4297 * feat(bottomNav/tabs): changing the approach how tabs are arranged #4297 * feat(tabs/bottomNav): addressing suggestions #4297 * feat(tabs/bottomNav): making the dev demos more distinct #4297 * feat(tabs): removing unused code and fixes #4297 * feat(tabs/bottomNav): addressing more issues and suggestions #4297 * feat(tabs): fixing selection indicator visibility #4297 * feat(tabs/bottomNav): addressing issues #4297 * test(tabs/bottomNav): extracting routing tests in separate describes #4297 * feat(tabs/bottomNav): return icon and label from relatedPanel #4297 * feat(tabs/bottomNav): template support for tab items #4297 * test(tabs/bottomNav): renaming test components files #4297 * feat(tabs/bottomNav): moving aria attributes to code (instead of template) #4297 * test(tabs/bottomNav): adding test for checking initial selection #4297 * test(tabs/bottomNav): fdescribe -> describe #4297 * feat(tabs/bottomNav): fixing the components and samples to work with ng8 #4297 * test(bottomNav): adding test for selected tab when no active link set #4297 * feat(bottomNav): moving click event from template to component code #4297 * test(tabs/bottomNav): optimizing tests #4297 * feat(tabs): fixing tab-only mode selection #4297 * test(tabs): extracting strings into constants #4297 * feat(bottomNav): fixing blue highlight when a tab is selected #4297 * test(bottomNav): increasing code coverage #4297 * test(tabs): increasing code coverage #4297 * feat(tabs/bootomNav): updating the CHANGELOG.md file #4297 * fix(tabs): fixing components' names in the CHANGELOG.md #4297 * feat(tabs/bottomNav): updating release version in CHANGELOG.md #4297 * fix(tabs/bottomNav): fixing the dev demos description #4297 * test(tabs): adding tests for initial selection #4297 * fix(tabs): fixing selection issues #4297 * feat(tabs): simplifying dev demos #4297 * test(tabs/bottomNav): reworking tests to have shared code in beforeEach #4297
1 parent f18f0d4 commit 0039b05

30 files changed

+2118
-558
lines changed

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@
22

33
All notable changes for each version of this project will be documented in this file.
44

5+
## 8.1.0
6+
7+
### New Features
8+
- `IgxBottomNav` now supports an `igx-tab` declaration mode. When in this mode, panels declarations are not accepted and tab items' content is not rendered.
9+
- You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
10+
- You are allowed to customize tab items with labels, icons and even templates.
11+
- `IgxTabs` now supports an `igx-tab-item` declaration mode. When in this mode, groups declarations are not accepted and tab items' content is not rendered.
12+
- You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
13+
- You are allowed to customize tab items with labels, icons and even templates.
14+
515
## 8.0.2
616
- `igx-list-theme` now have some new parameters for styling.
717
- $item-background-hover - Change The list item hover background

‎projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

+1
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,7 @@
131131
overflow: hidden;
132132
padding: $item-padding;
133133
-webkit-tap-highlight-color: transparent;
134+
outline: 0;
134135
}
135136

136137
%igx-bottom-nav-menu-item--disabled {

‎projects/igniteui-angular/src/lib/tabbar/routing-view-components.spec.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component, NgModule } from '@angular/core';
2+
3+
@Component({
4+
template: `This is a content from view component # 1`
5+
})
6+
export class BottomNavRoutingView1Component {
7+
}
8+
9+
@Component({
10+
template: `This is a content from view component # 2`
11+
})
12+
export class BottomNavRoutingView2Component {
13+
}
14+
15+
@Component({
16+
template: `This is a content from view component # 3`
17+
})
18+
export class BottomNavRoutingView3Component {
19+
}
20+
21+
/**
22+
* @hidden
23+
*/
24+
@NgModule({
25+
declarations: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component],
26+
exports: [BottomNavRoutingView1Component, BottomNavRoutingView2Component, BottomNavRoutingView3Component],
27+
})
28+
export class BottomNavRoutingViewComponentsModule {
29+
}

‎projects/igniteui-angular/src/lib/tabbar/tab-bar-content.component.html

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
<div>
1+
<div *ngIf="!hasContentTabs">
22
<ng-content></ng-content>
33
</div>
44
<div #tablist class="{{itemStyle}}__menu {{itemStyle}}__menu--bottom" role="tablist" aria-orientation="horizontal">
5-
<igx-tab *ngFor="let panel of panels" [id]="'igx-tab-' + panel.index" [attr.aria-label]="panel.label" [attr.aria-disabled]="panel.disabled"
6-
[attr.aria-selected]="panel.isSelected" [attr.aria-controls]="'igx-tab-panel-'+ panel.index" [ngClass]="{
7-
'igx-bottom-nav__menu-item': !panel.isSelected && !panel.disabled,
8-
'igx-bottom-nav__menu-item--selected': panel.isSelected,
9-
'igx-bottom-nav__menu-item--disabled': panel.disabled
10-
}" [relatedPanel]="panel" (click)="panel.select()" role="tab">
11-
</igx-tab>
12-
</div>
5+
<ng-container *ngIf="!hasContentTabs">
6+
<igx-tab *ngFor="let panel of panels" [relatedPanel]="panel">
7+
</igx-tab>
8+
</ng-container>
9+
<ng-content select="igx-tab"></ng-content>
10+
</div>

‎projects/igniteui-angular/src/lib/tabbar/tab.component.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
<ng-template #defaultTabTemplate>
2-
<div *ngIf="relatedPanel.icon" class="tab-icon">
3-
<igx-icon fontSet="material">{{relatedPanel.icon}}</igx-icon>
4-
<igx-badge [value]="changesCount" [hidden]="changesCount === 0"></igx-badge>
1+
<ng-template #defaultTabTemplate let-context>
2+
<div *ngIf="context.icon" class="tab-icon">
3+
<igx-icon fontSet="material">{{context.icon}}</igx-icon>
4+
<igx-badge [value]="context.changesCount" [hidden]="context.changesCount === 0"></igx-badge>
55
</div>
6-
<div *ngIf="relatedPanel.label" ngClass="tab-label">{{relatedPanel.label}}</div>
6+
<div *ngIf="context.label" ngClass="tab-label">{{context.label}}</div>
77
</ng-template>
8-
<ng-container *ngTemplateOutlet="relatedPanel.customTabTemplate ? relatedPanel.customTabTemplate : defaultTabTemplate; context: { $implicit: relatedPanel }">
8+
<ng-container *ngTemplateOutlet="template; context: { $implicit: this.context }">
99
</ng-container>

0 commit comments

Comments
 (0)