Skip to content

Deck.md

Latest commit

 

History

History
45 lines (32 loc) · 1.89 KB

Deck.md

File metadata and controls

45 lines (32 loc) · 1.89 KB
section Component groups
subsection Content containers
id Deck
source react
propComponents
Deck
DeckPage
DeckButton
ModalDeck
sourceLink https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/Deck/Deck.md

import Deck from '@patternfly/react-component-groups/dist/dynamic/Deck'; import { ModalDeck } from '@patternfly/react-component-groups/dist/dynamic/ModalDeck'; import { FunctionComponent, useState } from 'react';

The deck component is a compact, sequential container for presenting a suite of static announcements or an informational walkthrough. It is not intended for task completion or form-filling workflows.

Examples

Basic deck

This example demonstrates the basic deck with automatic navigation. Buttons can use the navigation prop to automatically handle page changes:

  • navigation: 'next' - Advances to the next page
  • navigation: 'previous' - Goes back to the previous page
  • navigation: 'close' - Triggers the onClose callback

You can also add custom onClick handlers for analytics, validation, or other logic. The custom onClick will be called before the automatic navigation occurs.



Modal deck


Display the deck in a modal dialog. The ModalDeck component wraps the Deck in a PatternFly Modal without a close button or extra padding, ideal for guided walkthroughs that require user interaction.