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
Panel title
With border
Panel title
With shadow
Panel title
No header
Card
RSUITE
A suite of React components, sensible UI design, and a friendly development experience.
Card group
Card title
Card title
Card title
Card title
Collapsible
Panel title
Fill the container
User List
Loading...
Panel group
Panel 1
Panel 2
Panel 3
Collapsible panel group
Panel 1
Panel 2
Panel 3
Accordion effect
Only one panel can be expanded.
Panel 1
Panel 2
Panel 3
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 | ReactNode | 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 |