Puppertino

/

Examples

/

Tabs

#

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).

### Note on Previous Versions

In earlier versions of Puppertino, tabs were exclusively links. In the latest version, you now have the option to use either Buttons or Links, offering greater flexibility for appropriate actions while maintaining proper semantics and accessibility.

## 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

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 3

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?

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

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>
        <button class="active" data-p-mobile-toggle="#demo1">
          <!-- SVG ICON -->
          Home
        </button>
      </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>