Components Tab Group

Tab Panel

<wa-tab-panel> Since 2.0 Stable

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

General Custom Advanced Disabled This is the general tab panel. This is the custom tab panel. This is the advanced tab panel. This is a disabled tab panel. 
<wa-tab-group>
  <wa-tab panel="general">General</wa-tab>
  <wa-tab panel="custom">Custom</wa-tab>
  <wa-tab panel="advanced">Advanced</wa-tab>
  <wa-tab panel="disabled" disabled>Disabled</wa-tab>

  <wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
  <wa-tab-panel name="custom">This is the custom tab panel.</wa-tab-panel>
  <wa-tab-panel name="advanced">This is the advanced tab panel.</wa-tab-panel>
  <wa-tab-panel name="disabled">This is a disabled tab panel.</wa-tab-panel>
</wa-tab-group>

Additional demonstrations can be found in the tab group examples.

Slots

Learn more about using slots.

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

Attributes & Properties

Learn more about attributes and properties.

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

CSS custom properties

Learn more about CSS custom properties.

Name Description
--padding
The tab panel's padding.

CSS parts

Learn more about CSS parts.

Name Description
base The component's base wrapper.

Importing

The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

To manually import this component from the CDN, use the following code. 

import 'https://early.webawesome.com/[email protected]/dist/components/tab-panel/tab-panel.js';
Coming soon! Coming soon!
    No results