Panel
Introduction
The Panel
and LeftPanelLayout
are standard pieces of applications,
organizing both content and structure.
If your application uses multiple related screens, you will most likely
need LeftPanelLayout
.
Included Components
Panel
: Customizable content container; can be closed if necessary.LeftPanelLayout
: Element to contain related items under a common title. UsesPanel
internally.
Examples
Default Panel
Contained content
Related links
Link1Link2
Usage
Panel
Panel
serves as a basic container component. If handleClose
is specified,
it will show a closeable button that, when clicked, calls handleClose
.
LeftPanelLayout
LeftPanelLayout
is useful for when your content depends on a set of choices.
This could be screens to navigate to or options.
The panel itself can be collapsible. You can specify the default behavior to be opened or closed.
API Reference
Panel
Prop Name | Required? | Type | Description |
---|---|---|---|
body | false | React.ReactNode | Body of the panel that renders below the title. |
className | false | string | ClassName for container element |
handleClose | false | () => void | Callback method to be called when the close icon is clicked. If this prop is not provided, the Panel will not be collapsible. |
title | false | React.ReactNode | Title to render at the top of the panel |
LeftPanelLayout
Prop Name | Required? | Type | Description |
---|---|---|---|
collapsible | false | boolean | Whether the left panel should collapse or not. If set to true, a default open and close button will be rendered |
defaultClosed | false | boolean | Whether the left panel should be closed by default. This prop is only recognized if collapsible is set to true. |
panelBody | false | React.ReactNode | Body of the left panel that renders below the title. |
panelTitle | false | React.ReactNode | Title to render at the top of the left panel. |
Related Reading
Application Layout Guidelines
Commure Application Header