<OdsTabPanelname="general">This is the general tab panel.</OdsTabPanel>
<OdsTabPanelname="custom">This is the custom tab panel.</OdsTabPanel>
<OdsTabPanelname="advanced">This is the advanced tab panel.</OdsTabPanel>
<OdsTabPanelname="disabled">This is a disabled tab panel.</OdsTabPanel>
</OdsTabGroup>
)
}
exportdefaultExample;
Closable Tabs
Add the closable attribute to a tab to show a close button. This example shows how you can dynamically remove tabs from the DOM when the close button is activated.
GeneralClosable 1Closable 2Closable 3This is the general tab panel.This is the first closable tab panel.This is the second closable tab panel.This is the third closable tab panel.
When focused, keyboard users can press Left or Right to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting activation=“manual” which will require the user to press Space or Enter before showing the tab panel (manual activation).
GeneralCustomAdvancedDisabledThis is the general tab panel.This is the custom tab panel.This is the advanced tab panel.This is a disabled tab panel.
<OdsTabPanelname="general">This is the general tab panel.</OdsTabPanel>
<OdsTabPanelname="custom">This is the custom tab panel.</OdsTabPanel>
<OdsTabPanelname="advanced">This is the advanced tab panel.</OdsTabPanel>
<OdsTabPanelname="disabled">This is a disabled tab panel.</OdsTabPanel>
</OdsTabGroup>
)
}
exportdefaultExample;
Tabs with Routers
When using Tabs with routers like React Router, do not use Tab Panel. To handle routing, listen for a click event on Tab Group and provide a handler to implement your route.
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.
Slots
Name
Description
(default)
Used for grouping tab panels in the tab group. Must be `<ods-tab-panel>` elements.
nav
Used for grouping tabs in the tab group. Must be `<ods-tab>` elements.
Properties
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
active
string
''
placement
'top' | 'bottom' | 'start' | 'end'
'top'
activation
'auto' | 'manual'
'auto'
noScrollControls
no-scroll-controls
boolean
false
hidetrack
boolean
false
Events
React Event
Description
Event Detail
ods-tab-show
Emitted when a tab is shown.
--
ods-tab-hide
Emitted when a tab is hidden.
--
Methods
Name
Description
Arguments
show()
Shows the specified tab panel.
--
Parts
Name
Description
base
The component's base wrapper.
nav
The tab group's navigation container where tabs are slotted in.
tabs
The container that wraps the tabs.
active-tab-indicator
The line that highlights the currently selected tab.
body
The tab group's body where tab panels are slotted in.
scroll-button
The previous/next scroll buttons that show when tabs are scrollable, an `<ods-icon-button>`.
scroll-button--start
The starting scroll button.
scroll-button--end
The ending scroll button.
scroll-button__base
The scroll button's exported `base` part.
Dependencies
This component automatically imports the following dependencies.
ods-icon
ods-icon-button
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
Use Tabs to contain multiple panels of content within a single window or container
Use Tabs to organize similar content types related to the user needs
Dont
Use tabs as a primary navigation pattern - use side nav
Use any other components within tab groups other than tabs