tabs.less
<div class="tab-group tab-style-01" id="tab-simpledemo-group-1">
<div class="tab selected" id="tab-simpledemo-1-01">
<span class="tab-icon"><i class="petalicon petalicon-star"></i></span>
<span class="tab-label">Selected Tab</span>
<span class="badge">1</span>
</div>
<div class="tab" id="tab-simpledemo-1-02">
<span class="tab-icon"><i class="petalicon petalicon-heart"></i></span>
<span class="tab-label">Normal Tab</span>
</div>
<div class="tab disabled" id="tab-simpledemo-1-02">
<span class="tab-icon"><i class="petalicon petalicon-not-allowed"></i></span>
<span class="tab-label">Disabled Tab</span>
</div>
<div class="tab spacer"></div>
</div>
You can make a simple tabbed interface with styles provided by Petal. Include markup for .tab in a .tab-group. The tab label text must be wrapped with span.tab-lable for proper styling. Add tab-icon, badge inside the tab if you need them.
.tab-group.tab-style-01 : Alternative design 1.tab-style-02 : Alternative design 2.compact : Compact size (half-sized paddings)Petal tab UI ships with hover, active, selected and disabled states. Hover and active states are handled by CSS pseudo-classes so you don't need to do anything. But for selected state, you need to write your own JavaScript code for adding and removing class accordingly. Add .selected and .disabled classes on .tab div where you want to apply respective states visually.
The tab UI uses CSS Flexbox properties and may not display properly on older unsupported browsers.
Use an empty div element with .tab.spacer class to add a spacer dummy tab that extends to the end of the tab-group bar. (See demo above)
<div class="tab-group tab-style-01">
<input type="radio" name="tab-nojs-group" id="tab-nojs01" checked>
<label for="tab-nojs01">
<div class="tab">
<span class="tab-icon"><i class="petalicon petalicon-device-mobile"></i></span>
<span class="tab-label">Mobile</span>
<span class="badge">1</span>
</div>
</label>
...
</div>
If you don't want to use JavaScript, you can use the radiobox method (utilizing :checked state and CSS adjacent selectors) to make it work without JavaScript. Markup is similar but the tab div goes into a wrapping <label>. Just before the <label> you need to place the <input type="radio">. Make sure you point the <label> to the correct corresponding <input> by matching the id and for attributes.
With this method, since tab refers to the radiobox's checked state for determining selected state, you don't need to manually add .selected class on tabs. Convenient!
If you want to disable one of the tabs, add a disabled attribute on corresponding <input> not tabs.
<div class="tab-group tab-style-02">
<input type="radio" name="tab-contentdemo-group" id="tab-contentdemo01" checked>
<label for="tab-contentdemo01"><div class="tab"><span class="tab-label">Tab 01</span></div></label>
<input type="radio" name="tab-contentdemo-group" id="tab-contentdemo02">
<label for="tab-contentdemo02"><div class="tab"><span class="tab-label">Tab 02</span></div></label>
<div class="tab spacer"></div>
<div class="tab-content-wrap">
<div id="tab-content-01" class="tab-content p-20">Tab 01 Content</div>
<div id="tab-content-02" class="tab-content p-20">Tab 02 Content</div>
</div>
</div>
// tab demo
.tab-demo {
.tab-content-wrap {
.tab-content {
display: none;
}
}
// show #tab-content-01 when #tab-contentdemo01 is checked
#tab-contentdemo01:checked ~ .tab-content-wrap #tab-content-01 {
display: block;
}
// show #tab-content-02 when #tab-contentdemo02 is checked
#tab-contentdemo02:checked ~ .tab-content-wrap #tab-content-02 {
display: block;
}
}
Going further, you can implement the actual tab content switching work without JavaScript too. This uses the same radiobox method as above. To do this, include the .tab-content-wrap inside the .tab-group, right after the last tab <label> element. Then write the CSS code that toggles the display of tab content using the sibling selector (~), like the demo above.
// tabs
@tab-color: @primary-accent-color;
@tab-style-01: enabled;
@tab-style-02: enabled;