Spectre Tabs
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 = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 >w3wiki</ 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:
Reference: https://picturepan2.github.io/spectre/components/tabs.html