Tabs
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Add it to your page with this import statement
<script type="module">
import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Usage
<rh-tabs>
<rh-tab id="users" slot="tab">Users</rh-tab>
<rh-tab-panel>Users</rh-tab-panel>
<rh-tab slot="tab">Containers</rh-tab>
<rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
<rh-tab slot="tab">Database</rh-tab>
<rh-tab-panel>Database</rh-tab-panel>
<rh-tab slot="tab">Servers</rh-tab>
<rh-tab-panel>Servers</rh-tab-panel>
<rh-tab slot="tab">Cloud</rh-tab>
<rh-tab-panel>Cloud</rh-tab-panel>
</rh-tabs>
<script type="module">
import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>
<style>
a {
color: var(--rh-color-interactive-primary-default);
&:hover { color: var(--rh-color-interactive-primary-hover); }
&:focus-within { color: var(--rh-color-interactive-primary-focus); }
&:active { color: var(--rh-color-interactive-primary-active); }
&:visited {
color: var(--rh-color-interactive-primary-visited);
&:hover { color: var(--rh-color-interactive-primary-visited-hover); }
&:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
&:active { color: var(--rh-color-interactive-primary-visited-active); }
}
}
</style>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
rh-tabs
Tabs are used to organize and navigate between sections of content. They feature a horizontal or a vertical list of section text labels with a content panel below or to the right of the component.
Slot Name | Description |
---|---|
tab |
Must contain one or more |
|
Must contain one or more |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
label-scroll-left |
labelScrollLeft |
Label for the scroll left button |
|
|
label-scroll-right |
labelScrollRight |
Label for the scroll right button |
|
|
manual |
manual |
|
|
|
active-index |
activeIndex |
Index of the active tab |
|
|
color-palette |
colorPalette |
Sets color context for child components, overrides parent context |
|
|
centered |
centered |
Aligns tabs to the center |
|
|
box |
box |
Sets tabs to a boxed style with or without an inset |
|
|
vertical |
vertical |
Sets the alignment of the tabs vertical |
|
|
Method Name | Description |
---|---|
select(option: RhTab | number) |
Part Name | Description |
---|---|
container |
outer container |
tabs-container |
tabs container |
tabs |
tablist |
panels |
panels |
CSS Property | Description | Default |
---|---|---|
--rh-tabs-border-color |
Tabs Border color |
#c7c7c7
|
--rh-tabs-inset |
Tabs inset |
auto
|
Token | Copy |
---|---|
--rh-border-width-lg
|
|
--rh-border-width-sm
|
|
--rh-color-accent-base
|
|
--rh-color-border-subtle
|
|
--rh-color-gray-40
|
|
--rh-color-gray-50
|
|
--rh-color-surface
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-font-size-body-text-md
|
|
--rh-space-2xl
|
|
--rh-space-3xl
|
|
--rh-space-4xl
|
|
--rh-space-lg
|
|
rh-tab-panel
The tab panel for use within a rh-tabs element, must be paired with a rh-tab.
Slot Name | Description |
---|---|
|
Panel content should follow guidelines for tab panel content layout |
Token | Copy |
---|---|
--rh-space-2xl
|
|
rh-tab
The tab button for use within a rh-tabs element, must be paired with a rh-tab-panel.
Slot Name | Description |
---|---|
icon |
Can contain an |
|
Tab title text |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
active |
active |
True when the tab is selected |
|
|
disabled |
disabled |
True when the tab is disabled |
|
|
Event Name | Description |
---|---|
expand |
when a tab expands |
Part Name | Description |
---|---|
button |
element that contains the interactive part of a tab |
icon |
icon |
text |
tile text |
CSS Property | Description | Default |
---|---|---|
--rh-tabs-link-color |
Tab link text color |
#4d4d4d
|
--rh-tabs-active-border-color |
Tab active border color |
#ff442b
|
--rh-tabs-link-padding-inline-start |
Tab padding inline start |
32px
|
--rh-tabs-link-padding-block-start |
Tab padding block start |
16px
|
--rh-tabs-link-padding-inline-end |
Tab padding inline end |
32px`
|
--rh-tabs-link-padding-block-end |
Tab padding block end |
16px
|
Token | Copy |
---|---|
--rh-border-width-lg
|
|
--rh-border-width-sm
|
|
--rh-color-accent-brand
|
|
--rh-color-border-interactive
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-secondary-default
|
|
--rh-color-surface
|
|
--rh-color-surface-dark-alt
|
|
--rh-color-surface-lighter
|
|
--rh-color-text-primary
|
|
--rh-color-text-secondary
|
|
--rh-line-height-heading
|
|
--rh-space-2xl
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-xl
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.