MIZ

Github

MIZ v1.20.1

v1.20.1

Browse docs

Tabs Component

The Tabs component allows you to create a set of tabs with individual content for each tab. It adapts to different screen sizes and supports responsive behavior.

Basic Example #

Here’s a basic example of the Tabs component. Clicking on each tab will reveal its respective content.

    
This is the content of Tab 1.
This is the content of Tab 2.
This is the content of Tab 3.

    

    

        
        
HTML

        
    

    <div class="tab-container">

      <div class="tab active">
            <div class="tab-content">
                  <p>This is the content of Tab 1.</p>
                  <button type="button" class="btn btn-primary section-title-text-color">Primary</button>
            </div>
      </div>
      <div class="tab">
            <div class="tab-content">
                  <p>This is the content of Tab 2.</p>
            </div>
      </div>
      <div class="tab">
            <div class="tab-content">
                  <p>This is the content of Tab 3.</p>
            </div>
      </div>
</div>

⚠️ Warning: To use this code, you need to apply the active class and make changes with JavaScript (JS).

CSS Classes #

Class Description
.tab-container The container for the tabs, flex layout is applied to align the tabs horizontally.
.tab Each tab block containing the radio input, label, and content.
.tab-label The clickable label for each tab.
.tab-content The content displayed when the tab is selected.

SCSS Structure #

The Tabs component uses SCSS to handle styling, including mixins like @extend for shared styles and @for for dynamic tab generation.

Key SCSS Features #

Responsive Design #

The tabs are designed to be responsive. On screens smaller than 600px, the tabs switch from horizontal to vertical alignment.

Customization #

You can customize the appearance of the tabs by overriding the default styles, such as changing the background color or adjusting the transition effects.

On this page