Tab Panel
<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.
Slots Jump to heading
Learn more about using slots.
Name | Description |
---|---|
(default) | The tab panel's content. |
Attributes & Properties Jump to heading
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 Jump to heading
Learn more about CSS custom properties.
Name | Description |
---|---|
--padding |
The tab panel's padding.
|
CSS parts Jump to heading
Learn more about CSS parts.
Name | Description |
---|---|
base |
The component's base wrapper. |
Importing Jump to heading
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.12/dist/components/tab-panel/tab-panel.js';