NUI-Widgets documentation has moved to Storybook hosted on Github Pages.

Panel

import Panel from '@concur/nui-widgets/lib/Panel/Panel';

Panel components provide a wrapper around the Section component with the appropriate classes added to style the section as a panel. They can be used as building blocks for page design and organizing content.

Examples

Default

<Panel title='Panel Default'>
    Panel Content
</Panel>

<Panel muted title='Panel Default Muted'>
    Panel Content
</Panel>

Primary

<Panel
    panelStyle='primary'
    title='Panel Primary'>
    Panel Content
</Panel>

<Panel
    muted
    panelStyle='primary'
    title='Panel Primary Muted'>
    Panel Content
</Panel>

Basic

<Panel
    panelStyle='basic'
    title='Panel Basic'>
    Panel Content
</Panel>

<Panel
    muted
    panelStyle='basic'
    title='Panel Basic Muted'>
    Panel Content
</Panel>

Expandable

See PanelExpandable.

Usage

Properties

Name Type Default Description
children Node Required The “body” of the section; that is, any content that exists outside the <header> element but inside the <section> element.
title Node Required Content of the section heading. Must not contain only whitespace because concise yet descriptive headings are extremely important to screen readers. If this needs to be visually hidden, set the titleIsHidden property to true.
className String   Custom classes to be added to the wrapping <section>.
headingLevel Number 2 Sets the semantic heading level for the section heading: <h2>. Allowable values are 2 through 6. (<h1> headings are managed by the framework itself.)
iconName String   If set, an icon will be displayed to the left of the title text (and will be visible even when titleIsHidden is true). A list of available icons and their corresponding names can be found at Available Icons.
muted Boolean false When true, adds the muted style.
panelStyle String 'default' Styling option for the panel. Options are 'default', 'basic', 'primary'.
titleContent Node   Any content that resides to the right of the heading. Most often this will be used for buttons, status information, or other toolbar-like controls. It will normally align with the vertical center of the <h#> element, but will wrap beneath if necessary.
titleContentAlignment String 'right' Defines whether titleContent will be left- or right-justified after the initial <h#> heading. Allowable values are 'left' and 'right'.
titleIsHidden Boolean false If true, the title text will be hidden from sighted readers but will remain accessible to screen readers.