Quick starts

About

The @patternfly/quickstarts extension is made up of two product documentation tools: quick starts and in-app documentation.

Full live demo application

To learn more about quick starts and in-app documentation, you may view examples in a live demo, explore the demo code, or continue reading below.

Quick starts

A quick start is a set of step-by-step instructions and tasks presented in a side panel embedded within a product’s UI. Quick starts can help users get started with a product by providing installation and setup guidance.

A quick start has multiple tasks, each with multiple steps. On completion, a quick start gives users the artifacts or state needed to successfully use a product, specific features, or add-ons.

Side panel elements

For more quick start details and visuals, view the design guidelines.

Quick start format

For developers

To learn more about quick starts:

For content authors

Quick starts can be written in yaml with markdown support, asciidoc, or json. To learn more about each of these formats, view example files.

Opening and closing the side panel

Custom handler

To open the side panel of a quick start, call the setActiveQuickStart or setActiveQuickstartID methods. These methods are provided by QuickStartContext and can be accessed in your React components:

const { setActiveQuickStart } = React.useContext<QuickStartContextValues>(
    QuickStartContext,
  );

Quick start catalog

To generate a full-page catalog view, add a set of quick starts to a QuickStartContainer. Clicking on a catalog card will open its respective quick start in a side panel.

Quick start catalog

In-app documentation

In-app documentation defines topics that are relevant to a product. A HelpTopic is a single unit of in-app documentation that contains a content section, which defines the term or topic, and an optional list of links to provide the user with other relevant information.

HelpTopics are displayed in a side panel just like quick starts:

quick start catalog

HelpTopic format

For developers

To learn more about HelpTopics:

For content authors

A HelpTopic is written in yaml with markdown support. View an example yaml file.

Opening and closing the side panel

To open a side panel, call the setActiveHelpTopicByName method(available from HelpTopicContext) and include the name of a HelpTopic.

const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);

To close a side panel, call the setActiveHelpTopicByName method and pass in an empty string.

There is no prebuilt HelpTopic catalog: to build one, attach a handler to the appropriate DOM element using the setActiveHelpTopicByName method. For more details, see the basic example or the live demo code.

We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.