Tab
| Last update: | () |
| Message | feat(tab): badge |
| Committer: | dkocsis |
| Version history | |
Default
<div class="e-tabs">
<input type="radio" name="tabs-1" id="tabs-1-0" checked="checked">
<label for="tabs-1-0" class="e-tabs__title">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-1" id="tabs-1-1">
<label for="tabs-1-1" class="e-tabs__title">
<span class="e-tabs__separator">
Tab 2
</span>
</label>
<input type="radio" name="tabs-1" id="tabs-1-2" disabled>
<label for="tabs-1-2" class="e-tabs__title">
<span class="e-tabs__separator">
Disabled
</span>
</label>
<input type="radio" name="tabs-1" id="tabs-1-3">
<label for="tabs-1-3" class="e-tabs__title">
<span class="e-tabs__separator">
Tab 4
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
<div class="e-tabs">
<input type="radio" name="tabs-1" id="tabs-1-0" checked="checked">
<label for="tabs-1-0" class="e-tabs__title"><span class="e-tabs__separator">Tab 1</span></label>
<input type="radio" name="tabs-1" id="tabs-1-1">
<label for="tabs-1-1" class="e-tabs__title"><span class="e-tabs__separator">Tab 2</span></label>
<input type="radio" name="tabs-1" id="tabs-1-2" disabled>
<label for="tabs-1-2" class="e-tabs__title"><span class="e-tabs__separator">Disabled</span></label>
<input type="radio" name="tabs-1" id="tabs-1-3">
<label for="tabs-1-3" class="e-tabs__title"><span class="e-tabs__separator">Tab 4</span></label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="e-tabs__panel__content">2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="e-tabs__panel__content">3Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="e-tabs__panel__content">4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
</div>
</div>1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Variations
Nested tab
<div class="e-tabs">
<input type="radio" name="tabs-2" id="tabs-2-0" checked="checked">
<label for="tabs-2-0" class="e-tabs__title">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-2" id="tabs-2-1">
<label for="tabs-2-1" class="e-tabs__title">
<span class="e-tabs__separator">
Nested tab
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">
Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
<h2>
Nested tab
</h2>
<div class="e-tabs">
<input type="radio" name="tabs-3" id="tabs-3-0" checked="checked">
<label for="tabs-3-0" class="e-tabs__title">
<span class="e-tabs__separator">
Tab 1
</span>
</label>
<input type="radio" name="tabs-3" id="tabs-3-1">
<label for="tabs-3-1" class="e-tabs__title">
<span class="e-tabs__separator">
Tab 2
</span>
</label>
<input type="radio" name="tabs-3" id="tabs-3-2" disabled>
<label for="tabs-3-2" class="e-tabs__title">
<span class="e-tabs__separator">
Disabled
</span>
</label>
<input type="radio" name="tabs-3" id="tabs-3-3">
<label for="tabs-3-3" class="e-tabs__title">
<span class="e-tabs__separator">
Tab 4
</span>
</label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
</div>
</div>
</div>
</div>
</div>
<div class="e-tabs">
<input type="radio" name="tabs-2" id="tabs-2-0" checked="checked">
<label for="tabs-2-0" class="e-tabs__title"><span class="e-tabs__separator">Tab 1</span></label>
<input type="radio" name="tabs-2" id="tabs-2-1">
<label for="tabs-2-1" class="e-tabs__title"><span class="e-tabs__separator">Nested tab</span></label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
</div>
<div class="e-tabs__panel__content">
<h2>Nested tab</h2>
<div class="e-tabs">
<input type="radio" name="tabs-3" id="tabs-3-0" checked="checked">
<label for="tabs-3-0" class="e-tabs__title"><span class="e-tabs__separator">Tab 1</span></label>
<input type="radio" name="tabs-3" id="tabs-3-1">
<label for="tabs-3-1" class="e-tabs__title"><span class="e-tabs__separator">Tab 2</span></label>
<input type="radio" name="tabs-3" id="tabs-3-2" disabled>
<label for="tabs-3-2" class="e-tabs__title"><span class="e-tabs__separator">Disabled</span></label>
<input type="radio" name="tabs-3" id="tabs-3-3">
<label for="tabs-3-3" class="e-tabs__title"><span class="e-tabs__separator">Tab 4</span></label>
<div class="e-tabs__panel">
<div class="e-tabs__panel__content">1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="e-tabs__panel__content">2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="e-tabs__panel__content">3Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="e-tabs__panel__content">4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
</div>
</div>
</div>
</div>
</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
Nested tab
1Lorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitrLorem ipsum dolor sit amet, consetetur sadipscing elitr
2Lorem ipsum dolor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Loreor sit amet, consetetur sadipscing elitr Lorem ipsum dolor sit amet, consetetur sadipscing elitr
3Lorem ipsum dolor sit amet, consetetur sadipscing elitr
4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr4Lorem ipsum dolor sit amet, consetetur sadipscing elitr
Without checkbox
<div class="e-tabs">
<div class="e-tabs__title">
<a class="e-tabs__separator">
Tab 1
</a>
</div>
<div class="e-tabs__title e-tabs__title-active">
<a class="e-tabs__separator">
Active Tab
</a>
</div>
<div class="e-tabs__title e-tabs__title-disabled">
<a class="e-tabs__separator">
Disabled Tab
</a>
</div>
</div>
<div class="e-box">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="e-tabs">
<div class="e-tabs__title"><a class="e-tabs__separator">Tab 1</a></div>
<div class="e-tabs__title e-tabs__title-active"><a class="e-tabs__separator">Active Tab</a></div>
<div class="e-tabs__title e-tabs__title-disabled"><a class="e-tabs__separator">Disabled Tab</a></div>
</div>
<div class="e-box">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
With badge
<div class="e-tabs">
<div class="e-tabs__title e-tabs__title-active">
<a class="e-tabs__separator">
Tab 1
<span class="e-tabs__badge text-color-warning">
1
<e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
</span>
</a>
</div>
<div class="e-tabs__title">
<a class="e-tabs__separator">
Tab 2
<span class="e-tabs__badge text-color-warning">
3
<e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
</span>
</a>
</div>
<div class="e-tabs__title e-tabs__title-disabled">
<a class="e-tabs__separator">
Tab 3
<span class="e-tabs__badge text-color-warning">
15
<e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon>
</span>
</a>
</div>
</div>
<div class="e-box">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="e-tabs">
<div class="e-tabs__title e-tabs__title-active"><a class="e-tabs__separator">Tab 1<span class="e-tabs__badge text-color-warning">1
<e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon></span></a></div>
<div class="e-tabs__title"><a class="e-tabs__separator">Tab 2<span class="e-tabs__badge text-color-warning">3
<e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon></span></a></div>
<div class="e-tabs__title e-tabs__title-disabled"><a class="e-tabs__separator">Tab 3<span class="e-tabs__badge text-color-warning">15
<e-icon icon="exclamation-circle" size="small" color="inherit"></e-icon></span></a></div>
</div>
<div class="e-box">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.