Open In App

Semantic-UI Tab States

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI offers a tab component for users to bundle up different categories of content, showing only one category of content at a time. The other options are shown in boxes aligned in one row. Users can click any one of the options to view that option.  There are different states of Semantic UI Tabs. 

Semantic UI Tab States Class:

  • Active: This class is used to set the tab status as “active”. If the content of the tab is static or already loaded then the content can be tagged with active class.
  • Loading: This class is used to set the tab status as “loading”. A loader will appear if content is tagged with loading class. Loader indicates that the content loading is in progress.

Syntax:

<div class="ui ...tab segment loading">
   ....
</div>

Note: The developer can use the tab state class in the syntax as per the need.

Below example will illustrate the Semantic UI Tab States:

Example 1: This example demonstrates the Semantic UI Active state using the active class.  By default tab 1 is active as seen in the image below. Users can click on the other tabs to make it an active state and view their respective data.     

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet" />
</head>
  
<body>
    <br/>
    <div class="ui container">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2
        <strong>Semantic UI Tab Active State</strong>
        <div class="ui top attached tabular menu">
           <div class="active item" data-tab="first">Tab</div>
           <div class="item" data-tab="second">Tab 2</div>
           <div class="item" data-tab="third">Tab 3</div>
        </div>
        <div class="ui bottom attached active tab segment" 
             data-tab="first">
           <p>Sample data 1:</p>
  
           <p
              As the placement season is back,
              GeeksforGeeks is here to help you 
              crack the interview. We have selected
              some most commonly asked and MUST DO
              practice problems to crack Product-based
              Company Interviews.
  
              You can also take part in our mock placement
              contests which will help you learn different
              topics and practice at the same time, simulating
              the feeling of a real placement test environment.
           </p>
  
        </div>
        <div class="ui bottom attached tab segment" 
             data-tab="second">
           <p>Sample data 2:</p>
  
           <p
              As the placement season is back,
              GeeksforGeeks is here to help you 
              crack the interview. We have selected
              some most commonly asked and MUST DO
              practice problems to crack Product-based
              Company Interviews.
  
              You can also take part in our mock placement
              contests which will help you learn different
              topics and practice at the same time, simulating
              the feeling of a real placement test environment.
           </p>
  
        </div>
        <div class="ui bottom attached tab segment" 
             data-tab="third">
           <p>Sample data 3:</p>
  
           <p
              As the placement season is back,
              GeeksforGeeks is here to help you 
              crack the interview. We have selected
              some most commonly asked and MUST DO
              practice problems to crack Product-based
              Company Interviews.
  
              You can also take part in our mock placement
              contests which will help you learn different
              topics and practice at the same time, simulating
              the feeling of a real placement test environment.
           </p>
  
        </div>
    </div>
    <script>
       $('.menu .item').tab();                  
    </script>
</body>
</html>


Output:

Semantic-UI Tab States

Semantic-UI Tab States

Example 2:  This example demonstrates the Semantic UI Loading state using the loading class. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
  </script>
</head>
  
<body>
    <br/>
    <br/>
    <div class="ui container">
        <h2 class="header ui green">
            GeeksforGeeks
        </h2
        <strong>Semantic UI Tab Loading State</strong>
        <div class="ui top attached tabular menu">
            <div class="active item">Tab</div>
        </div>
        <div class="ui bottom attached loading tab segment">
            <p>Loading of content is complete</p>
  
            <br>
        </div>
    </div>
    <script>
        $('.menu .item').tab();
    </script>
</body>
</html>


Output:

Semantic-UI Tab States

Semantic-UI Tab States

Reference: https://semantic-ui.com/modules/tab.html



Last Updated : 10 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads