Skip to main content

Pivotal UI

v19.1.2

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.

Panel with title
ReferenceError: React is not defined
Panel with header
ReferenceError: React is not defined

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

Panel with header and footer
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.

Panel with call-to-action in title
ReferenceError: React is not defined

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

Panel with call-to-action in header
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.

Panel with loading animation
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.

Multiple related panels
ReferenceError: React is not defined

Props

PropertyRequiredTypeDefaultDescription
bodyClassNamenoStringClass(es) to apply to the body
classNamenoStringClass(es) to apply to the panel container
footernoNodeNode to render in the footer
footerClassNamenoStringClass(es) to apply to the footer
headernoStringString to render in the header
headerClassNamenoStringClass(es) to apply to the header
headerColsnoArray[]An array of nodes to render on the header row, each element should be wrapped in a FlexCol
loadingnoBooleanIf true, will render a pulsing loading bar
panelClassNamenoStringClass(es) to apply to the area containing the header, body and footer
titlenoStringString to render in the title
titleClassNamenoStringClass(es) to apply to the title
titleColsnoArray[]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';