PatternFly Elements - Home PatternFly Elements

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.

Section 1: Infrastructure and Management

Content 1:

Section 2: Cloud Computing

Storage

Runtimes

All Products

Installation

npm install @patternfly/pfe-primary-detail

Usage

Default

Section 1: Infrastructure and Management

Content 1:

Section 2: Cloud Computing

Storage

Runtimes

All Products
<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

None

Methods

None

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

Deprecated Events

pfe-primary-detail:shown-tab

Fires when a new tab is selected.

Note: pfe-primary-detail:shown-tab is deprecated.

Use change

Event Type:
CustomEvent<{ tab: HTMLElement; details: HTMLElement }>
pfe-primary-detail:hidden-tab

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

Note: pfe-primary-detail:hidden-tab is deprecated.

Use change

Event Type:
CustomEvent<{ tab: HTMLElement; details: HTMLElement }>

CSS Custom Properties

CSS Property Description Default
--pfe-primary-details--Border

N/A

1px solid #d2d2d2

--pfe-primary-details--GridTemplateColumns

N/A

1fr 2fr

--pfe-primary-details__nav--Color

nav

#151515!important

--pfe-primary-details__nav--Color--active

nav

#06c!important

--pfe-primary-details__nav--Background--active

nav

#f0f0f0!important

--pfe-primary-details__details--Background

details

#fff

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.