Tab

The Tab component allows users to organize content into multiple panels, each accessible by clicking on a tab label. It supports both horizontal and vertical layouts, and provides a clean way to display related content in a compact space.

Description #

The Tab component is an interactive element that enables users to switch between different content panels. It supports two main layouts:

• Horizontal Tabs: Tab labels are arranged in a row. Clicking a label shows the corresponding content panel below.

• Vertical Tabs: Tab labels are arranged in a column. Clicking a label shows the corresponding content panel to the side or below, depending on layout.

Tabs help organize related content and improve user experience by reducing clutter and making navigation intuitive.

Examples and Classes #

Horizontal Tabs Example

        

            

                

                    
Tab 1
                    
Tab 2
                    
Tab 3
                
                

                    
Tab 1 content
                    
Tab 2 content
                    
Tab 3 content
                
            
        
        

            
            
HTML
            
        
    <div class="tab-container flex-column">
    <div class="tab-labels flex-row">
        <div class="tab-label active">Tab 1</div>
        <div class="tab-label">Tab 2</div>
        <div class="tab-label">Tab 3</div>
    </div>
    <div class="tab-contents">
        <div class="tab-content active">Tab 1 content</div>
        <div class="tab-content">Tab 2 content</div>
        <div class="tab-content">Tab 3 content</div>
    </div>
</div>

Vertical Tabs Example

        

            

                

                    
Tab 1
                    
Tab 2
                    
Tab 3
                
                

                    
Tab 1 content
                    
Tab 2 content
                    
Tab 3 content
                
            
        
        

            
            
HTML
            
        
    <div class="tab-container flex-column">
    <div class="tab-labels flex-column">
        <div class="tab-label active">Tab 1</div>
        <div class="tab-label">Tab 2</div>
        <div class="tab-label">Tab 3</div>
    </div>
    <div class="tab-contents">
        <div class="tab-content active">Tab 1 content</div>
        <div class="tab-content">Tab 2 content</div>
        <div class="tab-content">Tab 3 content</div>
    </div>
</div>

Horizontal Tabs in Row Container

        

            

                

                    
Tab 1
                    
Tab 2
                    
Tab 3
                
                

                    
Tab 1 content
                    
Tab 2 content
                    
Tab 3 content
                
            
        
        

            
            
HTML
            
        
    <div class="tab-container flex-row">
    <div class="tab-labels flex-row">
        <div class="tab-label active">Tab 1</div>
        <div class="tab-label">Tab 2</div>
        <div class="tab-label">Tab 3</div>
    </div>
    <div class="tab-contents">
        <div class="tab-content active">Tab 1 content</div>
        <div class="tab-content">Tab 2 content</div>
        <div class="tab-content">Tab 3 content</div>
    </div>
</div>

Vertical Tabs in Row Container

        

            

                

                    
Tab 1
                    
Tab 2
                    
Tab 3
                
                

                    
Tab 1 content
                    
Tab 2 content
                    
Tab 3 content
                
            
        
        

            
            
HTML
            
        
    <div class="tab-container flex-row">
    <div class="tab-labels flex-column">
        <div class="tab-label active">Tab 1</div>
        <div class="tab-label">Tab 2</div>
        <div class="tab-label">Tab 3</div>
    </div>
    <div class="tab-contents">
        <div class="tab-content active">Tab 1 content</div>
        <div class="tab-content">Tab 2 content</div>
        <div class="tab-content">Tab 3 content</div>
    </div>
</div>

Available Classes

Class	Description
.tab-container	Main wrapper for the tab component. Controls the layout and spacing of tab labels and content panels.
.tab-labels	Container for tab labels. Can be arranged in a row or column for horizontal or vertical tabs.
.tab-label	Individual tab label. Clicking switches the visible content panel. .active highlights the selected tab.
.tab-contents	Wrapper for all tab content panels. Only the active panel is shown.
.tab-content	Individual content panel for each tab. .active makes the panel visible.
.active	Applied to the selected tab label and visible content panel.

Layout Variations

The Tab component supports different layout variations:

• Horizontal Tabs: Tab labels in a row, content below
• Vertical Tabs: Tab labels in a column, content beside or below
• Multiple Tab Groups: Multiple tab containers can be used on a page

File Locations #

File	Path	Description
index.html	miz/themes/mizoon/components/tab/index.html	Example implementation and documentation
_index.scss	miz/themes/mizoon/components/tab/_index.scss	SCSS styles and variables
script.js	miz/themes/mizoon/components/tab/script.js	JavaScript functionality

SCSS Variables #

        

            
            
SCSS
            
        
        $tab-labels: ".border-style-solid, .border-color, .bw-1, .border-t-none, .border-b-none, .border-l-none, .bg-primary-color";
$tab-label: ".bg-primary-color, .bw-0, .border-style-solid, .border-t-none, .border-b-none, .border-l-none, .border-color, .on-primary-color";
$tab-label-transition: 0.2s linear;
$tab-label-hover-custom-classes: ".bg-on-primary-color, .secondary-color";
$tab-label-active-custom-classes: ".bw-2, .bg-secondary-color, .on-primary-color, .font-weight-bold, .z-index-2";
$tab-label-active-last-child-custom-classes: ".bw-0, .bg-secondary-color, .on-primary-color, .font-weight-bold, .z-index-2";
$tab-contents: ".w-100, .position-relative, .bg-on-primary-color, .py-3, .px-2";
$tab-content: ".d-none, .w-100, .py-3, .px-2, .text-color, .bg-on-primary-color";
$tab-content-active: ".d-inline-block";

    

JavaScript Implementation #

Class Structure

Method/Property	Type	Description
tabContainers	Property	NodeList of all tab-container elements
tabLabels	Property	NodeList of all tab-label elements within a container
tabContents	Property	NodeList of all tab-content elements within a container
Event: click	Event	Switches the active tab and content panel on click

Implementation Example

        

            
            
JavaScript
            
        
        document.addEventListener('DOMContentLoaded', function() {
  const tabContainers = document.querySelectorAll('.tab-container');

  tabContainers.forEach(container => {
    const tabLabels = container.querySelectorAll('.tab-labels .tab-label');
    const tabContents = container.querySelectorAll('.tab-contents .tab-content');

    tabLabels.forEach((label, idx) => {
      label.addEventListener('click', function() {
        tabLabels.forEach(l => l.classList.remove('active'));
        tabContents.forEach(c => c.classList.remove('active'));
        this.classList.add('active');
        tabContents[idx].classList.add('active');
      });
    });
  });
});