Tabs

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-tabs
  3. rh-tab
  4. rh-tab-panel
  1. Usage
  2. rh-tabs
  3. rh-tab
  4. rh-tab-panel

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-tabs/rh-tabs.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-tabs/rh-tabs.js": "./elements/rh-tabs/rh-tabs.js"
  },
  "scopes": {
    "./": {
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.2/development/index.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/rh-icon/rh-icon.js": "./elements/rh-icon/rh-icon.js",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.2/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

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

Slots 2
Slot Name Description
tab

Must contain one or more <rh-tab>

Must contain one or more <rh-tab-panel>
Attributes 8
Attribute DOM Property Description Type Default
label-scroll-left labelScrollLeft

Label for the scroll left button

 
string

'Scroll left'
label-scroll-right labelScrollRight

Label for the scroll right button

 
string

'Scroll right'
manual manual

Tabs can be either automatic activated or manual

 
boolean

false
active-index activeIndex

Index of the active tab

 
unknown

unknown
color-palette colorPalette

Sets color context for child components, overrides parent context

 
ColorPalette | undefined

unknown
centered centered

Aligns tabs to the center

 
boolean

false
box box

Sets tabs to a boxed style with or without an inset

 
'box' | 'inset' | undefined

unknown
vertical vertical

Sets the alignment of the tabs vertical

 
boolean

false
Methods 1
Method Name Description
select(option: RhTab | number)
Events 0

None

 CSS Shadow Parts 4
Part Name Description
container

outer container
tabs-container

tabs container
tabs

tablist
panels

panels
CSS Custom Properties 2
CSS Property Description Default
--rh-tabs-border-color

Tabs Border color

 #c7c7c7
--rh-tabs-inset

Tabs inset

 auto
Design Tokens 14
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

The tab button for use within a rh-tabs element, must be paired with a rh-tab-panel.

Slots 2
Slot Name Description
icon

Can contain an <svg> or <rh-icon>

Tab title text
Attributes 2
Attribute DOM Property Description Type Default
active active

True when the tab is selected

 
boolean

false
disabled disabled

True when the tab is disabled

 
boolean

false
Methods 0

None

 Events 1
Event Name Description
expand

when a tab expands
CSS Shadow Parts 3
Part Name Description
button

element that contains the interactive part of a tab
icon

icon <span> element
text

tile text <span> element
CSS Custom Properties 6
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
Design Tokens 16
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

rh-tab-panel

The tab panel for use within a rh-tabs element, must be paired with a rh-tab.

Slots 1
Slot Name Description

Panel content should follow guidelines for tab panel content layout
Attributes 0

None

 Methods 0

None

 Events 0

None

 CSS Shadow Parts 0

None

 CSS Custom Properties 0

None

 Design Tokens 1
Token Copy
--rh-space-2xl
Edit this page on GitHub