Panel

yarn add @clayui/panel

Toggle content visibility using Panel.

React Component
CSS / Markup

Basic Usage
Usage with a custom Title
API

The Panel is a replacement for the old ClayCollapse in version 2.x, has the same effect but written in React using composition, try it. We recommend that you review the use cases in the Storybook.

Basic Usage

Body!

import ClayPanel from '@clayui/panel';

import ClayPanel from '@clayui/panel';

const Component = () => (
  <ClayPanel
    collapsable
    displayTitle="Title"
    displayType="secondary"
    showCollapseIcon={true}
    spritemap={spritemap}
  >
    <ClayPanel.Body>{"Body!"}</ClayPanel.Body>
  </ClayPanel>
);

render(<Component />);

const Component = () => (
  <ClayPanel
    collapsable
    displayTitle="Title"
    displayType="secondary"
    showCollapseIcon={true}
    spritemap={spritemap}
  >
    <ClayPanel.Body>{"Body!"}</ClayPanel.Body>
  </ClayPanel>
);
render(<Component />);

Usage with a custom Title

ClayPanel.Title allows you to add custom content to the title of the panel as seen in this example using ClayLabels.

Body!

import ClayPanel from '@clayui/panel';
import ClayLabel from '@clayui/label';
import React from 'react';

import ClayPanel from '@clayui/panel';
import ClayLabel from '@clayui/label';
import React from 'react';

const Component = () => (
  <ClayPanel
    collapsable
    displayTitle={
      <ClayPanel.Title>
        <h3>{"Title"}</h3>
        <span>{"If field "}</span>
        <ClayLabel displayType="success">{"Country"}</ClayLabel>
        <ClayLabel>{"Is Equal To"}</ClayLabel>
        <span>{"value "}</span>
        <ClayLabel displayType="info">{"Brazil"}</ClayLabel>
        <span>{"enable "}</span>
        <ClayLabel displayType="success">{"State"}</ClayLabel>
      </ClayPanel.Title>
    }
    displayType="secondary"
    showCollapseIcon={true}
    spritemap={spritemap}
  >
    <ClayPanel.Body>{"Body!"}</ClayPanel.Body>
  </ClayPanel>
);

render(<Component />);

const Component = () => (
  <ClayPanel
    collapsable
    displayTitle={
      <ClayPanel.Title>
        <h3>{"Title"}</h3>
        <span>{"If field "}</span>
        <ClayLabel displayType="success">{"Country"}</ClayLabel>
        <ClayLabel>{"Is Equal To"}</ClayLabel>
        <span>{"value "}</span>
        <ClayLabel displayType="info">{"Brazil"}</ClayLabel>
        <span>{"enable "}</span>
        <ClayLabel displayType="success">{"State"}</ClayLabel>
      </ClayPanel.Title>
    }
    displayType="secondary"
    showCollapseIcon={true}
    spritemap={spritemap}
  >
    <ClayPanel.Body>{"Body!"}</ClayPanel.Body>
  </ClayPanel>
);
render(<Component />);

API

ClayPanel

Property	Type	Required	Default	Description
collapsable	boolean	false		Flag to indicate that Panel is collapsable.
collapseClassNames	string	false		Adds classes to the collapse element. Only when `collapsable` is true.
defaultExpanded	boolean	false	false	Flag to indicate the initial value of expanded.
displayTitle	React.ReactNode	false		Content to display in Panel Title.
displayType	'unstyled' \| 'secondary'	false		Flag to indicate the visual variation of the Panel.
showCollapseIcon	boolean	false	true	Flag to toggle collapse icon visibility when `collapsable` is true.
spritemap	string	false		Path to spritemap for clay icons

ClayPanel.Body

Extends from React.HTMLAttributes<HTMLDivElement>Extends from React.HTMLAttributes<HTMLDivElement>

ClayPanel.Group

Property	Type	Required	Description
fluidFirst	boolean	false	Flag to signify that `panel-group-fluid-first` class should be added. This class generally should be used inside card or sheet
fluidLast	boolean	false	Flag to signify that `panel-group-fluid-last` class should be added. This class generally should be used inside card or sheet
fluid	boolean	false	Flag to signify that `panel-group-fluid` class should be added. This class generally should be used inside card or sheet
flush	boolean	false	Flag to signify that `panel-group-flush` class should be added. This class generally should be used inside card, sheet, or a type of padded container.

Extends from React.HTMLAttributes<HTMLDivElement>

ClayPanel.Title

Extends from React.HTMLAttributes<HTMLDivElement>

Basic Usage
Collapsable
Groups
With Sheets
With a custom Title

