Dynamic Tabs

Dynamic Tabs.markdown

Dynamic Tabs

A Pen by Jo Dahl on CodePen.

License.

index.html

<div ng-controller="AppCtrl" class="sample tabsdemoDynamicTabs" layout="column" ng-app="MyApp">
  <md-content class="md-padding">
    <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}}" style="padding: 25px; text-align: center;">
          <div ng-bind="tab.content"></div>
          <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>
  </md-content>

  <form ng-submit="addTab(tTitle,tContent)" layout="column" class="md-padding" style="padding-top: 0;">
    <div layout="row" layout-sm="column">
      <div flex="" style="position: relative;">
        <h2 class="md-subhead" style="position: absolute; bottom: 0; left: 0; margin: 0; font-weight: 500; text-transform: uppercase; line-height: 35px; white-space: nowrap;">Add a new Tab:</h2>
      </div>
      <md-input-container>
        <label for="label">Label</label>
        <input type="text" id="label" ng-model="tTitle">
      </md-input-container>
      <md-input-container>
        <label for="content">Content</label>
        <input type="text" id="content" ng-model="tContent">
      </md-input-container>
      <md-button class="add-tab md-primary md-raised" ng-disabled="!tTitle || !tContent" type="submit" style="margin-right: 0;">Add Tab</md-button>
    </div>
  </form>

</div>

script.js

(function () {
  'use strict';
  angular
      .module('MyApp')
      .controller('AppCtrl', AppCtrl);

  function AppCtrl ($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){
      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.removeTab = function (tab) {
      var index = tabs.indexOf(tab);
      tabs.splice(index, 1);
    };
  }
})();

scripts

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="http://cdn.rawgit.com/angular/bower-material/v0.9.8/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

style.css

.tabsdemoDynamicTabs md-content {
  background-color: transparent !important; }
  .tabsdemoDynamicTabs md-content md-tabs {
    border: 1px solid #e1e1e1; }
    .tabsdemoDynamicTabs md-content md-tabs md-tab-content {
      background: #f6f6f6; }
    .tabsdemoDynamicTabs md-content md-tabs md-tabs-canvas {
      background: white; }
  .tabsdemoDynamicTabs md-content h1:first-child {
    margin-top: 0; }
.tabsdemoDynamicTabs md-input-container {
  padding-bottom: 0; }
.tabsdemoDynamicTabs .remove-tab {
  margin-bottom: 40px; }
.tabsdemoDynamicTabs .demo-tab > div > div {
  padding: 25px;
  box-sizing: border-box; }
.tabsdemoDynamicTabs .edit-form input {
  width: 100%; }
.tabsdemoDynamicTabs md-tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
.tabsdemoDynamicTabs md-tab[disabled] {
  opacity: 0.5; }
.tabsdemoDynamicTabs label {
  text-align: left; }
.tabsdemoDynamicTabs .long > input {
  width: 264px; }
.tabsdemoDynamicTabs .md-button.add-tab {
  transform: translateY(5px); }

styles

<link href="http://cdn.rawgit.com/angular/bower-material/v0.9.8/angular-material.css" rel="stylesheet" />