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 |