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

PanelExpandable

There is a breaking change to this component in the next version of NUI Widgets.
  • To align better with other components, props will be spread to the outer wrapping section element. Use buttonProps to add additional props to the button element.
import PanelExpandable from '@concur/nui-widgets/lib/Panel/PanelExpandable';

The PanelExpandable component is a specialized version of a Panel that provides a method for showing or hiding the body content.

Example

<PanelExpandable title='Panel Expandable'>
    Panel Content
</PanelExpandable>

<PanelExpandable
    panelStyle='basic'
    title='Panel Basic Expandable'>
    Panel Content
</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>.
collapseLabel String 'Collapse' Sets the button’s aria-label attribute when expanded.
expanded Boolean true When false, the children nodes (body content) will be hidden.
expandLabel String 'Expand' Sets the button’s aria-label attribute when collapsed.
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'.
ref Ref or Function   Attach a ref to the <section> element.
titleIsHidden Boolean false If true, the title text will be hidden from sighted readers but will remain accessible to screen readers.

Callbacks

Property Parameters Description
onExpand expanded (Boolean) Callback function when the section is toggled between expanded and collapsed.