Tabs
v-0.0.0
Default
Please add a checked a tabs__toggle to open a tab by default. This default tab should not have a disabled attribute.
Tab content here 1
Tab content here 2
Tab content here 3
Tab content here 4
Tab content here 5
html
<div class="tabs">
<div class="tabs__buttons">
<input class="tabs__toggle" checked type="radio" name="tab-toggle" id="tab-toggle-1" />
<label class="tabs__toggleLabel" for="tab-toggle-1">
Jour
</label>
<input class="tabs__toggle" type="radio" name="tab-toggle" id="tab-toggle-2" />
<label class="tabs__toggleLabel" for="tab-toggle-2">
Semaine
</label>
<input class="tabs__toggle" type="radio" name="tab-toggle" id="tab-toggle-3" />
<label class="tabs__toggleLabel" for="tab-toggle-3">
Mois
</label>
<input class="tabs__toggle" type="radio" name="tab-toggle" id="tab-toggle-4" />
<label class="tabs__toggleLabel" for="tab-toggle-4">
Année
</label>
<input class="tabs__toggle" type="radio" name="tab-toggle" id="tab-toggle-5" />
<label class="tabs__toggleLabel" for="tab-toggle-5">
Tout
</label>
</div>
<div class="tabs__container">
<div class="tabs__content">Tab content here 1</div>
<div class="tabs__content">Tab content here 2</div>
<div class="tabs__content">Tab content here 3</div>
<div class="tabs__content">Tab content here 4</div>
<div class="tabs__content">Tab content here 5</div>
</div>
</div>Tab with an icon
You can use the modifier tabs__toggleLabel--[iconName] to add an icon.
Tab content here 1
Tab content here 2
Tab content here 3
Tab content here 4
Tab content here 5
html
<div class="tabs">
<div class="tabs__buttons">
<input class="tabs__toggle" checked type="radio" name="tab-toggle" id="tab-toggle-1" />
<label class="tabs__toggleLabel tabs__toggleLabel--add" for="tab-toggle-1">
Jour
</label>
<input class="tabs__toggle" type="radio" name="tab-toggle" id="tab-toggle-2" />
<label class="tabs__toggleLabel tabs__toggleLabel--check" for="tab-toggle-2">
Semaine
</label>
<input class="tabs__toggle" type="radio" name="tab-toggle" id="tab-toggle-3" />
<label class="tabs__toggleLabel tabs__toggleLabel--gas" for="tab-toggle-3">
Mois
</label>
<input class="tabs__toggle" type="radio" name="tab-toggle" id="tab-toggle-4" />
<label class="tabs__toggleLabel tabs__toggleLabel--calendar" for="tab-toggle-4">
Année
</label>
<input class="tabs__toggle" type="radio" name="tab-toggle" id="tab-toggle-5" />
<label class="tabs__toggleLabel tabs__toggleLabel--folder" for="tab-toggle-5">
Tout
</label>
</div>
<div class="tabs__container">
<div class="tabs__content">Tab content here 1</div>
<div class="tabs__content">Tab content here 2</div>
<div class="tabs__content">Tab content here 3</div>
<div class="tabs__content">Tab content here 4</div>
<div class="tabs__content">Tab content here 5</div>
</div>
</div>Disabled
Tab content here 1
Tab content here 2
Tab content here 3
Tab content here 4
Tab content here 5
html
<div class="tabs">
<div class="tabs__buttons">
<input class="tabs__toggle" disabled type="radio" name="tab-toggle" id="tab-toggle-20" />
<label class="tabs__toggleLabel" for="tab-toggle-20">
Jour
</label>
<input class="tabs__toggle" disabled type="radio" name="tab-toggle" id="tab-toggle-21" />
<label class="tabs__toggleLabel" for="tab-toggle-21">
Semaine
</label>
<input class="tabs__toggle" disabled type="radio" name="tab-toggle" id="tab-toggle-22" />
<label class="tabs__toggleLabel" for="tab-toggle-22">
Mois
</label>
<input class="tabs__toggle" disabled type="radio" name="tab-toggle" id="tab-toggle-23" />
<label class="tabs__toggleLabel" for="tab-toggle-23">
Année
</label>
<input class="tabs__toggle" disabled type="radio" name="tab-toggle" id="tab-toggle-24" />
<label class="tabs__toggleLabel" for="tab-toggle-24">
Tout
</label>
</div>
<div class="tabs__container">
<div class="tabs__content">Tab content here 1</div>
<div class="tabs__content">Tab content here 2</div>
<div class="tabs__content">Tab content here 3</div>
<div class="tabs__content">Tab content here 4</div>
<div class="tabs__content">Tab content here 5</div>
</div>
</div>