PatternFly Elements - Home PatternFly Elements

Tabs

Overview

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.

Horizontal tabs

Tab 1

Tab 1 content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima a, vero harum animi libero quos tenetur error quisquam unde ad quidem autem perspiciatis magni blanditiis vel velit nulla nisi sit! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique voluptatem quasi voluptas minima, reprehenderit in nam molestiae inventore doloremque repudiandae, nobis tempore. Suscipit dignissimos voluptatem explicabo soluta veritatis officiis dolor.

Tab 2

Tab 2 content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia architecto numquam iste quae expedita inventore animi quod veniam aut, fugiat eveniet, a maxime, ullam est veritatis vero esse illo suscipit.

Tab 3

Tab 3 content

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, deserunt nostrum itaque magnam, incidunt ipsam enim magni expedita, quasi quos cum illum nisi vel obcaecati? Eaque temporibus aliquam dolorem facere.

Vertical tabs

Tab 1

Tab 1 content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima a, vero harum animi libero quos tenetur error quisquam unde ad quidem autem perspiciatis magni blanditiis vel velit nulla nisi sit! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique voluptatem quasi voluptas minima, reprehenderit in nam molestiae inventore doloremque repudiandae, nobis tempore. Suscipit dignissimos voluptatem explicabo soluta veritatis officiis dolor.

Tab 2

Tab 2 content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia architecto numquam iste quae expedita inventore animi quod veniam aut, fugiat eveniet, a maxime, ullam est veritatis vero esse illo suscipit.

Tab 3

Tab 3 content

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse, deserunt nostrum itaque magnam, incidunt ipsam enim magni expedita, quasi quos cum illum nisi vel obcaecati? Eaque temporibus aliquam dolorem facere.

Installation

npm install @patternfly/pfe-tabs

Usage

For each pfe-tab, you are responsible for setting the role="heading"and slot="tab".

For each pfe-tab-panel, you are responsible for setting role="region" and slot="panel".

Horizontal

Tab 1

Content 1

Tab 1 panel content.

Tab 2

Content 2

Tab 2 panel content.

 
<pfe-tabs>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Horizontal: centered

Tab 1

Content 1

Tab 1 panel content.

Tab 2

Content 2

Tab 2 panel content.

 
<pfe-tabs tab-align="center">
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Horizontal: earth variant

Tab 1

Content 1

Tab 1 panel content.

Tab 2

Content 2

Tab 2 panel content.

 
<pfe-tabs variant="earth">
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Vertical

Tab 1

Content 1

Tab 1 panel content.

Tab 2

Content 2

Tab 2 panel content.

 
<pfe-tabs vertical>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Vertical: earth variant

Tab 1

Content 1

Tab 1 panel content.

Tab 2

Content 2

Tab 2 panel content.

 
<pfe-tabs vertical variant="earth">
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 1</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab">
    <h1>Tab 2</h1>
  </pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Slots

Default Slot

Place the pfe-tab and pfe-tab-panel elements here.

Slots on pfe-tab

Default Slot

Add the heading for your tab here.

Slots on pfe-tab-panel

Default Slot

Add the content for your tab panel here.

Attributes

View the tab history demo
context

Changes the context of the call-to-action to one of 3 possible options: This will override any context being passed from a parent component and will add a style attribute setting the --context variable. {@default 'light'}

Type
'light'|'dark'|'saturated'
Default
unknown
color-palette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

Card always resets its context to base, unless explicitly provided with a color-palette.

DOM Property
colorPalette
Type
ColorPalette | undefined
Default
unknown
on

Sets color theme based on parent context

DOM Property
on
Type
ColorTheme | undefined
Default
unknown
variant

Values:

  • wind: Borders are removed, only an accent colored indicator appears under the active heading.
  • earth: Headings are encased in a block. The active heading has an accent colored border on one side.
<pfe-tabs variant="wind">
  ...
</pfe-tabs>
DOM Property
variant
Type
'wind'|'earth'
Default
'wind'
vertical

