Skip to content

chore(tabs): revise examples and demo #11712

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 8, 2018
Merged

chore(tabs): revise examples and demo #11712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 1 addition & 11 deletions src/demo-app/demo-app/demo-module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,13 +55,7 @@ import {SliderDemo} from '../slider/slider-demo';
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
import {StepperDemo} from '../stepper/stepper-demo';
import {TableDemoModule} from '../table/table-demo-module';
import {
Counter,
FoggyTabContent,
RainyTabContent,
SunnyTabContent,
TabsDemo
} from '../tabs/tabs-demo';
import {TabsDemo} from '../tabs/tabs-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
import {TreeDemoModule} from '../tree/tree-demo-module';
Expand Down Expand Up @@ -96,7 +90,6 @@ import {DEMO_APP_ROUTES} from './routes';
ChipsDemo,
ConnectedOverlayDemo,
ContentElementDialog,
Counter,
CustomHeader,
DatepickerDemo,
DemoApp,
Expand All @@ -105,7 +98,6 @@ import {DEMO_APP_ROUTES} from './routes';
ExampleBottomSheet,
ExpansionDemo,
FocusOriginDemo,
FoggyTabContent,
GesturesDemo,
GridListDemo,
Home,
Expand All @@ -123,7 +115,6 @@ import {DEMO_APP_ROUTES} from './routes';
ProgressBarDemo,
ProgressSpinnerDemo,
RadioDemo,
RainyTabContent,
RippleDemo,
ScienceJoke,
ScreenTypeDemo,
Expand All @@ -133,7 +124,6 @@ import {DEMO_APP_ROUTES} from './routes';
SliderDemo,
SnackBarDemo,
StepperDemo,
SunnyTabContent,
TabsDemo,
ToolbarDemo,
TooltipDemo,
Expand Down
3 changes: 1 addition & 2 deletions src/demo-app/demo-app/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
import {SliderDemo} from '../slider/slider-demo';
import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
import {StepperDemo} from '../stepper/stepper-demo';
import {TABS_DEMO_ROUTES} from '../tabs/routes';
import {TabsDemo} from '../tabs/tabs-demo';
import {ToolbarDemo} from '../toolbar/toolbar-demo';
import {TooltipDemo} from '../tooltip/tooltip-demo';
Expand Down Expand Up @@ -95,7 +94,7 @@ export const DEMO_APP_ROUTES: Routes = [
{path: 'snack-bar', component: SnackBarDemo},
{path: 'stepper', component: StepperDemo},
{path: 'table', component: TableDemo},
{path: 'tabs', component: TabsDemo, children: TABS_DEMO_ROUTES},
{path: 'tabs', component: TabsDemo},
{path: 'toolbar', component: ToolbarDemo},
{path: 'tooltip', component: TooltipDemo},
{path: 'tree', component: TreeDemo},
Expand Down
18 changes: 0 additions & 18 deletions src/demo-app/tabs/routes.ts
View file
Open in desktop

This file was deleted.

313 changes: 1 addition & 312 deletions src/demo-app/tabs/tabs-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,312 +1 @@
<h1>Tab Nav Bar</h1>

<button mat-button (click)="tabLinks.shift()">Remove tab</button>
<button mat-button (click)="swapTabLinks()">Swap first two</button>
<button mat-button (click)="addToLabel()">Add to labels</button>
<button mat-button (click)="toggleBackground()">Toggle background</button>

<div class="demo-nav-bar">
<nav mat-tab-nav-bar aria-label="weather navigation links" [backgroundColor]="tabNavBackground">
<a mat-tab-link
*ngFor="let tabLink of tabLinks; let i = index"
[routerLink]="tabLink.link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{tabLink.label}}
</a>
<a mat-tab-link disabled>Disabled Link</a>
</nav>
<router-outlet></router-outlet>
</div>


<h1>Tab Group Demo - Dynamic Tabs</h1>

<div>
Selected tab index:
<mat-form-field>
<input matInput type="number" [(ngModel)]="activeTabIndex">
</mat-form-field>
</div>

<div class="demo-dynamic-tabs">
<mat-card>
<mat-card-title>Add New Tab</mat-card-title>
<mat-card-content>
<mat-checkbox [(ngModel)]="createWithLongContent">
Include extra content
</mat-checkbox>
<mat-checkbox [(ngModel)]="gotoNewTabAfterAdding">
Select after adding
</mat-checkbox>
<div>
Position:
<mat-form-field>
<input matInput type="number" [(ngModel)]="addTabPosition">
</mat-form-field>
</div>
<button mat-raised-button color="primary"
(click)="addTab(createWithLongContent)">
Add
</button>
</mat-card-content>
</mat-card>

<mat-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
<mat-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
<ng-template mat-tab-label>{{tab.label}}</ng-template>
<div class="demo-tab-content">
{{tab.content}}
<br>
<br>
<div *ngIf="tab.extraContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
orci posuere, nec luctus mauris semper.
<br>
<br>
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
<br>
<br>
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
</div>
<br>
<br>
<mat-form-field>
<mat-label>Tab label</mat-label>
<input matInput [(ngModel)]="tab.label">
</mat-form-field>
<br><br>
<button mat-raised-button
[disabled]="dynamicTabs.length === 1"
(click)="deleteTab(tab)">
Delete Tab
</button>
</div>
</mat-tab>
</mat-tab-group>
</div>

<h1>Tab Group Demo - Dynamic Height</h1>

<mat-tab-group class="demo-tab-group" dynamicHeight>
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
<ng-template mat-tab-label>{{tab.label}}</ng-template>
<div class="demo-tab-content">
{{tab.content}}
<br>
<br>
<div *ngIf="tab.extraContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
orci posuere, nec luctus mauris semper.
<br>
<br>
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
<br>
<br>
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
</div>
<br>
<br>
<mat-form-field>
<mat-label>Tab label</mat-label>
<input matInput [(ngModel)]="tab.label">
</mat-form-field>
</div>
</mat-tab>
</mat-tab-group>


<h1>Tab Group Demo - Fixed Height</h1>

<mat-tab-group class="demo-tab-group" style="height: 220px">
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
<ng-template mat-tab-label>{{tab.label}}</ng-template>
<div class="demo-tab-content">
{{tab.content}}
<br>
<br>
<div *ngIf="tab.extraContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
orci enim rutrum enim, vel tempor sapien arcu a tellus. Vivamus convallis sodales ante varius
gravida. Curabitur a purus vel augue ultrices ultricies id a nisl. Nullam malesuada consequat
diam, a facilisis tortor volutpat et. Sed urna dolor, aliquet vitae posuere vulputate, euismod
ac lorem. Sed felis risus, pulvinar at interdum quis, vehicula sed odio. Phasellus in enim
venenatis, iaculis tortor eu, bibendum ante. Donec ac tellus dictum neque volutpat blandit.
Praesent efficitur faucibus risus, ac auctor purus porttitor vitae. Phasellus ornare dui nec
orci posuere, nec luctus mauris semper.
<br>
<br>
Morbi viverra, ante vel aliquet tincidunt, leo dolor pharetra quam, at semper massa orci nec
magna. Donec posuere nec sapien sed laoreet. Etiam cursus nunc in condimentum facilisis.
Etiam in tempor tortor. Vivamus faucibus egestas enim, at convallis diam pulvinar vel.
Cras ac orci eget nisi maximus cursus. Nunc urna libero, viverra sit amet nisl at, hendrerit
tempor turpis. Maecenas facilisis convallis mi vel tempor. Nullam vitae nunc leo. Cras sed
nisl consectetur, rhoncus sapien sit amet, tempus sapien.
<br>
<br>
Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere
molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat,
at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est.
Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.
</div>
<br>
<br>
<mat-form-field>
<mat-label>Tab label</mat-label>
<input matInput [(ngModel)]="tab.label">
</mat-form-field>
</div>
</mat-tab>
</mat-tab-group>

<h1>Stretched Tabs</h1>

<mat-tab-group class="demo-tab-group" style="height: 200px" mat-stretch-tabs>
<mat-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
<ng-template mat-tab-label>{{tab.label}}</ng-template>
<div class="demo-tab-content">
{{tab.content}}
</div>
</mat-tab>
</mat-tab-group>


<h1>Async Tabs</h1>

<mat-tab-group class="demo-tab-group">
<mat-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i === 1">
<ng-template mat-tab-label>{{tab.label}}</ng-template>

<div class="demo-tab-content">
{{tab.content}}
<br>
<br>
<br>
<mat-form-field>
<mat-label>Tab label</mat-label>
<input matInput [(ngModel)]="tab.label">
</mat-form-field>
</div>
</mat-tab>
</mat-tab-group>

<!-- Simple tabs api -->
<h1>Tabs with simplified api</h1>
<mat-tab-group class="demo-tab-group">
<mat-tab label="Earth">
<div class="demo-tab-content">
This tab is about the Earth!
</div>
</mat-tab>
<mat-tab label="Fire">
This tab is about combustion!
</mat-tab>
</mat-tab-group>

<h1>Inverted tabs</h1>
<mat-tab-group class="demo-tab-group" headerPosition="below">
<mat-tab label="Earth">
<div class="demo-tab-content">
This tab is about the Earth!
</div>
</mat-tab>
<mat-tab label="Fire">
<div class="demo-tab-content">
This tab is about combustion!
</div>
</mat-tab>
</mat-tab-group>

<h1>Accent tabs</h1>
<mat-tab-group class="demo-tab-group" color="accent">
<mat-tab label="Earth">
<div class="demo-tab-content">
This tab is about the Earth!
</div>
</mat-tab>
<mat-tab label="Fire">
<div class="demo-tab-content">
This tab is about combustion!
</div>
</mat-tab>
</mat-tab-group>

<h1>Tabs with background color</h1>
<mat-tab-group class="demo-tab-group" backgroundColor="primary" color="accent">
<mat-tab label="Earth">
<div class="demo-tab-content">
This tab is about the Earth!
</div>
</mat-tab>
<mat-tab label="Fire">
<div class="demo-tab-content">
This tab is about combustion!
</div>
</mat-tab>
</mat-tab-group>

<h1>Tabs with autosize textarea</h1>
<mat-tab-group class="demo-tab-group">
<mat-tab label="Tab 1">
<div class="demo-tab-content">
<mat-form-field>
<mat-label>Autosize textarea</mat-label>
<textarea matInput cdkTextareaAutosize>This is an autosize textarea, it should adjust to the size of its content.</textarea>
</mat-form-field>
</div>
</mat-tab>
</mat-tab-group>

<h1>Lazy Loaded Tabs</h1>
<mat-tab-group>
<mat-tab label="First">
<ng-template matTabContent>
<counter></counter>
</ng-template>
</mat-tab>
<mat-tab label="Second">
<ng-template matTabContent>
<counter></counter>
</ng-template>
</mat-tab>
<mat-tab label="Third">
<counter></counter>
</mat-tab>
</mat-tab-group>
<material-example-list [ids]="examples"></material-example-list>
Loading