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

1. Panel: Customizable content container; can be closed if necessary.
2. LeftPanelLayout: Element to contain related items under a common title. Uses Panel internally.

Examples

Default Panel
Contained content
Edit code

Related links
Link1
Link2
Edit code

Usage

Panel

Panel serves as a basic container component. If handleClose is specified, it will show a closeable button that, when clicked, calls handleClose.

import React from "react";
import { Panel } from "@commure/components-foundation";
const MyPanel = () =>  (
  <Panel 
    className="sample-panel"
    title="App information"
    body={<div>contents</div>}
    handleClose={() => { console.log("panel closed") }}
  />
);
export default MyPanel;

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.

import React from "react";
import { LeftPanelLayout } from "@commure/components-foundation";
const MyLeftPanelLayout = () => (
  <LeftPanelLayout 
    panelTitle={"Options"}
    panelBody={[<div>a</div>, <div>b</div>]}
    collapsible={false}
    defaultClosed={false}  
  />
);
export default MyLeftPanelLayout;

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