Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 684fada

Browse files
robertmesserleRobert Messerle
robertmesserle
authored and
Robert Messerle
committed
feat(tabs): refactors tabs to function closer to spec
Closes #1850 Closes #1698 Closes #1570 Closes #1564 Closes #1518 Closes #1516 Closes #1506 Closes #1505 Closes #1403 Closes #1387 Closes #1380 Closes #1261 Closes #1247 Closes #1140
1 parent 61245b7 commit 684fada

21 files changed

+901
-1425
lines changed

‎src/components/tabs/demoDynamicTabs/index.html

+6-9
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
11
<div ng-controller="AppCtrl" class="sample" layout="column">
22

3-
<md-tabs md-selected="selectedIndex" flex>
3+
<md-tabs md-selected="selectedIndex" md-border-bottom>
44
<md-tab ng-repeat="tab in tabs"
55
ng-disabled="tab.disabled"
66
label="{{tab.title}}">
7-
8-
<div class="demo-tab tab{{$index%4}}" layout="column" layout-align="space-around center">
7+
<div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
98
<div ng-bind="tab.content"></div>
10-
<md-button class="md-primary md-raised" ng-click="removeTab( tab )">
11-
Remove Tab
12-
</md-button>
9+
<br/>
10+
<md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
1311
</div>
1412
</md-tab>
1513
</md-tabs>
1614

1715
<form ng-submit="addTab(tTitle,tContent)" layout="column" style="padding-top:20px;padding-left:20px;">
18-
<div layout="row" layout-sm="column" layout-margin >
16+
<div layout="row" layout-sm="column" layout-margin style="min-height: 75px;">
1917
<md-input-container>
2018
<label for="activeIndex">Active Index</label>
2119
<input type="text" id="activeIndex" ng-model="selectedIndex" disabled>
@@ -27,7 +25,7 @@
2725
</md-input-container>
2826
</div>
2927

30-
<div layout="row" layout-sm="column" layout-margin >
28+
<div layout="row" layout-sm="column" layout-margin style="min-height: 75px;">
3129
<span class="title">Add a new Tab:</span>
3230
<md-input-container>
3331
<label for="label">Label</label>
@@ -41,5 +39,4 @@
4139
</div>
4240
</form>
4341

44-
4542
</div>

‎src/components/tabs/demoDynamicTabs/script.js

