@npmcorp/pui-css-tabs

tabs css component for the npm fork of Pivotal UI, based on Bootstrap

Stats

StarsIssuesVersionUpdatedCreatedSize
@npmcorp/pui-css-tabs
8.4.05 years ago6 years agoMinified + gzip package size for @npmcorp/pui-css-tabs in KB

Readme

@npmcorp/pui-css-tabs

A CSS tabs component that can be installed via this npm package. The package provides all of the CSS you need to use the component.

Installation

To install the package, from the command line, type:

npm install pui-css-tabs

Usage

Note: this requires Boostrap's JavaScript.

<div class="tab-highlight">
  <div class="row">
    <div class="col-md-8">
      <h1>Service Plans</h1>
      <ul class="nav nav-stacked">
        <li class="active">
          <a data-toggle="tab" href="#home">
            <div class="row">
              <div class="col-md-10 tab-title">Spark</div>
              <div class="col-md-14">Free</div>
            </div>
          </a>
        </li>
        <li>
          <a data-toggle="tab" href="#profile">
            <div class="row">
              <div class="col-md-10 tab-title">Boost</div>
              <div class="col-md-14">$10/month</div>
            </div>
          </a>
        </li>
        <li>
          <a data-toggle="tab" href="#messages">
            <div class="row">
              <div class="col-md-10 tab-title">Amp</div>
              <div class="col-md-14">$50/month</div>
            </div>
          </a>
        </li>
        <li>
          <a data-toggle="tab" href="#settings">
            <div class="row">
              <div class="col-md-10 tab-title">
                Shockingly long plan name is important to test
              </div>
              <div class="col-md-14">$1000/month</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="col-md-16">
      <h1>Plan Features</h1>
      <div class="tab-content">
        <div class="tab-pane fade in active" id="home">Content 1</div>
        <div class="tab-pane fade" id="profile">Content 2</div>
        <div class="tab-pane fade" id="messages">Content 3</div>
        <div class="tab-pane fade" id="settings">Content 4</div>
      </div>
    </div>
  </div>
</div>

You can find more examples of the tabs component in the pui style guide


This is a component of Pivotal UI. It is a Pivotal specific implementation of Bootstrap.

Styleguide Github

(c) Copyright 2015 Pivotal Software, Inc. All Rights Reserved.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.