Content set

Overview

Content set brings together the utilities of the accordion and tabs components. Effectively both of these components do the same job, which is to encapsulate chunks of information under headings for easier browsing. Hiding some information and allowing the user to toggle through the headings to show other bits of information.

Since tabs can pose a layout issue on mobile because of the lack of horizontal space, this component will first assess the width of the parent container. If the width of pfe-content-set is less than or equal to 700px, the component will render the content within the <pfe-accordion> component. If it is larger than this value, the content will be rendered within the <pfe-tabs> component.

Large screens

On large screens the content will display as tabs.

Heading 1

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore

Heading 2

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu et jen, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Heading 3

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Small screens

On small screens the content will display as an accordion.

Installation

npm install @patternfly/pfe-content-set

Usage

Each header must have an attribute of pfe-content-set--header and each panel must have an attribute of pfe-content-set--panel. Each header must be immediately followed by a panel.

<pfe-content-set>
  <h2 pfe-content-set--header>Heading 1</h2>
  <p pfe-content-set--panel>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
  <h2 pfe-content-set--header>Heading 2</h2>
  <p pfe-content-set--panel>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam volu et jen, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <h2 pfe-content-set--header>Heading 3</h2>
  <p pfe-content-set--panel>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</pfe-content-set>

Slots

None

Attributes

tab-history (observed)

If pfe-content-set renders as pfe-tabs, the tab-history attribute enables the component to update window.history and the URL to create sharable links.

With the tab-history attribute, pfe-content-set and elements with the pfe-content-set--header attribute must have an id attribute set for this to work.

Example Markup

<pfe-content-set id="my-content-set" tab-history>
  <h2 pfe-content-set--header id="heading1">Heading 1</h2>
  <p pfe-content-set--panel id="panel1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
  <h2 pfe-content-set--header id="heading2">Heading 2</h2>
  <p pfe-content-set--panel id="panel2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
</pfe-content-set>

becomes

<pfe-content-set id="my-content-set" tab-history>
  <pfe-tabs pfe-id="my-content-set">
    <pfe-tab pfe-id="heading1">
      <h2 pfe-content-set--header id="heading1">Heading 1</h2>
    </pfe-tab>
    <pfe-tab-panel pfe-id="panel1">
      <p pfe-content-set--panel id="panel1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
    </pfe-tab-panel>
    <pfe-tab pfe-id="heading2">
      <h2 pfe-content-set--header id="heading2">Heading 1</h2>
    </pfe-tab>
    <pfe-tab-panel pfe-id="panel2">
      <p pfe-content-set--panel id="panel2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
    </pfe-tab-panel>
  </pfe-tabs>
</pfe-content-set>

Note how the id attributes from pfe-content-set and elements with the pfe-content-set--header attribute pass the value of the id attribute to its corresponding tab element and sets the pfe-id attribute.

How to use a URL pattern to open a specific tab

The URL pattern will be ?{id-of-tabs}={id-of-selected-tab}. In the example above, selecting "Heading 2" will update the URL as follows: ?my-content-set=heading2.

If pfe-content-set renders as pfe-tabs, by default, pfe-tabs will read the URL and look for a query string parameter that matches the pfe-id of a pfe-tabs component and a value of a specific pfe-tab.

pfe-content-set and elements with the pfe-content-set--header attribute must have an id attribute set for this to work.

Example Markup

<pfe-content-set id="my-content-set">
  <h2 pfe-content-set--header id="heading1">Heading 1</h2>
  <p pfe-content-set--panel id="panel1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
  <h2 pfe-content-set--header id="heading2">Heading 2</h2>
  <p pfe-content-set--panel id="panel2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
</pfe-content-set>

becomes

<pfe-content-set id="my-content-set">
  <pfe-tabs pfe-id="my-content-set">
    <pfe-tab pfe-id="heading1">
      <h2 pfe-content-set--header id="heading1">Heading 1</h2>
    </pfe-tab>
    <pfe-tab-panel pfe-id="panel1">
      <p pfe-content-set--panel id="panel1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
    </pfe-tab-panel>
    <pfe-tab pfe-id="heading2">
      <h2 pfe-content-set--header id="heading2">Heading 1</h2>
    </pfe-tab>
    <pfe-tab-panel pfe-id="panel2">
      <p pfe-content-set--panel id="panel2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore </p>
    </pfe-tab-panel>
  </pfe-tabs>
</pfe-content-set>

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

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.

Note: This feature is not supported in IE11.

Variants

• default (no extra attributes)
  • Accordion: On the heading, there is a caret pointing to the right, on the left edge. When expanded, a border appears around the whole content set and the caret points downward.
  • Tabs: A border appears which includes the active tab and excludes the inactive tabs. There is a colored indicator on the active tab, and a monochromatic indicator on the inactive tabs.
• variant="wind"
  • Accordion: No effect.
  • Tabs: Borders are removed, only an accent colored indicator appears under the active heading.
• variant="earth"
  • Accordion: No effect.
  • Tabs: Headings are encased in a block. The active heading has an accent colored border on one side.
• vertical
  • Accordion: No effect.
  • Tabs: Headings stack on the left, content pane is shown on the right.
• align="center"
  • Accordion: No effect.
  • Tabs: Tabs are centered.
• breakpoint="500px
  • You may set a custom breakpoint at which the content set upgrade to tabs above that number and accordions below.
  • The value can contain the px suffix or not

Methods

None

Events

None

Styling hooks

Since this is a combo, all variables and styles are coming from the pfe-accordion and pfe-tabs. Please check those components if CSS variable overrides are needed.

Note that headings and content are picked up and moved inside the shadow DOM, so they cannot receive styles from CSS applied to the page.