Panel
Toggle content visibility using Panel.
| install | yarn add @clayui/panel |
|---|---|
| version |  |
| use | import Panel from '@clayui/panel'; |
Basic Usage
Title
Header!
Body!
<div className="panel">
<div className="panel-header">
<span className="panel-title">Title</span>
</div>
<div className="panel-header">Header!</div>
<div className="panel-body">Body!</div>
<div className="panel-footer">Footer!</div>
</div>
Secondary
Title
Body!
<div className="panel panel-secondary">
<div className="panel-header">
<span className="panel-title">Title</span>
</div>
<div className="panel-body">Body!</div>
<div className="panel-footer">Footer!</div>
</div>
Unstyled
Title
Body!
<div className="panel panel-unstyled">
<div className="panel-header">
<span className="panel-title">Title</span>
</div>
<div className="panel-body">Body!</div>
<div className="panel-footer">Footer!</div>
</div>
Collapsible
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.
This page uses Bootstrap’s collapse plugin which requires JQuery. Liferay
7.4 no longer includes JQuery by default. We have included a standalone
collapse plugin in 7.4, just replace the attribute
data-toggle=“collapse” with
data-toggle=“liferay-collapse” on the trigger.
Header!
Body!
<div className="panel">
<button
aria-controls="collapsePanel"
aria-expanded="false"
className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
data-target="#collapsablePanel"
data-toggle="collapse"
>
<span className="panel-title">Toggle me for expanding!</span>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-right"></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-down"></use>
</svg>
</span>
</button>
<div className="panel-collapse collapse" id="collapsablePanel">
<div className="panel-header">Header!</div>
<div className="panel-body">Body!</div>
<div className="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 className="panel-group">
<div className="panel panel-secondary">
<button
aria-controls="collapsePanelOne"
aria-expanded="false"
className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
data-target="#collapsePanelOne"
data-toggle="collapse"
>
<span className="panel-title">One</span>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-right"></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-down"></use>
</svg>
</span>
</button>
<div className="panel-collapse collapse" id="collapsePanelOne">
<div className="panel-body">
Here is some content inside for number One
</div>
</div>
</div>
<div className="panel panel-secondary">
<button
aria-controls="collapsePanelTwo"
aria-expanded="false"
className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
data-target="#collapsePanelTwo"
data-toggle="collapse"
>
<span className="panel-title">Two</span>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-right"></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-down"></use>
</svg>
</span>
</button>
<div className="panel-collapse collapse" id="collapsePanelTwo">
<div className="panel-body">
Here is some content inside for number Two
</div>
</div>
</div>
<div className="panel panel-secondary">
<button
aria-controls="collapsePanelThree"
aria-expanded="false"
className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
data-target="#collapsePanelThree"
data-toggle="collapse"
>
<span className="panel-title">Three</span>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-right"></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-down"></use>
</svg>
</span>
</button>
<div className="panel-collapse collapse" id="collapsePanelThree">
<div className="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.
Sheet Title
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 className="sheet">
<div className="sheet-header">
<h4 className="sheet-title">Sheet Title</h4>
</div>
<div className="panel-group panel-group-flush">
<div className="panel panel-unstyled">
<button
aria-controls="collapseSheetPanelOne"
aria-expanded="false"
className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
data-target="#collapseSheetPanelOne"
data-toggle="collapse"
>
<span className="panel-title">One</span>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
role="presentation"
>
<use
xlink:href="/images/icons/icons.svg#angle-right"
></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use
xlink:href="/images/icons/icons.svg#angle-down"
></use>
</svg>
</span>
</button>
<div className="panel-collapse collapse" id="collapseSheetPanelOne">
<div className="panel-body">
Here is some content inside for number One
</div>
</div>
</div>
<div className="panel panel-unstyled">
<button
aria-controls="collapseSheetPanelTwo"
aria-expanded="false"
className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
data-target="#collapseSheetPanelTwo"
data-toggle="collapse"
>
<span className="panel-title">Two</span>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
role="presentation"
>
<use
xlink:href="/images/icons/icons.svg#angle-right"
></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use
xlink:href="/images/icons/icons.svg#angle-down"
></use>
</svg>
</span>
</button>
<div className="panel-collapse collapse" id="collapseSheetPanelTwo">
<div className="panel-body">
Here is some content inside for number Two
</div>
</div>
</div>
<div className="panel panel-unstyled">
<button
aria-controls="collapseSheetPanelThree"
aria-expanded="false"
className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
data-target="#collapseSheetPanelThree"
data-toggle="collapse"
>
<span className="panel-title">Three</span>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
role="presentation"
>
<use
xlink:href="/images/icons/icons.svg#angle-right"
></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use
xlink:href="/images/icons/icons.svg#angle-down"
></use>
</svg>
</span>
</button>
<div
className="panel-collapse collapse"
id="collapseSheetPanelThree"
>
<div className="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 className="panel panel-secondary">
<button
aria-controls="panelWithCustomTitle"
aria-expanded="false"
className="btn btn-unstyled panel-header panel-header-link collapse-icon collapse-icon-middle collapsed"
data-target="#collapsePanelWithCustomTitle"
data-toggle="collapse"
>
<div>
<h3>Title</h3>
<span>If field </span>
<span className="label label-success">
<span className="label-item label-item-expand">Country</span>
</span>
<span className="label label-secondary">
<span className="label-item label-item-expand"
>Is Equal To</span
>
</span>
<span>value </span>
<span className="label label-info">
<span className="label-item label-item-expand">Brazil</span>
</span>
<span>enable </span>
<span className="label label-success">
<span className="label-item label-item-expand">State</span>
</span>
</div>
<span className="collapse-icon-closed">
<svg
className="lexicon-icon lexicon-icon-angle-right"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-right"></use>
</svg>
</span>
<span className="collapse-icon-open">
<svg
className="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use xlink:href="/images/icons/icons.svg#angle-down"></use>
</svg>
</span>
</button>
<div className="panel-collapse collapse" id="collapsePanelWithCustomTitle">
<div className="panel-body">Body!</div>
</div>
</div>