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
Vercel banner