Semantic-UI Tab States
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.
<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.
Example 2: This example demonstrates the Semantic UI Loading state using the loading class.