Component Tab Group

This component is used to create a container that can hold multiple tab items. It's used with the tab component.

Example

View code

<som-tabs>
    <som-tab-group contained>
        <som-tab name="Tab one"></som-tab>
        <som-tab name="Tab two"></som-tab>
        <som-tab name="Tab three" active></som-tab>
    </som-tab-group>
</som-tabs>

Props

Attr	Type	Default	Docs
color	"gray" \| "white"	'white'	This property determines the background color of the tabs and tab panel
contained	boolean	false	This boolean changes the style to a contained tab
dark	boolean	false	This boolean ensures that tabs will be on a dark background
underline	boolean	false	This boolean adds an underline to the active tab.

Methods

Name	Returns	Docs
showTab	Promise will resolve when the change animation ends.	This method will open a specific tab by passing in the tab array index.

Events

Event	Detail	Docs
tabChange	any	This event will be triggered after a tab has changed. The return will the `index` of the new active tab.

Healthy

Healthy content is accurate and represents our most up-to-date recommendations.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.

Get in touch

Do you have an idea, or want to help us improve this page? Reach out to us via email.

DTMB-DG-Support@michigan.gov

Need help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.