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

SectionExpandable

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 SectionExpandable from '@concur/nui-widgets/lib/Section/SectionExpandable';

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

SectionExpandable can optionally contain a Content component

Example

const paragraph = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis, justo ac mattis convallis, est ligula maximus felis, sed pretium. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed at porta eros, vel fermentum lacus.";

<SectionExpandable title='Heading'>
    <SectionExpandable.Content>{paragraph}</SectionExpandable.Content>
</SectionExpandable>

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.
headerClassName String   Custom classes to be added to the <header>.
headingClassName String   Custom classes to be added to the <h#> tag, where # is the headingLevel.
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.
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), event Callback function when the section is toggled between expanded and collapsed.

SectionExpandable.Content

Properties

Property Type Default Description
children Node   The content that will appear within the <p> tag.
className String   Custom classes to add to the <p> tag.