Spectre Tabs
Last Updated :
21 Jun, 2022
Spectre Tabs is used to create tabs for showing content on the page. It is a kind of routing to a different component without redirecting to a different page. Tabs allows quickly switch between different views. Tabs are the crucial component in Spectre, you can use icons, badge anything on tabs.
To create a tab you need to add a container element with the tab class. And add child elements with the tab-item class. You can add the tab-block class for a full-width tab. The tab-item or its child <a> with the active class will be highlighted.
Spectre Tabs Class:
- tab: This class is used to create a tab component.
- tab-item: This class is used to set the tab’s item.
- tab-block: This class is used to make the tab a full-width tab.
Syntax:
<ul class="tab tab-block">
<li class="tab-item ">
<a href="#">...</a>
</li>
...
</ul>
The below example illustrates the Spectre Tabs:
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
</ head >
< body >
< center >
< h1 >GeeksforGeeks</ h1 >
< strong >SPECTRE Tabs Class</ strong >
< br >< br >
</ center >
< strong >Normal Tabs:</ strong >
< ul class = "tab tab-block" >
< li class = "tab-item" >
< a href = "#" >HTML</ a >
</ li >
< li class = "tab-item" >
< a href = "#" >CSS</ a >
</ li >
< li class = "tab-item" >
< a href = "#" >JS</ a >
</ li >
< li class = "tab-item" >
< a href = "#" class = "active" >Spectre</ a >
</ li >
</ ul >
< br >< br >
< strong >Badge & Action Tabs:</ strong >
< ul class = "tab tab-block" >
< li class = "tab-item" >
< a href = "#" class = "badge" data-badge = "9" >
Notification
</ a >
</ li >
< li class = "tab-item active" >
< a href = "#" >
Music
< i class = "icon icon-cross" ></ i >
</ a >
</ li >
</ ul >
</ body >
</ html >
|
Output:
Spectre Tabs
Reference: https://picturepan2.github.io/spectre/components/tabs.html
Share your thoughts in the comments
Please Login to comment...