Panel #

A content panel that supports collapsible, shadow, and border containers.

Import #

import { Panel, PanelGroup } from 'rsuite';

Examples #

Basic #

With border #

With shadow #

Scroll shadows #

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
bodyProps	HTMLAttributes	The properties of the content area
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
scrollShadow	boolean	The shadow of the content when scrolling
shaded	boolean	Add shadow effect to the border

<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