Getting Started

Content

Layout

Forms

Components

Accordion CollapseAlertBadgeBoxBreadcrumbButtonCardDropdownLoaderModalPaginationProgress BarStepsTabsDefault Lined Style Helpers DisabledTagToastToolip

Utilities

Styleguide

Tabs

Attention: the use of the components needs the squid.js included in the project

Attention + 1: Probably the interaction via Javascript should not work well in SPA applications (independent of the framework React, Angular, Vuejs, etc). For now we have no implementation but we will create in the future, for now just use the styles and create your own implementation

Default

Home
Profile
Messages
Settings

Content 1

Content 2

Content 3

Content 4

<div class="tabs-container" data-tabs>
  <ul class="tabs-header">
    <li>
      <!-- Tab 1 Header HTML -->
    </li>
  </ul>
  <div class="tabs-wrapper-content">
    <div class="tab-content">
      <!-- Tab 1 Content Html -->
    </div>
  </div>
</div>

Lined Style

To change tab style just add .line-style to .tabs-hader container. To change line color just change the attribute background-color inside ::before element on <li> with .active class

Home
Profile
Messages
Settings

Content 1

Content 2

Content 3

Content 4

<div class="tabs-container" data-tabs>
  <ul class="tabs-header line-style">
    <!-- Tabs -->
  </ul>
  ...
</div>

Helpers

Disabled

Just add .disabled to disable a tab and prevent click

Active

Just add .active to active default an tab on page load

Tabs Center

Add .tabs-center to .tabs-header container to centralize header tabs

Tabs Width

Add .tabs-width to .tabs-header container to Tabs grow to 100% container size

Minor tabs

Add .sm to each li in tabs header to create minor tabs