<wa-tab-panel>
Tab panels are used inside tab groups to display tabbed content.
<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.
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The tab panel's content. |
Learn more about attributes and properties.
| Name | Description | Reflects | |
|---|---|---|---|
namename |
The tab panel's name.
Type
stringDefault
'' |
|
|
activeactive |
When true, the tab panel will be shown.
Type
booleanDefault
false |
|
Learn more about CSS custom properties.
| Name | Description |
|---|---|
--padding |
The tab panel's padding.
|
Learn more about CSS parts.
| Name | Description |
|---|---|
base |
The component's base wrapper. |
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.9/dist/components/tab-panel/tab-panel.js';