Components / Panels

Panels

Use a Panel to contain content that has a logical grouping. Panels always have either a header or a title.

Set the title or header prop to give a name to the panel. Use whichever is more appropriate for your application.

ReferenceError: React is not defined

ReferenceError: React is not defined

Use the footer for information that does not belong in the panel body.

ReferenceError: React is not defined

When the panel has associated calls-to-action, set the titleCols or headerCols prop to include buttons to the right of the panel name.

Because the panel is built on the Grid component, these buttons should be wrapped in FlexCol components.

ReferenceError: React is not defined

When including a button in a panel header, make it small to keep the panel header size the same.

ReferenceError: React is not defined

When the panel has content loading, set the loading prop to add a loading indicator to the top of the panel body.

ReferenceError: React is not defined

When using multiple panels that are related, the first panel should have a title that names the grouping. Each panel header should name its subgroups.

ReferenceError: React is not defined

Props

Property	Required	Type	Default	Description
`bodyClassName`	no	String		Class(es) to apply to the body
`className`	no	String		Class(es) to apply to the panel container
`footer`	no	Node		Node to render in the footer
`footerClassName`	no	String		Class(es) to apply to the footer
`header`	no	Node		Node to render in the header
`headerClassName`	no	String		Class(es) to apply to the header
`headerCols`	no	Array	[]	An array of nodes to render on the header row, each element should be wrapped in a `FlexCol`
`loading`	no	Boolean		If true, will render a pulsing loading bar
`panelClassName`	no	String		Class(es) to apply to the area containing the header, body and footer
`title`	no	String		String to render in the title
`titleClassName`	no	String		Class(es) to apply to the title
`titleCols`	no	Array	[]	An array of nodes to render on the title row, each element should be wrapped in a `FlexCol`

Imports

Import React components (including CSS):

import {Panel} from 'pivotal-ui/react/panels';

Import CSS only:

import 'pivotal-ui/css/panels';