Tests and example for tabs

Author: davidlgj

dist/bootstrap-decorator.min.js

@@ -49,6 +49,7 @@ <h3>Schema</h3>
 <script type="text/javascript" src="../bower_components/tv4/tv4.js"></script>
 <script type="text/javascript" src="../bower_components/ace-builds/src-min-noconflict/ace.js"></script>
 <script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
+<script type="text/javascript" src="../bower_components/angular-sanitize/angular-sanitize.min.js"></script>
 <script type="text/javascript" src="../bower_components/angular-ui-ace/ui-ace.js"></script>
 <script type="text/javascript" src="../bower_components/pickadate/lib/picker.js"></script>
 <script type="text/javascript" src="../bower_components/pickadate/lib/picker.date.js"></script>
@@ -143,50 +144,56 @@ <h3>Schema</h3>
 
   $scope.form = [
     {
-      type: "help",
-      helpvalue: "<h1>Yo ninja!</h1>"
-    },
-    {
-      type: "tabs",
-      tabs: [
-      {
-        name: "Simple stuff",
-        items: [
-          {
-            key: "name",
-            placeholder: "Check the console",
-            onChange: "log(modelValue)",
-            feedback: "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
-          },
-          {
-            key: "favorite",
-            feedback: false
-          }
-        ]
-      },
-      {
-        name: "More stuff",
-        items: [
-          "attributes",
+      type: "fieldset",
+      title: "Stuff",
+      items: [
+        {
+          type: "tabs",
+          tabs: [
           {
-            key: "shoesize",
-            feedback: false
+            title: "Simple stuff",
+            items: [
+              {
+                key: "name",
+                placeholder: "Check the console",
+                onChange: "log(modelValue)",
+                feedback: "{'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-star': !hasSuccess() }"
+              },
+              {
+                key: "favorite",
+                feedback: false
+              }
+            ]
           },
-          "things",
-          "soul",
           {
-            type: "conditional",
-            condition: "person.soul",
+            title: "More stuff",
             items: [
-              { key: "soulserial", placeholder: "ex. 666" }
+              "attributes",
+              {
+                key: "shoesize",
+                feedback: false
+              },
+              "things"
             ]
-          },
-          { key: "date", minDate: "2014-06-20" },
-          { key: "radio", type: "radios" },
-          { key: "radiobuttons", type: "radiobuttons" }
-        ]
-      }]
+          }]
+        },
+      ]
+    },
+    {
+      type: "help",
+      helpvalue: "<hr>"
+    },
+    "soul",
+    {
+      type: "conditional",
+      condition: "person.soul",
+      items: [
+        { key: "soulserial", placeholder: "ex. 666" }
+      ]
     },
+    { key: "date", minDate: "2014-06-20" },
+    { key: "radio", type: "radios" },
+    { key: "radiobuttons", type: "radiobuttons" },
     {
       type: 'actions',
       items: [

examples/bootstrap-example.html

@@ -1,13 +1,12 @@
 <div ng-init="selected = { tab: 0 }">
-  <ul class="nav nav-tabs">
+  <ul class="nav nav-tabs" style="margin-bottom: 15px">
     <li ng-repeat="tab in form.tabs"
         ng-click="selected.tab = $index"
         ng-class="{active: selected.tab === $index}">
-        <a>{{ tab.name }}</a>
+        <a href="#">{{ tab.title }}</a>
     </li>
   </ul>
 
-  <!-- Tab panes -->
   <div class="tab-content">
     <div class="tab-pane"
          ng-repeat="tab in form.tabs"