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

Related links

Link1
Link2

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 NameRequired?TypeDescription
bodyfalseReact.ReactNodeBody of the panel that renders below the title.
classNamefalsestringClassName for container element
handleClosefalse() => voidCallback method to be called when the close icon is clicked. If this prop is not provided, the Panel will not be collapsible.
titlefalseReact.ReactNodeTitle to render at the top of the panel

LeftPanelLayout

Prop NameRequired?TypeDescription
collapsiblefalsebooleanWhether the left panel should collapse or not. If set to true, a default open and close button will be rendered
defaultClosedfalsebooleanWhether the left panel should be closed by default. This prop is only recognized if collapsible is set to true.
panelBodyfalseReact.ReactNodeBody of the left panel that renders below the title.
panelTitlefalseReact.ReactNodeTitle to render at the top of the left panel.

Related Reading

Application Layout Guidelines
Commure Application Header