angular-ui-bootstrap/src/tabs/docs/demo.html

Native AngularJS (Angular) directives for Bootstrap

<style type="text/css">
  form.tab-form-demo .tab-pane {
    margin: 20px 20px;
  }
</style>

<div ng-controller="TabsDemoCtrl">
  <p>Select a tab by setting active binding to true:</p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 1">Select second tab</button>
    <button type="button" class="btn btn-default btn-sm" ng-click="active = 2">Select third tab</button>
  </p>
  <p>
    <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
  </p>
  <hr />

  <uib-tabset active="active">
    <uib-tab index="0" heading="Static title">Static content</uib-tab>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
    <uib-tab index="3" select="alertMe()">
      <uib-tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </uib-tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </uib-tab>
  </uib-tabset>

  <hr />

  <uib-tabset active="activePill" vertical="true" type="pills">
    <uib-tab index="0" heading="Vertical 1">Vertical content 1</uib-tab>
    <uib-tab index="1" heading="Vertical 2">Vertical content 2</uib-tab>
  </uib-tabset>

  <hr />

  <uib-tabset active="activeJustified" justified="true">
    <uib-tab index="0" heading="Justified">Justified content</uib-tab>
    <uib-tab index="1" heading="SJ">Short Labeled Justified content</uib-tab>
    <uib-tab index="2" heading="Long Justified">Long Labeled Justified content</uib-tab>
  </uib-tabset>

  <hr />

  Tabbed pills with CSS classes
  <uib-tabset type="pills">
    <uib-tab heading="Default Size">Tab 1 content</uib-tab>
    <uib-tab heading="Small Button" classes="btn-sm">Tab 2 content</uib-tab>
  </uib-tabset>

  <hr />

  Tabs using nested forms:
  <form name="outerForm" class="tab-form-demo">
    <uib-tabset active="activeForm">
      <uib-tab index="0" heading="Form Tab">
        <ng-form name="nestedForm">
          <div class="form-group">
            <label>Name</label>
            <input type="text" class="form-control" required ng-model="model.name"/>
          </div>
        </ng-form>
      </uib-tab>
      <uib-tab index="1" heading="Tab One">
        Some Tab Content
      </uib-tab>
      <uib-tab index="2" heading="Tab Two">
        More Tab Content
      </uib-tab>
    </uib-tabset>
  </form>
  Model:
  <pre>{{ model | json }}</pre>
  Nested Form:
  <pre>{{ outerForm.nestedForm | json }}</pre>
</div>