Skip to content

feat(tabs): paginate tab header when exceeds width #2084

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 22 commits into from
Dec 8, 2016
Merged

feat(tabs): paginate tab header when exceeds width #2084

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
56090b9
initial implementation of scrolling
andrewseguin Nov 30, 2016
1e42bd3
add scrolling when clicking on tab
andrewseguin Dec 1, 2016
dc6f6d5
fix rtl
andrewseguin Dec 1, 2016
4c4363d
create component for header
andrewseguin Dec 1, 2016
4a32f5e
rebase
andrewseguin Dec 2, 2016
528c9b8
support stretch
andrewseguin Dec 2, 2016
15f710c
do not focus() the selected index
andrewseguin Dec 5, 2016
846de6e
be sure to scroll to selected index after view
andrewseguin Dec 5, 2016
4df4bb0
be sure to scroll to selected index after view coment
andrewseguin Dec 5, 2016
6713684
fix tests
andrewseguin Dec 5, 2016
4431434
cleanup dynamic tab demo
andrewseguin Dec 5, 2016
c1d6f82
fix tests, make Dir optional
andrewseguin Dec 5, 2016
b9ff83f
remove Dir import in spec
andrewseguin Dec 5, 2016
565a6db
restore html
andrewseguin Dec 5, 2016
b45f9bc
remove index to focus
andrewseguin Dec 5, 2016
d85dbee
reduce the amount of layout reflows
andrewseguin Dec 6, 2016
61ab3d0
fix test for IE/Safari by using minwidth
andrewseguin Dec 7, 2016
e2ff7c2
fix lint
andrewseguin Dec 7, 2016
6cd6d34
remove internal TODO comment
andrewseguin Dec 7, 2016
1b29725
remove private on functions/variables used in template
andrewseguin Dec 8, 2016
c6a259b
fix tests for latest ripple changes
andrewseguin Dec 8, 2016
9d743f6
remove double quotes
andrewseguin Dec 8, 2016
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
127 changes: 65 additions & 62 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 @@ -16,76 +16,79 @@ <h1>Tab Nav Bar</h1>

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

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

<div>
Selected tab index:
<md-input type="number" [(ngModel)]="activeTabIndex"></md-input>
</div>
<md-tab-group class="demo-tab-group"
md-dynamic-height
[(selectedIndex)]="activeTabIndex">
<md-tab *ngFor="let tab of dynamicTabs" [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="demo-dynamic-tabs">
<md-card>
<md-card-title>Add New Tab</md-card-title>
<md-card-content>
<md-checkbox [(ngModel)]="createWithLongContent">
Include extra content
</md-checkbox>
<md-checkbox [(ngModel)]="gotoNewTabAfterAdding">
Select after adding
</md-checkbox>
<div>
Position:
<md-input type="number" [(ngModel)]="addTabPosition"></md-input>
</div>
<button md-raised-button color="primary"
(click)="addTab(createWithLongContent)">
Add
</button>
</md-card-content>
</md-card>

<md-tab-group class="demo-tab-group"
md-dynamic-height
[(selectedIndex)]="activeTabIndex">
<md-tab *ngFor="let tab of dynamicTabs" [disabled]="tab.disabled">
<template md-tab-label>{{tab.label}}</template>
{{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.
</div>
<br>
<br>
<md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
<br><br>
<button md-raised-button
[disabled]="dynamicTabs.length == 1"
(click)="deleteTab(tab)">
Delete Tab
</button>
</md-tab>
</md-tab-group>
<md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
<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>

Expand Down
33 changes: 25 additions & 8 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 @@ -26,16 +26,33 @@
tabs-demo md-card {
width: 160px;

md-checkbox {
display: block;
margin-top: 8px;
}
}

.demo-dynamic-tabs {
display: flex;
width: 100%;

md-input {
width: 100px;
md-tab-group {
min-width: 200px;
margin-bottom: 0;
flex-grow: 1;
}

button {
width: 100%;
md-card {
min-width: 160px;
margin-right: 16px;

md-checkbox {
display: block;
margin-top: 8px;
}

md-input {
width: 100px;
}

button {
width: 100%;
}
}
}
6 changes: 3 additions & 3 deletions src/e2e-app/tabs/tabs-e2e.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@
<md-tab-group>
<md-tab>
<template md-tab-label>One</template>
<template md-tab-content>First tab's content</template>
First tab's content
</md-tab>
<md-tab>
<template md-tab-label>Two</template>
<template md-tab-content>Second tab's content</template>
Second tab's content
</md-tab>
<md-tab>
<template md-tab-label>Three</template>
<template md-tab-content>Third tab's content</template>
Third tab's content
</md-tab>
</md-tab-group>
</section>
13 changes: 7 additions & 6 deletions src/lib/tabs/tab-group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
<div class="md-tab-header" role="tablist"
(keydown)="handleKeydown($event)">
<md-tab-header [selectedIndex]="selectedIndex" #tabHeader
(indexFocused)="_focusChanged($event)"
(selectFocusedIndex)="selectedIndex = $event">
<div class="md-tab-label" role="tab" md-tab-label-wrapper md-ripple
*ngFor="let tab of _tabs; let i = index"
[id]="_getTabLabelId(i)"
[tabIndex]="selectedIndex == i ? 0 : -1"
[attr.aria-controls]="_getTabContentId(i)"
[attr.aria-selected]="selectedIndex == i"
[class.md-tab-label-active]="selectedIndex == i"
[class.md-tab-disabled]="tab.disabled"
(click)="focusIndex = selectedIndex = i">
[disabled]="tab.disabled"
(click)="tabHeader.focusIndex = selectedIndex = i">

<!-- If there is a label template, use it. -->
<template [ngIf]="tab.templateLabel">
Expand All @@ -18,8 +19,8 @@
<!-- If there is not a label template, fall back to the text label. -->
<template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</template>
</div>
<md-ink-bar></md-ink-bar>
</div>
</md-tab-header>

<div class="md-tab-body-wrapper" #tabBodyWrapper>
<md-tab-body role="tabpanel"
*ngFor="let tab of _tabs; let i = index"
Expand Down
10 changes: 0 additions & 10 deletions src/lib/tabs/tab-group.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,6 @@
font-family: $md-font-family;
}

// Styling for the heading containing the tab labels
.md-tab-header {
@include tab-header;
}

// Wraps each tab label
.md-tab-label {
@include tab-label;
Expand All @@ -30,11 +25,6 @@
flex-grow: 1;
}

// The ink bar that displays next to the active tab
md-ink-bar {
@include ink-bar;
}

// The bottom section of the view; contains the tab bodies
.md-tab-body-wrapper {
position: relative;
Expand Down
Loading