Tab Panel

<ahi-tab-panel> | AhiTabPanel

Tab panels are used inside tab groups to display tabbed content.

Office Overview

Pre-Cert Counts

RCM Dashboard

Disabled

This is the Office Overview tab panel.

This is the Pre-Cert Counts tab panel.

This is the RCM Dashboard tab panel.

This is a disabled tab panel.

<ahi-tab-group>
  <ahi-tab slot="nav" panel="office-overview">Office Overview</ahi-tab>
  <ahi-tab slot="nav" panel="pre-cert-counts">Pre-Cert Counts</ahi-tab>
  <ahi-tab slot="nav" panel="rcm-dashboard">RCM Dashboard</ahi-tab>
  <ahi-tab slot="nav" panel="disabled" disabled>Disabled</ahi-tab>
  <ahi-tab-panel name="office-overview">
    This is the Office Overview tab panel.
  </ahi-tab-panel>
  <ahi-tab-panel name="pre-cert-counts">
    This is the Pre-Cert Counts tab panel.
  </ahi-tab-panel>
  <ahi-tab-panel name="rcm-dashboard">
    This is the RCM Dashboard tab panel.
  </ahi-tab-panel>
  <ahi-tab-panel name="disabled">This is a disabled tab panel.</ahi-tab-panel>
</ahi-tab-group>

Additional demonstrations can be found in the tab group examples.

Importing

Script

Bundler

To import this component using a script tag:

<script type="module" src="/path/to/azalea-kit-ui/dist/components/tab-panel/tab-panel.js"></script>

To import this component using a bundler:

import '@azaleahealth/azalea-kit-ui/dist/components/tab-panel/tab-panel.js';

Slots

Name	Description
(default)	The tab panel’s content.

Learn more about using slots.

Properties

Name	Description	Type	Default
`name`	The tab panel’s name.	`string`	`''`
`active`	When true, the tab panel will be shown.	`boolean`	`false`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about properties and attributes.

Custom Properties

Name	Description	Default
`--padding`	The tab panel’s padding.

Learn more about customizing CSS custom properties.

CSS Parts

Name	Description
`base`	Deprecated. Style the host element instead.

Learn more about customizing CSS parts.