Dynamic Tabs

In this example below you will see how to do a Dynamic Tabs with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Jussic, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Jussic ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dynamic Tabs</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
  
  <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.1.5/docs.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div ng-controller="AppCtrl" class="sample tabsdemoDynamicTabs" layout="column" ng-cloak="" ng-app="MyApp">
  <md-content class="md-padding">
    <md-tabs md-selected="selectedIndex" md-border-bottom="" md-autoselect="" md-swipe-content="">
      <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>

<!--
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
-->
  <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Jussic/dynamic-tabs-EbPVPz */
.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-wrapper {
      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); }


/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
*/

/*Downloaded from https://www.codeseek.co/Jussic/dynamic-tabs-EbPVPz */
(function () {
  'use strict';
  angular
      .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
      .controller('AppCtrl', AppCtrl);

  function AppCtrl ($scope, $log) {
    var tabs = [
        { title: 'Zero (AKA 0, Cero, One - One, -Nineteen + 19, and so forth and so on and continuing into what seems like infinity.)', content: 'Woah...that is a really long title!' },
        { 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!"},
        { title: 'Eleven', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Twelve', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Thirteen', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Fourteen', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Fifteen', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Sixteen', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Seventeen', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Eighteen', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Nineteen', content: "If you're still reading this, you should just go check out the API docs for tabs!"},
        { title: 'Twenty', 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 = 0;
    $scope.$watch('selectedIndex', function(current, old){
      previous = selected;
      selected = tabs[current];
      if ( old + 1 && (old != current)) $log.debug('Goodbye ' + previous.title + '!');
      if ( current + 1 )                $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);
    };
  }
})();



/**
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license.
**/

Comments