Basic Usage

Title

Header!

Body!

Footer!

<div class="panel" role="tablist">
	<div class="panel-header">
		<span class="panel-title">Title</span>
	</div>
	<div class="panel-header">Header!</div>
	<div class="panel-body">Body!</div>
	<div class="panel-footer">Footer!</div>
</div>

Collapsable

Collapsable panels provide you with the ability to expand and collapse content as needed. They can simplify the interface by hiding content until it is needed.

Header!

Body!

Footer!

<div class="panel" role="tablist">
	<button
		aria-controls="collapsePanel"
		aria-expanded="false"
		class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
		data-target="#collapsablePanel"
		data-toggle="collapse"
		role="tab"
	>
		<span class="panel-title">Toggle me for expanding!</span>
		<span class="collapse-icon-closed">
			<svg
				class="lexicon-icon lexicon-icon-angle-right"
				role="presentation"
			>
				<use xlink:href="/images/icons/icons.svg#angle-right"></use>
			</svg>
		</span>
		<span class="collapse-icon-open">
			<svg
				class="lexicon-icon lexicon-icon-angle-down"
				role="presentation"
			>
				<use xlink:href="/images/icons/icons.svg#angle-down"></use>
			</svg>
		</span>
	</button>
	<div class="panel-collapse collapse" id="collapsablePanel" role="tabpanel">
		<div class="panel-header">Header!</div>
		<div class="panel-body">Body!</div>
		<div class="panel-footer">Footer!</div>
	</div>
</div>

Groups

Grouped panels provide you with the ability of making accordion-like elements with multiple collapsable panels.

Here is some content inside for number One

Here is some content inside for number Two

Here is some content inside for number Three

<div aria-orientation="vertical" class="panel-group" role="tablist">
	<div class="panel" role="tablist">
		<button
			aria-controls="collapsePanelOne"
			aria-expanded="false"
			class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
			data-target="#collapsePanelOne"
			data-toggle="collapse"
			role="tab"
		>
			<span class="panel-title">One</span>
			<span class="collapse-icon-closed">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#angle-right"></use>
				</svg>
			</span>
			<span class="collapse-icon-open">
				<svg
					class="lexicon-icon lexicon-icon-angle-down"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#angle-down"></use>
				</svg>
			</span>
		</button>
		<div
			class="panel-collapse collapse"
			id="collapsePanelOne"
			role="tabpanel"
		>
			<div class="panel-body">
				Here is some content inside for number One
			</div>
		</div>
	</div>
	<div class="panel" role="tablist">
		<button
			aria-controls="collapsePanelTwo"
			aria-expanded="false"
			class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
			data-target="#collapsePanelTwo"
			data-toggle="collapse"
			role="tab"
		>
			<span class="panel-title">Two</span>
			<span class="collapse-icon-closed">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#angle-right"></use>
				</svg>
			</span>
			<span class="collapse-icon-open">
				<svg
					class="lexicon-icon lexicon-icon-angle-down"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#angle-down"></use>
				</svg>
			</span>
		</button>
		<div
			class="panel-collapse collapse"
			id="collapsePanelTwo"
			role="tabpanel"
		>
			<div class="panel-body">
				Here is some content inside for number Two
			</div>
		</div>
	</div>
	<div class="panel" role="tablist">
		<button
			aria-controls="collapsePanelThree"
			aria-expanded="false"
			class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
			data-target="#collapsePanelThree"
			data-toggle="collapse"
			role="tab"
		>
			<span class="panel-title">Three</span>
			<span class="collapse-icon-closed">
				<svg
					class="lexicon-icon lexicon-icon-angle-right"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#angle-right"></use>
				</svg>
			</span>
			<span class="collapse-icon-open">
				<svg
					class="lexicon-icon lexicon-icon-angle-down"
					role="presentation"
				>
					<use xlink:href="/images/icons/icons.svg#angle-down"></use>
				</svg>
			</span>
		</button>
		<div
			class="panel-collapse collapse"
			id="collapsePanelThree"
			role="tabpanel"
		>
			<div class="panel-body">
				Here is some content inside for number Three
			</div>
		</div>
	</div>
</div>

With Sheets

Sometimes you might want to place a panel inside of a card or a sheet, in that case, wrap the Panel component in a sheet wrapper like below.

Here is some content inside for number One

Here is some content inside for number Two

Here is some content inside for number Three

