Tab
<wa-tab>
Tabs label and activate an individual panel inside a tab group.
This component must be used as a child of <wa-tab-group>. Please see the Tab Group docs to see examples of this component in action.
Yoummday Extensions
Yoummday keeps the legacy tab typography while inheriting Web Awesome's current activation and accessibility behavior.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/tab/tab.js';
After installing Web Awesome via npm, import this component:
import '@yoummday/webawesome/dist/components/tab/tab.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/tab/tab.js';
To import this component for React 18 or below, use the following code:
import YoummdayTab from '@yoummday/webawesome/dist/react/tab/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The tab's label. |
Attributes & Properties
Learn more about attributes and properties.
| Name | Description | Reflects |
|---|---|---|
disableddisabled |
Disables the tab and prevents selection.
Type
boolean
Default
false
|
|
panelpanel |
The name of the tab panel this tab is associated with. The panel must be located in the same tab group.
Type
string
Default
''
|
|
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
tab |
The component's outer wrapper. |
::part(tab)
|
base |
Deprecated. Use the tab part instead. |
::part(base)
|