<wa-tab-panel>
Tab panels are used inside tab groups to display tabbed content.
<wa-tab-group> <wa-tab slot="nav" panel="general">General</wa-tab> <wa-tab slot="nav" panel="custom">Custom</wa-tab> <wa-tab slot="nav" panel="advanced">Advanced</wa-tab> <wa-tab slot="nav" 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.
| Name | Description |
|---|---|
| (default) | The tab panel's content. |
| Name | Description | Reflects | |
|---|---|---|---|
namename
|
The tab panel's name.
Type
string
Default
''
|
|
|
activeactive
|
When true, the tab panel will be shown.
Type
boolean
Default
false
|
|
| Name | Description |
|---|---|
--padding |
The tab panel's padding.
|
| 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.4/dist/components/tab-panel/tab-panel.js';