<div class="sheet">
	<div
		aria-orientation="vertical"
		class="panel-group panel-group-fluid"
		role="tablist"
	>
		<div class="panel panel-secondary" role="tablist">
			<button
				aria-controls="collapseSheetPanelOne"
				aria-expanded="false"
				class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
				data-target="#collapseSheetPanelOne"
				data-toggle="collapse"
				role="tab"
			>
				<span class="panel-title">One</span>
				<span class="collapse-icon-closed">
					<svg
						class="lexicon-icon lexicon-icon-angle-right"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#angle-right"
						></use>
					</svg>
				</span>
				<span class="collapse-icon-open">
					<svg
						class="lexicon-icon lexicon-icon-angle-down"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#angle-down"
						></use>
					</svg>
				</span>
			</button>
			<div
				class="panel-collapse collapse"
				id="collapseSheetPanelOne"
				role="tabpanel"
			>
				<div class="panel-body">
					Here is some content inside for number One
				</div>
			</div>
		</div>
		<div class="panel panel-secondary" role="tablist">
			<button
				aria-controls="collapseSheetPanelTwo"
				aria-expanded="false"
				class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
				data-target="#collapseSheetPanelTwo"
				data-toggle="collapse"
				role="tab"
			>
				<span class="panel-title">Two</span>
				<span class="collapse-icon-closed">
					<svg
						class="lexicon-icon lexicon-icon-angle-right"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#angle-right"
						></use>
					</svg>
				</span>
				<span class="collapse-icon-open">
					<svg
						class="lexicon-icon lexicon-icon-angle-down"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#angle-down"
						></use>
					</svg>
				</span>
			</button>
			<div
				class="panel-collapse collapse"
				id="collapseSheetPanelTwo"
				role="tabpanel"
			>
				<div class="panel-body">
					Here is some content inside for number Two
				</div>
			</div>
		</div>
		<div class="panel panel-secondary" role="tablist">
			<button
				aria-controls="collapseSheetPanelThree"
				aria-expanded="false"
				class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
				data-target="#collapseSheetPanelThree"
				data-toggle="collapse"
				role="tab"
			>
				<span class="panel-title">Three</span>
				<span class="collapse-icon-closed">
					<svg
						class="lexicon-icon lexicon-icon-angle-right"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#angle-right"
						></use>
					</svg>
				</span>
				<span class="collapse-icon-open">
					<svg
						class="lexicon-icon lexicon-icon-angle-down"
						role="presentation"
					>
						<use
							xlink:href="/images/icons/icons.svg#angle-down"
						></use>
					</svg>
				</span>
			</button>
			<div
				class="panel-collapse collapse"
				id="collapseSheetPanelThree"
				role="tabpanel"
			>
				<div class="panel-body">
					Here is some content inside for number Three
				</div>
			</div>
		</div>
	</div>
</div>

With a custom Title

Sometimes you want to have some custom content that's not a string or a number in your title, that's where ClayPanel.Title comes in handy. It allows you to add custom content to the title of the panel as seen in this example using ClayLabels.

Body!

<div class="panel panel-secondary" role="tablist">
	<button
		aria-controls="panelWithCustomTitle"
		aria-expanded="false"
		class="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
		data-target="#collapsePanelWithCustomTitle"
		data-toggle="collapse"
		role="tab"
	>
		<div>
			<h3>Title</h3>
			<span>If field </span>
			<span class="label label-success">
				<span class="label-item label-item-expand">Country</span>
			</span>
			<span class="label label-secondary">
				<span class="label-item label-item-expand">Is Equal To</span>
			</span>
			<span>value </span>
			<span class="label label-info">
				<span class="label-item label-item-expand">Brazil</span>
			</span>
			<span>enable </span>
			<span class="label label-success">
				<span class="label-item label-item-expand">State</span>
			</span>
		</div>
		<span class="collapse-icon-closed">
			<svg
				class="lexicon-icon lexicon-icon-angle-right"
				role="presentation"
			>
				<use xlink:href="/images/icons/icons.svg#angle-right"></use>
			</svg>
		</span>
		<span class="collapse-icon-open">
			<svg
				class="lexicon-icon lexicon-icon-angle-down"
				role="presentation"
			>
				<use xlink:href="/images/icons/icons.svg#angle-down"></use>
			</svg>
		</span>
	</button>
	<div
		class="panel-collapse collapse"
		id="collapsePanelWithCustomTitle"
		role="tabpanel"
	>
		<div class="panel-body">Body!</div>
	</div>
</div>

Panel

Basic Usage

Usage with a custom Title

Title

API

ClayPanel

ClayPanel.Body

ClayPanel.Footer

ClayPanel.Group

ClayPanel.Header

ClayPanel.Title

Basic Usage

Collapsable

Groups

With Sheets

With a custom Title

Title