+33-32
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
11
angular.module('tabsDemo2', ['ngMaterial'])
2-
.controller('AppCtrl', function ($scope, $log) {
3-
var tabs = [
4-
{ title: 'One', content: "Tabs will become paginated if there isn't enough room for them."},
5-
{ title: 'Two', content: "You can swipe left and right on a mobile device to change tabs."},
6-
{ title: 'Three', content: "You can bind the selected tab via the selected attribute on the md-tabs element."},
7-
{ title: 'Four', content: "If you set the selected tab binding to -1, it will leave no tab selected."},
8-
{ title: 'Five', content: "If you remove a tab, it will try to select a new one."},
9-
{ title: 'Six', content: "There's an ink bar that follows the selected tab, you can turn it off if you want."},
10-
{ title: 'Seven', content: "If you set ng-disabled on a tab, it becomes unselectable. If the currently selected tab becomes disabled, it will try to select the next tab."},
11-
{ title: 'Eight', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"},
12-
{ title: 'Nine', content: "If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs."},
13-
{ title: 'Ten', content: "If you're still reading this, you should just go check out the API docs for tabs!"}
14-
];
2+
.controller('AppCtrl', function ($scope, $log) {
3+
var tabs = [
4+
{ title: 'One', content: "Tabs will become paginated if there isn't enough room for them."},
5+
{ title: 'Two', content: "You can swipe left and right on a mobile device to change tabs."},
6+
{ title: 'Three', content: "You can bind the selected tab via the selected attribute on the md-tabs element."},
7+
{ title: 'Four', content: "If you set the selected tab binding to -1, it will leave no tab selected."},
8+
{ title: 'Five', content: "If you remove a tab, it will try to select a new one."},
9+
{ title: 'Six', content: "There's an ink bar that follows the selected tab, you can turn it off if you want."},
10+
{ title: 'Seven', content: "If you set ng-disabled on a tab, it becomes unselectable. If the currently selected tab becomes disabled, it will try to select the next tab."},
11+
{ title: 'Eight', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"},
12+
{ title: 'Nine', content: "If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs."},
13+
{ title: 'Ten', content: "If you're still reading this, you should just go check out the API docs for tabs!"}
14+
],
15+
selected = null,
16+
previous = null;
1517

16-
$scope.tabs = tabs;
17-
$scope.selectedIndex = 2;
1818

19-
$scope.$watch('selectedIndex', function(current, old){
20-
if ( old && (old != current)) $log.debug('Goodbye ' + tabs[old].title + '!');
21-
if ( current ) $log.debug('Hello ' + tabs[current].title + '!');
22-
});
19+
$scope.tabs = tabs;
20+
$scope.selectedIndex = 2;
21+
22+
$scope.$watch('selectedIndex', function(current, old){
23+
previous = selected;
24+
selected = tabs[current];
25+
if ( old && (old != current)) $log.debug('Goodbye ' + previous.title + '!');
26+
if ( current ) $log.debug('Hello ' + selected.title + '!');
27+
});
2328

24-
$scope.addTab = function (title, view) {
25-
view = view || title + " Content View";
26-
tabs.push({ title: title, content: view, disabled: false});
27-
};
29+
$scope.addTab = function (title, view) {
30+
view = view || title + " Content View";
31+
tabs.push({ title: title, content: view, disabled: false});
32+
};
2833

29-
$scope.removeTab = function (tab) {
30-
for (var j = 0; j < tabs.length; j++) {
31-
if (tab.title == tabs[j].title) {
32-
$scope.tabs.splice(j, 1);
33-
break;
34-
}
35-
}
36-
};
34+
$scope.removeTab = function (tab) {
35+
var index = tabs.indexOf(tab);
36+
tabs.splice(index, 1);
37+
};
3738

38-
});
39+
});
3940

‎src/components/tabs/demoDynamicTabs/style.css ‎src/components/tabs/demoDynamicTabs/style.scss

+9-27
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,42 @@
1-
.sample {
2-
height:500px;
3-
}
4-
51
.remove-tab {
62
margin-bottom: 40px;
73
}
8-
9-
.demo-tab {
10-
height: 300px;
11-
text-align: center;
12-
}
13-
14-
.demo-tab button {
15-
margin-bottom: 40px;
4+
.demo-tab > div > div {
5+
padding: 25px;
6+
box-sizing: border-box;
167
}
17-
18-
.tab0, .tab1, .tab2, .tab3 {
8+
.edit-form input {
9+
width: 100%;
1910
}
20-
21-
md-tabs, md-tabs .md-header {
22-
border-bottom: 1px solid #D8D8D8;
11+
md-tabs {
12+
border-bottom: 1px solid rgba(0,0,0,0.12);
2313
}
2414
md-tab[disabled] {
2515
opacity: 0.5;
2616
}
27-
28-
29-
.md-tab-content {
30-
background: white;
17+
label {
18+
text-align: left;
3119
}
3220

3321
.title {
3422
padding-top: 8px;
3523
padding-right: 8px;
3624
text-align: left;
3725
text-transform: uppercase;
38-
color: #888;
3926
margin-top: 24px;
4027
}
41-
42-
4328
[layout-align] > * {
4429
margin-left: 8px;
4530
}
46-
4731
form > [layout] > * {
4832
margin-left: 8px;
4933
}
5034
form > [layout] > span {
5135
padding-top:2px
5236
}
53-
5437
.long > input {
5538
width: 264px;
5639
}
57-
5840
.md-button.add-tab {
5941
margin-top:20px;
6042
max-height:30px !important;

‎src/components/tabs/demoStaticTabs/index.html

+18-37
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,29 @@
11
<div ng-controller="AppCtrl" class="tabsdemoStaticTabs sample">
22

33
<md-tabs class="md-accent" md-selected="data.selectedIndex">
4-
<md-tab id="tab1" aria-controls="tab1-content">
5-
Item One
4+
<md-tab id="tab1">
5+
<md-tab-label>Item One</md-tab-label>
6+
<md-tab-template>
7+
View for Item #1 <br/>
8+
data.selectedIndex = 0;
9+
</md-tab-template>
610
</md-tab>
7-
<md-tab id="tab2" aria-controls="tab2-content"
8-
ng-disabled="data.secondLocked">
9-
{{data.secondLabel}}
11+
<md-tab id="tab2" ng-disabled="data.secondLocked">
12+
<md-tab-label>{{data.secondLabel}}</md-tab-label>
13+
<md-tab-template>
14+
View for Item #2 <br/>
15+
data.selectedIndex = 1;
16+
</md-tab-template>
1017
</md-tab>
11-
<md-tab id="tab3" aria-controls="tab3-content">
12-
Item Three
18+
<md-tab id="tab3">
19+
<md-tab-label>Item Three</md-tab-label>
20+
<md-tab-template>
21+
View for Item #3 <br/>
22+
data.selectedIndex = 2;
23+
</md-tab-template>
1324
</md-tab>
1425
</md-tabs>
1526

16-
<ng-switch on="data.selectedIndex" class="tabpanel-container">
17-
<div role="tabpanel"
18-
id="tab1-content"
19-
aria-labelledby="tab1"
20-
ng-switch-when="0"
21-
md-swipe-left="next()"
22-
md-swipe-right="previous()" >
23-
View for Item #1<br/>
24-
data.selectedIndex = 0
25-
</div>
26-
<div role="tabpanel"
27-
id="tab2-content"
28-
aria-labelledby="tab2"
29-
ng-switch-when="1"
30-
md-swipe-left="next()"
31-
md-swipe-right="previous()" >
32-
View for {{data.secondLabel}}<br/>
33-
data.selectedIndex = 1
34-
</div>
35-
<div role="tabpanel"
36-
id="tab3-content"
37-
aria-labelledby="tab3"
38-
ng-switch-when="2"
39-
md-swipe-left="next()"
40-
md-swipe-right="previous()" >
41-
View for Item #3<br/>
42-
data.selectedIndex = 2
43-
</div>
44-
</ng-switch>
45-
4627
<div class="after-tabs-area" layout="row" layout-sm="column" layout-margin layout-align="left center">
4728
<md-input-container>
4829
<label for="selectedIndex">Selected Index</label>

‎src/components/tabs/demoStaticTabs/style.css

-92
This file was deleted.

‎src/components/tabs/demoStaticTabs/style.scss

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.sample {
2+
height:450px;
3+
md-tab-content {
4+
padding: 25px;
5+
&:nth-child(1) {
6+
background-color: #42A5F5;
7+
}
8+
&:nth-child(2) {
9+
background-color: #689F38;
10+
}
11+
&:nth-child(3) {
12+
background-color: #26C6DA;
13+
}
14+
}
15+
.after-tabs-area {
16+
padding: 25px;
17+
> span {
18+
margin-top:25px;
19+
padding-right: 15px;
20+
vertical-align: middle;
21+
line-height: 30px;
22+
height: 35px;
23+
}
24+
> md-checkbox {
25+
margin-top:26px;
26+
margin-left:0px;
27+
}
28+
}
29+
}

0 commit comments

Comments
 (0)