Primary Detail

Overview

A primary-detail layout is an interface that shows a list of items and the corresponding details of the selected item. This component is an implementation of one of the "Primary detail simple list in card" from Patternfly React. Reworks title/description content into a vertical-primary-detail like interface.

Installation

npm install @patternfly/pfe-primary-detail

Usage

Default

<pfe-primary-detail>
  <h2 slot="header">
    <a href="#">Primary detail demo!</a>
  </h2>

  <h3 slot="nav">Section 1: Infrastructure and Management</h3>
  <div slot="details">
    <p>Content 1:</p>
    <ul>
      <li><a href="#">Lorum ipsum dolor sit amet</a></li>
      <li><a href="#">Aliquam tincidunt mauris eu risus</a></li>
      <li><a href="#">Morbi in sem quis dui placerat ornare</a></li>
      <li><a href="#">Praesent dapibus, neque id cursus faucibus</a></li>
      <li><a href="#">Pellentesque fermentum dolor</a></li>
    </ul>
  </div>

  <h3 slot="nav">Section 2: Cloud Computing</h3>
  <div slot="details">
    <ul>
      <li><a href="#">Praesent dapibus, neque id cursus faucibus</a></li>
      <li><a href="#">Morbi in sem quis dui placerat ornare</a></li>
      <li><a href="#">Pellentesque fermentum dolor</a></li>
      <li><a href="#">Lorum ipsum dolor sit amet</a></li>
    </ul>
  </div>

  <h3 slot="nav">Storage</h3>
  <ul slot="details">
    <li><a href="#">Pellentesque fermentum dolor</a></li>
    <li><a href="#">Morbi in sem quis dui placerat ornare</a></li>
    <li><a href="#">Praesent dapibus, neque id cursus faucibus</a></li>
  </ul>

  <h3 slot="nav">Runtimes</h3>
  <ul slot="details">
    <li><a href="#">Aliquam tincidunt mauris eu risus</a></li>
    <li><a href="#">Pellentesque fermentum dolor</a></li>
    <li><a href="#">Morbi in sem quis dui placerat ornare</a></li>
    <li><a href="#">Praesent dapibus, neque id cursus faucibus</a></li>
  </ul>

  <div slot="footer" style="padding: 1em 0.75em 2em;">
    <pfe-cta priority="primary"><a href="#">All Products</a></pfe-cta>
  </div>
<pfe-primary-detail>

Slots

For this component to work, there should be an equal number of nav and details slotted elements.

header

In case content needs to be added at the top of the navigation area; this will not be matched up with details content.

nav

Added to each heading; builds the navigation that shows the related content.

footer

In case content needs to be added at the bottom of the navigation; will not be matched up with details content.

details

Added to the content, directly following the heading to which it relates.

Attributes

consistent-height

Makes sure the primary details element doesn't change height when a different details item is shown.

DOM Property

consistentHeight

Type

boolean

Default

false

breakpoint-width

The min-width of the component where it has a desktop layout

DOM Property

breakpointWidth

Type

number

Default

800

active

The id of the active nav element, or null

DOM Property

active

Type

string|null

Default

null

expandedSectionTitle

Used to set text of back button *

DOM Property

expandedSectionTitle

Type

string | undefined

Default

unknown

DOM Properties

Methods

Events

change

Fires when a new tab is selected.

primaryDetails.addEventListener('change', event => {
  console.log('selected tab is', event.tab);
  console.log('selected details is', event.details);
  if (event.previousTab)
    console.log('previous tab was', event.previousTab);
  if (event.previousDetails)
    console.log('previous details was', event.previousDetails);
});

Event Type:

PrimaryDetailChangeEvent

CSS Custom Properties

CSS Shadow Parts

nav

container for the nav items

details

container for the detailed content

footer

container for the element footer

Accessibility

The provided markup should be semantic so that if the component can't load, the user still has an appropriate experience. Once it upgrades, the appropriate tab interactions and markup for assistive tech is added to the component.