tabs.html

Home / themes / src / main / node_modules / patternfly / tests / pages / tabs.html
268 lines | 12.27 kB Blame History Raw Download
---
categories: [Widgets]
layout: page
title: Tabs
resource: true
---
      <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Profile</a></li>
        <li><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="javascript:void(0);">Home</a></li>
        <li class="active"><a href="javascript:void(0);">Profile</a></li>
        <li><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Profile</a></li>
        <li class="active"><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <h3>Justified</h3>
      <ul class="nav nav-tabs nav-justified">
        <li class="active"><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Profile</a></li>
        <li><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-justified">
        <li><a href="javascript:void(0);">Home</a></li>
        <li class="active"><a href="javascript:void(0);">Profile</a></li>
        <li><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-justified">
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Profile</a></li>
        <li class="active"><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <h3>Tabs with dropdowns</h3>
      <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="javascript:void(0);">Action</a></li>
            <li><a href="javascript:void(0);">Another action</a></li>
            <li><a href="javascript:void(0);">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0);">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="javascript:void(0);">Home</a></li>
        <li class="active"><a href="javascript:void(0);">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu pull-right" role="menu">
            <li><a href="javascript:void(0);">Action</a></li>
            <li><a href="javascript:void(0);">Another action</a></li>
            <li><a href="javascript:void(0);">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0);">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Help</a></li>
        <li class="active dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="javascript:void(0);">Action</a></li>
            <li><a href="javascript:void(0);">Another action</a></li>
            <li><a href="javascript:void(0);">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0);">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <h2>PatternFly Examples</h2>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li class="active"><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Profile</a></li>
        <li><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="javascript:void(0);">Home</a></li>
        <li class="active"><a href="javascript:void(0);">Profile</a></li>
        <li><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Profile</a></li>
        <li class="active"><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <h3>Justified</h3>
      <ul class="nav nav-tabs nav-tabs-pf nav-justified">
        <li class="active"><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Profile</a></li>
        <li><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf nav-justified">
        <li><a href="javascript:void(0);">Home</a></li>
        <li class="active"><a href="javascript:void(0);">Profile</a></li>
        <li><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf nav-justified">
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Profile</a></li>
        <li class="active"><a href="javascript:void(0);">Messages</a></li>
      </ul>
      <h3>Tabs with dropdowns</h3>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li class="active"><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="javascript:void(0);">Action</a></li>
            <li><a href="javascript:void(0);">Another action</a></li>
            <li><a href="javascript:void(0);">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0);">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="javascript:void(0);">Home</a></li>
        <li class="active"><a href="javascript:void(0);">Help</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu pull-right" role="menu">
            <li><a href="javascript:void(0);">Action</a></li>
            <li><a href="javascript:void(0);">Another action</a></li>
            <li><a href="javascript:void(0);">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0);">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <br />
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="javascript:void(0);">Home</a></li>
        <li><a href="javascript:void(0);">Help</a></li>
        <li class="active dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            Dropdown <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="javascript:void(0);">Action</a></li>
            <li><a href="javascript:void(0);">Another action</a></li>
            <li><a href="javascript:void(0);">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="javascript:void(0);">Separated link</a></li>
          </ul>
        </li>
      </ul>
      <h3>.nav-tabs + .nav-tabs-pf</h3>
      <p class="text-info">
        <strong>Note:</strong> the markup semantics used here are sub-optimal in order to easily achieve a responsive layout.
      </p>
      <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:void(0);">Tab One</a></li>
        <li><a href="javascript:void(0);">Tab Two</a></li>
        <li><a href="javascript:void(0);">Tab Three</a></li>
        <li><a href="javascript:void(0);">Tab Four</a></li>
        <li><a href="javascript:void(0);">Tab Five</a></li>
        <li><a href="javascript:void(0);">Tab Six</a></li>
        <li><a href="javascript:void(0);">Tab Seven</a></li>
      </ul>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li class="active"><a href="javascript:void(0);">Secondary Tab One</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Two</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Three</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Four</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Five</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Six</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li class="active"><a href="javascript:void(0);">Tab One</a></li>
        <li><a href="javascript:void(0);">Tab Two</a></li>
        <li><a href="javascript:void(0);">Tab Three</a></li>
        <li><a href="javascript:void(0);">Tab Four</a></li>
        <li><a href="javascript:void(0);">Tab Five</a></li>
        <li><a href="javascript:void(0);">Tab Six</a></li>
        <li><a href="javascript:void(0);">Tab Seven</a></li>
      </ul>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="javascript:void(0);">Secondary Tab One</a></li>
        <li class="active"><a href="javascript:void(0);">Secondary Tab Two</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Three</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Four</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Five</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Six</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
      </ul>
      <br />
      <ul class="nav nav-tabs">
        <li><a href="javascript:void(0);">Tab One</a></li>
        <li class="active"><a href="javascript:void(0);">Tab Two</a></li>
        <li><a href="javascript:void(0);">Tab Three</a></li>
        <li><a href="javascript:void(0);">Tab Four</a></li>
        <li><a href="javascript:void(0);">Tab Five</a></li>
        <li><a href="javascript:void(0);">Tab Six</a></li>
        <li><a href="javascript:void(0);">Tab Seven</a></li>
      </ul>
      <ul class="nav nav-tabs nav-tabs-pf">
        <li><a href="javascript:void(0);">Secondary Tab One</a></li>
        <li class="active"><a href="javascript:void(0);">Secondary Tab Two</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Three</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Four</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Five</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Six</a></li>
        <li><a href="javascript:void(0);">Secondary Tab Seven</a></li>
      </ul>
      <h3>.nav-tabs.nav-tabs-pf-secondary</h3>
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Tab One</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab Two</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab Three</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
            <li class="active"><a href="javascript:void(0);">Secondary Tab A</a></li>
            <li><a href="javascript:void(0);">Secondary Tab B</a></li>
            <li><a href="javascript:void(0);">Secondary Tab C</a></li>
          </ul>
        </div>
        <div class="tab-pane" id="tab2">
          <ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
            <li class="active"><a href="javascript:void(0);">Secondary Tab D</a></li>
            <li><a href="javascript:void(0);">Secondary Tab E</a></li>
            <li><a href="javascript:void(0);">Secondary Tab F</a></li>
          </ul>
        </div>
        <div class="tab-pane" id="tab3">
          <ul class="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
            <li class="active"><a href="javascript:void(0);">Secondary Tab G</a></li>
            <li><a href="javascript:void(0);">Secondary Tab H</a></li>
            <li><a href="javascript:void(0);">Secondary Tab I</a></li>
          </ul>
        </div>
      </div>