Semantic-UI Tab Types
Last Updated :
10 Mar, 2022
Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website. Semantic-UI Tab is a hidden section of content that can be activated by clicking it. The hidden Tab can be visible using the active class. Only one tab content is visible at a time and we can create any number of tabs. In this article, we will discuss Tab Type in Semantic-UI.
Semantic-UI Tab Types:
- tab: This class is used to create the tab.
Syntax:
<div class="ui top attached tabular menu">
....
</div>
<div class="ui bottom attached tab segment">
....
</div>
Example 1: The following code demonstrates the Semantic-UI Tab Type.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Tab Type</title>
<link href=
rel="stylesheet"/>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic-UI Tab Type </h3>
</div> <br>
<div class="ui top attached tabular menu">
<div class="active item"
data-tab="tab1">
GeeksforGeeks
</div>
</div>
<div class="ui bottom attached active tab segment"
data-tab="tab1">
<p>
A Computer Science portal for geeks.
It contains well written, well thought and
well explained computer science and articles.
</p>
</div>
</body>
</html>
|
Output:
Semantic-UI Tab Type
Example 2: The following code demonstrates the Semantic-UI Tab Type using more tabs.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"/>
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header"> GeeksforGeeks </h2>
<h3> Semantic-UI Tab Type </h3>
</div> <br>
<div class="ui top attached tabular menu">
<div class="active item"
data-tab="tab1">
Tab1
</div>
<div class="item"
data-tab="tab2">
Tab2
</div>
<div class="item"
data-tab="tab3">
Tab3
</div>
</div>
<div class="ui bottom attached active tab segment"
data-tab="tab1">
<p>
A Computer Science portal for geeks.
</p>
</div>
<div class="ui bottom attached tab segment"
data-tab="tab2">
<p>
GeeksforGeeks
</p>
</div>
<div class="ui bottom attached tab segment"
data-tab="tab3">
<p>
GeeksforGeeks.org
</p>
</div>
<script>
$('.menu .item').tab();
</script>
</body>
</html>
|
Output:
Semantic-UI Tab Type
Reference: https://semantic-ui.com/modules/tab.html#tab
Share your thoughts in the comments
Please Login to comment...