Panel #

A content panel that supports folding panels. The Panel can have all the ' Data Display ' components and can be used as a container for the form.

Import #

import { Panel, PanelGroup } from 'rsuite';

Examples #

Basic #

With border #

With shadow #

With action button #

No header #

Card #

Card group #

Collapsible #

Fill the container #

Panel group #

Collapsible panel group #

Accordion effect #

Only one panel can be expanded.

Accessibility #

ARIA properties #

• When the Panel is collapsible, set the aria-expanded property on the button to identify whether the current panel is expanded.
• When the Panel is collapsible, set the aria-controls property on the button to identify the content area of the current panel.
• When the Panel is collapsible, set the aria-labelledby property on the content area to identify the title of the current panel.

Keyboard interactions #

• When the Panel is collapsible, press the Enter or Space key to expand or collapse the panel.
• When the Panel is collapsible, press the Tab key to move the focus to the next focusable panel.

Props #

<Panel> #

Property	Type (Default)	Description
bodyFill	boolean	Content area filled with containers
bordered	boolean	Show border
classPrefix	string ('panel')	The prefix of the component CSS class
collapsible	boolean	Whether it is a collapsible panel
defaultExpanded	boolean	Expand by default
eventKey	string	The event key corresponding to the panel.
expanded	boolean	Expand the Panel.
header	ReactNode	The head displays information.
id	string	HTML ID attribute
shaded	boolean	With shadow

<PanelGroup> #

Property	Type (Default)	Description
accordion	boolean	Whether it is a collapsible panel.
activeKey	string	Expand the Panel, corresponding to the 'Panel' of 'eventkey'
classPrefix	string	The prefix of the component CSS class
defaultActiveKey	string	The default expansion panel.
onSelect	(eventKey: string, event) => void	Toggles the callback function for the expand panel