Orients the tabs vertically on the left and pushes the content panes to the right.

<pfe-tabs vertical>
  ...
</pfe-tabs>
DOM Property
vertical
Type
boolean
Default
false
selected-index

Sets and reflects the currently selected tab index.

<pfe-tabs selected-index="2">
  ...
</pfe-tabs>
DOM Property
selectedIndex
Type
number
Default
0
aria-orientation

Orientation

DOM Property
orientation
Type
'horizontal'|'vertical'
Default
'horizontal'
tabAlign

Tab alignment

DOM Property
tabAlign
Type
'center' | undefined
Default
unknown
aria-controls
DOM Property
controls
Type
string | undefined
Default
unknown
tab-history

Updates window.history and the URL to create sharable links. With the tab-history attribute, the tabs and each tab must have an id.

The URL pattern will be ?{id-of-tabs}={id-of-selected-tab}. In the example below, selecting "Tab 2" will update the URL as follows: ?my-tabs=tab2.

<pfe-tabs tab-history id="my-tabs">
  <pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

Using the URL to open a specific tab

By default, pfe-tabs will read the URL and look for a query string parameter that matches the id of a pfe-tabs component and a value of a specific pfe-tab.

For example, ?my-tabs=tab2 would open the second tab in the code sample below. "my-tabs" is equal to the id of the pfe-tabs component and "tab2" is equal to the id of the second tab in the tab set.

<pfe-tabs id="my-tabs">
  <pfe-tab role="heading" slot="tab" id="tab1">Tab 1</pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 1</h2>
    <p>Tab 1 panel content.</p>
  </pfe-tab-panel>
  <pfe-tab role="heading" slot="tab" id="tab2">Tab 2</pfe-tab>
  <pfe-tab-panel role="region" slot="panel">
    <h2>Content 2</h2>
    <p>Tab 2 panel content.</p>
  </pfe-tab-panel>
</pfe-tabs>

In the event that a tab with the supplied id in the URL does not exist, pfe-tabs will fall back to the selected-index attribute if one is supplied in the markup, or the first tab if selected-index is not provided.

DOM Property
tabHistory
Type
boolean
Default
false
selected
DOM Property
selected
Type
boolean|PfeTab | undefined
Default
unknown
role
DOM Property
role
Type
string
Default
'tablist'

DOM Properties

None

Deprecated DOM Properties
color
Note: color is deprecated.

use color-palette
Type
ColorPalette | undefined
Default
unknown

Methods

select(newTab: Element)
selectIndex(_index: number|string)
reset()
updateAccessibility()

Events

pfe-tabs:shown-tab

Fires when a new tab is selected. The event.detail.tab will be the tab that has been selected.

Event Type: 
unknown
pfe-tabs:hidden-tab

Fires when a selected tab is no longer the selected tab. The event.detail.tab will be the tab that is no longer selected.

Event Type: 
unknown

CSS Custom Properties

CSS Property Description Default
--pfe-theme--container-padding

Tab padding and panel padding

16px
--pfe-theme--color--surface--border

Link color for default CTA

$pfe-color--surface--border
--pfe-theme--ui--border-style

Border style for selected tab

solid
--pfe-theme--ui--border-width

Border width for selected tab

1px
--pfe-theme--color--surface--lightest

Selected tab background color

$pfe-color--surface--lightest
--pfe-theme--color--surface--lightest--text

Default tab text color

$pfe-color--surface--lightest--text
--pfe-theme--color--surface--lightest--link

Tab hover and selected indicator color

$pfe-color--surface--lightest--link
--pfe-theme--color--surface--lightest--link--focus

Focused tab outline color

$pfe-color--surface--lightest--link--focus
--pfe-tabs__indicator--Display

Tab indicator display

block
--pfe-tabs__indicator--Height

Tab indicator height

4px
--pfe-tabs__indicator--Width

Tab indicator width

22px
--pfe-tabs__tab--TextTransform

Tab text transform

none

CSS Shadow Parts

tabs

container for the tab elements

panels

container for the panel elements