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

Commit

Permalink
feat(tabs): refactors tabs to function closer to spec
Browse files Browse the repository at this point in the history
Closes #1087
Closes #1107
Closes #1140
Closes #1247
Closes #1261
Closes #1380
Closes #1387
Closes #1403
Closes #1443
Closes #1505
Closes #1506
Closes #1516
Closes #1518
Closes #1564
Closes #1570
Closes #1626
Closes #1698
Closes #1777
Closes #1850
  • Loading branch information
robertmesserle authored and Robert Messerle committed Mar 19, 2015
1 parent 019a8d6 commit ad06889
Show file tree
Hide file tree
Showing 21 changed files with 939 additions and 1,354 deletions.
15 changes: 6 additions & 9 deletions src/components/tabs/demoDynamicTabs/index.html
Original file line number Diff line number Diff line change
@@ -1,21 +1,19 @@
<div ng-controller="AppCtrl" class="sample" layout="column">

<md-tabs md-selected="selectedIndex" flex>
<md-tabs md-selected="selectedIndex" md-border-bottom>
<md-tab ng-repeat="tab in tabs"
ng-disabled="tab.disabled"
label="{{tab.title}}">

<div class="demo-tab tab{{$index%4}}" layout="column" layout-align="space-around center">
<div class="demo-tab tab{{$index%4}}" style="padding: 25px; text-align: center;">
<div ng-bind="tab.content"></div>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )">
Remove Tab
</md-button>
<br/>
<md-button class="md-primary md-raised" ng-click="removeTab( tab )" ng-disabled="tabs.length <= 1">Remove Tab</md-button>
</div>
</md-tab>
</md-tabs>

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

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


