Tabs are used inside tab groups to represent and activate tab panels.
import '@ods/components/web.tab';Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.
This component is still in development and cannot be imported at this time.
| Name | Description |
|---|---|
| (default) | The tab's label. |
Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.
| Property/Attribute | Reflects | Type | Default |
|---|---|---|---|
panel | string | '' | |
active | boolean | false | |
closable | boolean | false | |
disabled | boolean | false | |
tabIndex | number | -1 |
| React Event | Description | Event Detail |
|---|---|---|
| ods-close | Emitted when the tab is closable and the close button is activated. | -- |
| Name | Description |
|---|---|
| base | The component's base wrapper. |
| close-button | The close button, an `<ods-icon-button>`. |
| close-button__base | The close button's exported `base` part. |
This component automatically imports the following dependencies.
This section includes guidelines for designers and developers about the usage of this component in different contexts.