Benjamin Palko
f526f5c0aa
Some checks failed
Deploy / deploy (push) Failing after 39s
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com> Reviewed-on: #5
909 B
909 B
tab
Tabs can be used to show a list of links in a tabbed format
Class Names:
- Component:
tabs - Part:
tab,tab-content - Style:
tabs-box,tabs-border,tabs-lift - Size:
tabs-xs,tabs-sm,tabs-md,tabs-lg,tabs-xl - Modifier:
tab-active,tab-disabled - Placement:
tabs-top,tabs-bottom
Syntax
Using buttons:
<div role="tablist" class="tabs {MODIFIER}">
<button role="tab" class="tab">Tab</button>
</div>
Using radio inputs:
<div role="tablist" class="tabs tabs-box">
<input type="radio" name="my_tabs" class="tab" aria-label="Tab" />
</div>
Rules
- {MODIFIER} is optional and can have one of the style/size class names
- Radio inputs are needed for tab content to work with tab click
- If tabs gets a background then every tab inside it becomes rounded from both top corners