</div>
65 changes: 33 additions & 32 deletions src/components/tabs/demoDynamicTabs/script.js
Original file line number Diff line number Diff line change
@@ -1,39 +1,40 @@
angular.module('tabsDemo2', ['ngMaterial'])
.controller('AppCtrl', function ($scope, $log) {
var tabs = [
{ title: 'One', content: "Tabs will become paginated if there isn't enough room for them."},
{ title: 'Two', content: "You can swipe left and right on a mobile device to change tabs."},
{ title: 'Three', content: "You can bind the selected tab via the selected attribute on the md-tabs element."},
{ title: 'Four', content: "If you set the selected tab binding to -1, it will leave no tab selected."},
{ title: 'Five', content: "If you remove a tab, it will try to select a new one."},
{ title: 'Six', content: "There's an ink bar that follows the selected tab, you can turn it off if you want."},
{ 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."},
{ title: 'Eight', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"},
{ title: 'Nine', content: "If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs."},
{ title: 'Ten', content: "If you're still reading this, you should just go check out the API docs for tabs!"}
];
.controller('AppCtrl', function ($scope, $log) {
var tabs = [
{ title: 'One', content: "Tabs will become paginated if there isn't enough room for them."},
{ title: 'Two', content: "You can swipe left and right on a mobile device to change tabs."},
{ title: 'Three', content: "You can bind the selected tab via the selected attribute on the md-tabs element."},
{ title: 'Four', content: "If you set the selected tab binding to -1, it will leave no tab selected."},
{ title: 'Five', content: "If you remove a tab, it will try to select a new one."},
{ title: 'Six', content: "There's an ink bar that follows the selected tab, you can turn it off if you want."},
{ 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."},
{ title: 'Eight', content: "If you look at the source, you're using tabs to look at a demo for tabs. Recursion!"},
{ title: 'Nine', content: "If you set md-theme=\"green\" on the md-tabs element, you'll get green tabs."},
{ title: 'Ten', content: "If you're still reading this, you should just go check out the API docs for tabs!"}
],
selected = null,
previous = null;

$scope.tabs = tabs;
$scope.selectedIndex = 2;

$scope.$watch('selectedIndex', function(current, old){
if ( old && (old != current)) $log.debug('Goodbye ' + tabs[old].title + '!');
if ( current ) $log.debug('Hello ' + tabs[current].title + '!');
});
$scope.tabs = tabs;
$scope.selectedIndex = 2;

$scope.$watch('selectedIndex', function(current, old){
previous = selected;
selected = tabs[current];
if ( old && (old != current)) $log.debug('Goodbye ' + previous.title + '!');
if ( current ) $log.debug('Hello ' + selected.title + '!');
});

$scope.addTab = function (title, view) {
view = view || title + " Content View";
tabs.push({ title: title, content: view, disabled: false});
};
$scope.addTab = function (title, view) {
view = view || title + " Content View";
tabs.push({ title: title, content: view, disabled: false});
};

$scope.removeTab = function (tab) {
for (var j = 0; j < tabs.length; j++) {
if (tab.title == tabs[j].title) {
$scope.tabs.splice(j, 1);
break;
}
}
};
$scope.removeTab = function (tab) {
var index = tabs.indexOf(tab);
tabs.splice(index, 1);
};

});
});

Original file line number Diff line number Diff line change
@@ -1,60 +1,42 @@
.sample {
height:500px;
}

.remove-tab {
margin-bottom: 40px;
}

.demo-tab {
height: 300px;
text-align: center;
}

.demo-tab button {
margin-bottom: 40px;
.demo-tab > div > div {
padding: 25px;
box-sizing: border-box;
}

.tab0, .tab1, .tab2, .tab3 {
.edit-form input {
width: 100%;
}

md-tabs, md-tabs .md-header {
border-bottom: 1px solid #D8D8D8;
md-tabs {
border-bottom: 1px solid rgba(0,0,0,0.12);
}
md-tab[disabled] {
opacity: 0.5;
}


.md-tab-content {
background: white;
label {
text-align: left;
}

.title {
padding-top: 8px;
padding-right: 8px;
text-align: left;
text-transform: uppercase;
color: #888;
margin-top: 24px;
}


[layout-align] > * {
margin-left: 8px;
}

form > [layout] > * {
margin-left: 8px;
}
form > [layout] > span {
padding-top:2px
}

.long > input {
width: 264px;
}

.md-button.add-tab {
margin-top:20px;
max-height:30px !important;
Expand Down
55 changes: 18 additions & 37 deletions src/components/tabs/demoStaticTabs/index.html
Original file line number Diff line number Diff line change
@@ -1,48 +1,29 @@
<div ng-controller="AppCtrl" class="tabsdemoStaticTabs sample">

<md-tabs class="md-accent" md-selected="data.selectedIndex">
<md-tab id="tab1" aria-controls="tab1-content">
Item One
<md-tab id="tab1">
<md-tab-label>Item One</md-tab-label>
<md-tab-template>
View for Item #1 <br/>
data.selectedIndex = 0;
</md-tab-template>
</md-tab>
<md-tab id="tab2" aria-controls="tab2-content"
ng-disabled="data.secondLocked">
{{data.secondLabel}}
<md-tab id="tab2" ng-disabled="data.secondLocked">
<md-tab-label>{{data.secondLabel}}</md-tab-label>
<md-tab-template>
View for Item #2 <br/>
data.selectedIndex = 1;
</md-tab-template>
</md-tab>
<md-tab id="tab3" aria-controls="tab3-content">
Item Three
<md-tab id="tab3">
<md-tab-label>Item Three</md-tab-label>
<md-tab-template>
View for Item #3 <br/>
data.selectedIndex = 2;
</md-tab-template>
</md-tab>
</md-tabs>

<ng-switch on="data.selectedIndex" class="tabpanel-container">
<div role="tabpanel"
id="tab1-content"
aria-labelledby="tab1"
ng-switch-when="0"
md-swipe-left="next()"
md-swipe-right="previous()" >
View for Item #1<br/>
data.selectedIndex = 0
</div>
<div role="tabpanel"
id="tab2-content"
aria-labelledby="tab2"
ng-switch-when="1"
md-swipe-left="next()"
md-swipe-right="previous()" >
View for {{data.secondLabel}}<br/>
data.selectedIndex = 1
</div>
<div role="tabpanel"
id="tab3-content"
aria-labelledby="tab3"
ng-switch-when="2"
md-swipe-left="next()"
md-swipe-right="previous()" >
View for Item #3<br/>
data.selectedIndex = 2
</div>
</ng-switch>

<div class="after-tabs-area" layout="row" layout-sm="column" layout-margin layout-align="left center">
<md-input-container>
<label for="selectedIndex">Selected Index</label>
Expand Down
92 changes: 0 additions & 92 deletions src/components/tabs/demoStaticTabs/style.css

This file was deleted.

29 changes: 29 additions & 0 deletions src/components/tabs/demoStaticTabs/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
.sample {
height:450px;
md-tab-content {
padding: 25px;
&:nth-child(1) {
background-color: #42A5F5;
}
&:nth-child(2) {
background-color: #689F38;
}
&:nth-child(3) {
background-color: #26C6DA;
}
}
.after-tabs-area {
padding: 25px;
> span {
margin-top:25px;
padding-right: 15px;
vertical-align: middle;
line-height: 30px;
height: 35px;
}
> md-checkbox {
margin-top:26px;
margin-left:0px;
}
}
}
Loading

0 comments on commit ad06889

Please sign in to comment.