Restructure Sass files and folders for proper application Sass development

2026-10-01 10:00:33 +00:00 · 2015-01-21 11:18:53 -05:00
parent 6c6c8457b2
commit 039028db1d
207 changed files with 54 additions and 285 deletions
@@ -0,0 +1,31 @@
+<div ng-controller="AppCtrl" class="sample">
+
+  <md-tabs md-selected="selectedIndex">
+    <md-tab ng-repeat="tab in tabs"
+            ng-disabled="tab.disabled"
+            label="{{tab.title}}">
+
+    <div class="demo-tab tab{{$index%4}}" layout="column" layout-fill layout-align="space-around center">
+        <div ng-bind="tab.content"></div>
+        <md-button class="md-warn" ng-click="removeTab( tab )">
+          Remove Tab
+        </md-button>
+      </div>
+    </md-tab>
+  </md-tabs>
+
+  <form ng-submit="addTab(tTitle,tContent)" flex>
+    <div layout="row" layout-sm="column" layout-margin layout-align="left center">
+      <md-text-float label="Active Index" ng-model="selectedIndex" disabled></md-text-float>
+      <md-text-float label="Active Title" ng-model="tabs[selectedIndex].title"></md-text-float>
+    </div>
+    <div layout="row" layout-sm="column" layout-margin layout-align="left center">
+      <span class="title">Add a new Tab:</span>
+      <md-text-float label="Label" ng-model="tTitle"></md-text-float>
+      <md-text-float label="Content" ng-model="tContent" ></md-text-float>
+      <md-button class="add-tab md-primary"  type="submit" style="max-height: 40px" >Add Tab</md-button>
+    </div>
+  </form>
+
+
+</div>
@@ -0,0 +1,39 @@
+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!"}
+    ];
+
+    $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.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;
+        }
+      }
+    };
+
+  });
+
@@ -0,0 +1,67 @@
+
+.remove-tab {
+  margin-bottom: 40px;
+}
+
+.md-button {
+  display:block;
+}
+
+.demo-tab {
+  height: 300px;
+  text-align: center;
+}
+.tab0, .tab1, .tab2, .tab3 {
+  background-color: #bbdefb;
+}
+
+.md-header {
+  background-color: #1976D2 !important;
+}
+md-tab {
+  color: #90caf9 !important;
+}
+md-tab.active,
+md-tab:focus {
+  color: white !important;
+}
+md-tab[disabled] {
+  opacity: 0.5;
+}
+.md-header .md-ripple {
+  border-color: #FFFF8D !important;
+}
+md-tabs-ink-bar {
+  background-color: #FFFF8D !important;
+}
+
+.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;
+}
+
+.long > input {
+  width: 264px;
+}
+
+.md-button {
+  max-height: 30px;
+}
+
+.md-button.add-tab {
+  margin-top:20px;
+  max-height:30px !important;
+}