Tabs are greatly used on iOS and macOS apps, and this is a component that was a long time in the making. Desktop tabs where created by jesusrobot so props to him for helping out! To use the Tabs components, you can use the tab component by using the CSS of Tabs or downloading the full CSS and downloading the JS for tabs (Not recommended if you are just going to use this component).

Desktop tabs.

The desktop tabs are composed of two main parts. First the tabs and then the panels with the content. You can add more tabs by just adding buttons inside the p-tabs and more panels inside the p-panels with their respective classes. The toggling of the tabs is managed by the JavaScript of the component.

Service 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto et unde ut eligendi repudiandae nostrum id rerum perferendis. Architecto vel, in accusantium tempore dolore enim accusamus molestiae ex nisi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto et unde ut eligendi repudiandae nostrum id rerum perferendis. Architecto vel, in accusantium tempore dolore enim accusamus molestiae ex nisi?Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem architecto et unde ut eligendi repudiandae nostrum id rerum perferendis. Architecto vel, in accusantium tempore dolore enim accusamus molestiae ex nisi?

Service 2

Service 3

Usage:

				
<div class="p-tabs-container" id="tab_example">
    <div class="p-tabs">
      <button class="p-tab p-is-active">Service 1</button>
      <button class="p-tab">Service 2</button>
      <button class="p-tab">Service 3</button>
    </div>
    <div class="p-panels">
      <div class="p-panel p-is-active">
        <!-- CONTENT HERE -->
      </div>
      <div class="p-panel">
        <!-- CONTENT HERE -->
      </div>
      <div class="p-panel">
        <!-- CONTENT HERE -->
      </div>
    </div>
</div>

Mobile tabs.

Mobile tabs are very different both in functionality and markup to the desktop tabs. To use it you need to have a unique id for every tab and use the attribute data-p-mobile-toggle to change the tab. Every other event is managed by the JavaScript. You can use text, icons or both inside of the mobile controls and it will adapt accordingly.

Hello

This is the first tab

Hello2

This is the second tab

Hello3

This is the third tab

Hello4

This is the fourth tab

Home

News

Options

Account

Usage:

        
<div class="p-mobile-tabs-content">
  <div class="p-mobile-tabs--content active" id="demo1">
    <!-- CONTENT HERE -->
    </div>
  <div class="p-mobile-tabs--content" id="demo2">
    <!-- CONTENT HERE -->
  </div>
  <div class="p-mobile-tabs--content" id="demo3">
    <!-- CONTENT HERE -->
  </div>
  <div class="p-mobile-tabs--content" id="demo4">
    <!-- CONTENT HERE -->
  </div>
  
  <div class="p-mobile-tabs">
  <div>
    <a href="#" class="active" data-p-mobile-toggle="#demo1">
      <!-- SVG ICON -->
      Home
    </a>
  </div>
  <div>
    <a href="#" data-p-mobile-toggle="#demo2">
      <!-- SVG ICON -->
      News
    </a>
  </div>
  <div>
    <a href="#" data-p-mobile-toggle="#demo3">
      <!-- SVG ICON -->
      Options
    </a>
  </div>
  <div>
    <a href="#" data-p-mobile-toggle="#demo4">
      <!-- SVG ICON -->
      Account
    </a>
  </div>
</div>
</div>