PatternFly Elements - Home PatternFly Elements v2 prerelease v1

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.

Section 1: Infrastructure and Management

Content 1:

Section 2: Cloud Computing

Storage

Runtimes

All Products

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.

Installation

npm install @patternfly/pfe-primary-detail

Usage

Default

Header

Section 1: Infrastructure and Management

Content 1:

Section 2: Cloud Computing

Storage

Runtimes

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

  <h3 slot="details-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="details-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="details-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="details-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="details-nav--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 details-nav and details slotted elements.

Attributes

Methods

None

Events

pfe-primary-detail:shown-tab

Fires when a new tab is selected.

detail: {
  tab: DOM Element,
  details: DOM Element
}

pfe-primary-detail:hidden-tab

Fires when a selected tab is no longer the selected tab.

detail: {
  tab: DOM Element,
  details: DOM Element
}

Styling hooks

Variable name Default value Region
--pfe-primary-details--Border 1px solid #d2d2d2 N/A
--pfe-primary-details--GridTemplateColumns 1fr 2fr N/A
--pfe-primary-details__nav--Color #151515!important nav
--pfe-primary-details__nav--Color--active #06c!important nav
--pfe-primary-details__nav--Background--active #f0f0f0!important nav
--pfe-primary-details__details--Background #fff details