Getting startedFoundationsUtilitiesComponentsReleasesSupportGetting startedFoundationsUtilitiesComponentsReleasesComponent StatusAccordion GroupAccordionCollapseBadgeButtonButton DropdownCardStatus CardContentData GridData Grid Table HeaderDate PickerDate Picker InputDate Range PickerDate Range Picker ButtonInputSelectText AreaCheckboxCheckbox GroupRadio ButtonRadio Button GroupIconIcon LibraryListList Parent ItemList ItemList HeaderHeaderMobile SubheaderFooterFooter ItemSidebarAlertToastToast GroupDialogModalPanelPopoverPaginationSpinnerTabsTab GroupTabTab Panel GroupTab PanelToggle

Component Tab Panel

A tab panel wraps the content that will be displayed. It's used with the tab panel group component.

Get the UI kit

Example

This is panel 1
<som-tabs>
  <som-tab-group contained>
    <som-tab name="Tab one"></som-tab>
  </som-tab-group>
  <som-tab-panel-group>
    <som-tab-panel>
      <som-content>This is panel 1</som-content>  
    </som-tab-panel>
  </som-tab-panel-group>
</som-tabs>

Props

AttrTypeDefaultDocs

panel-id

string

generateId('som-tab-panel')

This property can be used to specifically set an ID to the tab panel. If an ID is not provided, it will be dynamically generated.

Healthy

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

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.

Open source