Tabs
Installation
Usage
<rh-tabs>
<rh-tab slot="tab">Tab 1</rh-tab>
<rh-tab-panel>Tab 1 content</rh-tab-panel>
<rh-tab slot="tab">Tab 2</rh-tab>
<rh-tab-panel>Tab 2 content</rh-tab-panel>
<rh-tab slot="tab">Tab 3</rh-tab>
<rh-tab-panel>Tab 3 content</rh-tab-panel>
<rh-tab slot="tab">Tab 4</rh-tab>
<rh-tab-panel>Tab 4 content</rh-tab-panel>
</rh-tabs>rh-tabs
| Slot Name | Description |
|---|---|
tab |
Must contain one or more |
|
Must contain one or more |
| DOM Property | Description | Type | Default |
|---|---|---|---|
labelScrollLeft |
Label for the scroll left button |
|
|
labelScrollRight |
Label for the scroll right button |
|
|
manual |
|
|
|
activeIndex |
Index of the active tab |
|
|
colorPalette |
Sets color context for child components, overrides parent context |
|
|
centered |
Aligns tabs to the center |
|
|
box |
Sets tabs to a boxed style with or without an inset |
|
|
vertical |
Sets the alignment of the tabs vertical |
|
|
| Method Name | Description |
|---|---|
select(option: RhTab | number) |
None
| 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
|
None
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 |
| DOM Property | Description | Type | Default |
|---|---|---|---|
active |
|
|
|
disabled |
|
|
|
None
| 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
|
None
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 |
None
None
None
None
None
None
