Skip to content
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

Jump to bottom

fix(tabs): set tab body content to 100% #3162

Merged
merged 3 commits into from
Feb 27, 2017
Merged

fix(tabs): set tab body content to 100% #3162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0416a3d
fix(tabs): set tab body content to 100%
andrewseguin Feb 17, 2017
fbc1b3e
add new lines
andrewseguin Feb 17, 2017
85fa5eb
fix padding
andrewseguin Feb 24, 2017
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
199 changes: 108 additions & 91 deletions src/demo-app/tabs/tabs-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,59 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
<md-tab-group class="demo-tab-group" dynamicHeight [(selectedIndex)]="activeTabIndex">
<md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
<template md-tab-label>{{tab.label}}</template>
<div class="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>
<md-input-container>
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
</md-input-container>
<br><br>
<button md-raised-button
[disabled]="dynamicTabs.length == 1"
(click)="deleteTab(tab)">
Delete Tab
</button>
</div>
</md-tab>
</md-tab-group>
</div>

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

<md-tab-group class="demo-tab-group" dynamicHeight>
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
<template md-tab-label>{{tab.label}}</template>
<div class="tab-content">
{{tab.content}}
<br>
<br>
Expand Down Expand Up @@ -84,100 +137,53 @@ <h1>Tab Group Demo - Dynamic Tabs</h1>
<md-input-container>
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
</md-input-container>
<br><br>
<button md-raised-button
[disabled]="dynamicTabs.length == 1"
(click)="deleteTab(tab)">
Delete Tab
</button>
</md-tab>
</md-tab-group>
</div>

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

<md-tab-group class="demo-tab-group" dynamicHeight>
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
<template md-tab-label>{{tab.label}}</template>
{{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>
<md-input-container>
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
</md-input-container>
</md-tab>
</md-tab-group>


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

<md-tab-group class="demo-tab-group" style="height: 200px">
<md-tab-group class="demo-tab-group" style="height: 220px">
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
<template md-tab-label>{{tab.label}}</template>
{{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.
<div class="tab-content">
{{tab.content}}
<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.
<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>
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.
<md-input-container>
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
</md-input-container>
</div>
<br>
<br>
<md-input-container>
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
</md-input-container>
</md-tab>
</md-tab-group>

Expand All @@ -186,7 +192,9 @@ <h1>Stretched Tabs</h1>
<md-tab-group class="demo-tab-group" style="height: 200px" md-stretch-tabs>
<md-tab *ngFor="let tab of tabs" [disabled]="tab.disabled">
<template md-tab-label>{{tab.label}}</template>
{{tab.content}}
<div class="tab-content">
{{tab.content}}
</div>
</md-tab>
</md-tab-group>

Expand All @@ -196,21 +204,26 @@ <h1>Async Tabs</h1>
<md-tab-group class="demo-tab-group">
<md-tab *ngFor="let tab of asyncTabs | async; let i = index" [disabled]="i == 1">
<template md-tab-label>{{tab.label}}</template>
{{tab.content}}
<br>
<br>
<br>
<md-input-container>
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
</md-input-container>

<div class="tab-content">
{{tab.content}}
<br>
<br>
<br>
<md-input-container>
<input mdInput placeholder="Tab Label" [(ngModel)]="tab.label">
</md-input-container>
</div>
</md-tab>
</md-tab-group>

<!-- Simple tabs api -->
<h1>Tabs with simplified api</h1>
<md-tab-group class="demo-tab-group">
<md-tab label="Earth">
This tab is about the Earth!
<div class="tab-content">
This tab is about the Earth!
</div>
</md-tab>
<md-tab label="Fire">
This tab is about combustion!
Expand All @@ -220,9 +233,13 @@ <h1>Tabs with simplified api</h1>
<h1>Inverted tabs</h1>
<md-tab-group class="demo-tab-group" headerPosition="below">
<md-tab label="Earth">
This tab is about the Earth!
<div class="tab-content">
This tab is about the Earth!
</div>
</md-tab>
<md-tab label="Fire">
This tab is about combustion!
<div class="tab-content">
This tab is about combustion!
</div>
</md-tab>
</md-tab-group>
8 changes: 5 additions & 3 deletions src/demo-app/tabs/tabs-demo.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,10 @@
.demo-tab-group {
border: 1px solid #e0e0e0;
margin-bottom: 40px;
flex-grow: 1;
.mat-tab-header {
background: #f9f9f9;
}
.mat-tab-body-content {
padding: 12px;
}
}

tabs-demo .mat-card {
Expand Down Expand Up @@ -56,3 +54,7 @@ tabs-demo .mat-card {
}
}
}

.tab-content {
padding: 16px;
}
3 changes: 3 additions & 0 deletions src/lib/tabs/tab-body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.mat-tab-body-content {
height: 100%;
}
1 change: 1 addition & 0 deletions src/lib/tabs/tab-body.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
moduleId: module.id,
selector: 'md-tab-body, mat-tab-body',
templateUrl: 'tab-body.html',
styleUrls: ['tab-body.css'],
host: {
'[class.mat-tab-body]': 'true',
},
Expand Down