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.
<Panel><PanelGroup>
Usage
import { Panel, PanelGroup } from 'rsuite';Examples
Default
With border
With shadow
No header
Card
Card Group
Collapsible
Fill the container
Panel Group
Collapse 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 | any | The event key corresponding to the panel. |
| expanded | boolean | Expand the Panel. |
| header | React.Node | The head displays information. |
| id | string or number | ID |
<PanelGroup>
| Property | Type (Default) |
Description |
|---|---|---|
| accordion | boolean | Whether it is a collapsible panel. |
| activeKey | any | Expand the Panel, corresponding to the 'Panel' of 'eventkey' |
| classPrefix | string | The prefix of the component CSS class |
| defaultActiveKey | any | The default expansion panel. |
| onSelect | (eventKey: any, event: SyntheticEvent) => void | Toggles the callback function for the expand panel |