UI Organisms

Panels tabs

1.1 Basic example

<div class="amui-o-panel-tabs amui-m-panel">
  <div class="amui-m-panel__heading">
    <ul class="amui-m-nav-tabs nav nav-tabs">
      <li role="presentation" class="amui-m-nav-tabs__item active">
        <a data-toggle="tab" href="#menu1"><h2 class="amui-m-panel__heading-title">Panel title</h2></a>
      </li>
      <li role="presentation" class="amui-m-nav-tabs__item">
        <i class="material-icons">navigate_next</i>
        <a data-toggle="tab" href="#menu2"><h2 class="amui-m-panel__heading-title">Panel title</h2></a>
      </li>
    </ul>
  </div>
  <div class="amui-o-panel-tabs__tab-content tab-content">

    <div id="menu1" class="amui-o-panel-tabs__tab-content-pane tab-pane fade in active">
      <div class="amui-m-panel__body">

        <form class="amui-o-form-group form-inline">
          <div class="amui-m-form-group form-group">
            <label class="amui-a-form-label is--inline" for="exampleInputName1">Name</label>
            <input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">
          </div>
          <div class="amui-m-form-group form-group">
            <label class="amui-a-form-label is--inline" for="exampleInputEmail1">Email</label>
            <input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
          </div>
          <div class="amui-m-form-group form-group">
            <label class="amui-a-form-label is--inline" for="exampleInputEmail1">Email</label>
            <input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
          </div>
          <div class="amui-m-form-group form-group">
            <label class="amui-a-form-label is--inline" for="exampleInputEmail1">Email</label>
            <input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
          </div>
          <div class="amui-m-form-group form-group">
            <label class="amui-a-form-label is--inline" for="exampleInputEmail1">Email</label>
            <input type="email" class="amui-a-form-control form-control" id="inputEmail1" placeholder="Email">
          </div>
        </form>

      </div>
    </div>

    <div id="menu2" class="amui-o-panel-tabs__tab-content-pane tab-pane fade in">
      <div class="amui-m-panel__body">

        <form class="amui-o-form-group form-horizontal">
          <div class="amui-m-form-group form-group">
            <label for="exampleInputName1" class="col-sm-2 control-label amui-a-form-label">Name</label>
            <div class="col-sm-10">
              <input type="text" class="amui-a-form-control form-control" id="exampleInputName1" placeholder="Text input">
            </div>
          </div>
          <div class="amui-m-form-group form-group">
            <label for="exampleInputEmail1" class="col-sm-2 control-label amui-a-form-label">Email</label>
            <div class="col-sm-10">
              <p class="form-control-static">email@example.com</p>
            </div>
          </div>
          <div class="amui-m-form-group form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="amui-a-btn is--default is--sm">Default button</button>
            </div>
          </div>
        </form>

      </div>
    </div>
  </div>

  <div class="amui-m-panel__footer">
    <div class="amui-g-grid row">
      <div class="amui-g-grid__item is--pull col-xs-6">
        <button type="button" class="amui-a-btn is--success btn">Success</button>
      </div>
      <div class="amui-g-grid__item is--push col-xs-6">
        <button type="button" class="amui-a-btn is--secondary btn">Secondary</button>
      </div>
    </div>
  </div>
</div>