Tab Panel

<afp-tab-panel>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A component to hold the content associated with a tab in a tab group. Displays its panel when its tab is selected.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias animi aspernatur at corporis distinctio earum fugit ipsam laborum libero, maxime, modi nam quia sequi similique. Est, vel, vero! Consequuntur.

<afp-tab-panel active>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias animi aspernatur at corporis distinctio earum fugit ipsam laborum libero, maxime, modi nam quia sequi similique. Est, vel, vero! Consequuntur.
</afp-tab-panel>

<afp-tab-panel active>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias animi aspernatur at corporis distinctio earum fugit ipsam laborum libero, maxime, modi nam quia sequi similique. Est, vel, vero! Consequuntur.
</afp-tab-panel>

<AfpTabPanel active>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias animi aspernatur at corporis distinctio earum fugit ipsam laborum libero, maxime, modi nam quia sequi similique. Est, vel, vero! Consequuntur.
</AfpTabPanel>

<AfpTabPanel active>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias animi aspernatur at corporis distinctio earum fugit ipsam laborum libero, maxime, modi nam quia sequi similique. Est, vel, vero! Consequuntur.
</AfpTabPanel>

Use in conjunction with the Tab component to create tab panels associated with <afp-tab> elements.

Properties

Learn more about properties.

Name	Description	Reflects
`name`	The tab panel's name. Type `string`
`active`	When true, the tab panel will be shown. Type `boolean` Default `false`

Slots

Learn more about slots.

Name	Description
`default`	The default slot.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The container for the tab panel.	`::part(base)`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/tab-panel/tab-panel.js';