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.

Usage

import { Panel, PanelGroup } from 'rsuite';

// or
import Panel from 'rsuite/Panel';
import PanelGroup from 'rsuite/PanelGroup';

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.

Props

<Panel>

Property Type (Default) Description
bodyFill boolean Content area filled with containers
bordered boolean Show border
shaded boolean With shadow
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 | number ID

<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