Panel

Panel is a grouping component providing with content toggle feature.

Regular

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Toggleable

Header

Template

Header

Import via Module


import { Panel } from 'primereact/panel';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/panel/panel.min.js"></script>

Getting Started

Panel is a container component that accepts content as its children.


<Panel header="Header">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</Panel>

header propery also can be used to provide custom content as JSX.

Toggleable

Content of the panel can be expanded and collapsed using toggleable option. A toggleable panel can either be used as a Controlled or Uncontrolled component.

In controlled mode, collapsed and onToggle properties needs to be defined to control the collapsed state.


<Panel header="Header" toggleable collapsed={panelCollapsed} onToggle={(e) => setPanelCollapsed(e.value)}>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</Panel>

In uncontrolled mode, only toggleable property needs to be enabled. Initial state can be still be provided using the collapsed property in uncontrolled mode however it is evaluated at initial rendering and ignored in further updates. If you programmatically need to update the collapsed state, prefer to use the component as controlled.


<Panel header="Header" toggleable>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</Panel>

Header Template

The header element is fully customizable on Panel. To make special header, an object can be given to the headerTemplate property as below.


<Panel headerTemplate={template} toggleable>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</Panel>


template: (options) => {
    // options.className: Style class of the default header element.
    // options.titleClassName: Style class of the title element.
    // options.iconsClassName: Style class of the icons wrapper element.
    // options.togglerClassName: Style class of the toggler element.
    // options.togglerIconClassName: Style class of the toggler icon element.
    // options.onTogglerClick: Click event for the toggler element.
    // options.titleElement: Default title element created by the component.
    // options.iconsElement: Default icons wrapper element created by the component.
    // options.togglerElement: Default toggler element created by the component.
    // options.element: Default element created by the component.
    // options.props: component props.
    // options.collapsed: Whether the panel is collapsed.
}

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
header	any	null	Custom header template of the panel.
headerTemplate	any	null	Header template of the panel to customize more.
toggleable	boolean	false	Defines if content of panel can be expanded and collapsed.
icons	any	null	Custom icons template for the header.
style	object	null	Inline style of the element.
className	string	null	Style class of the element.
collapsed	boolean	false	Defines the initial state of panel content, supports one or two-way binding as well.
transitionOptions	object	null	The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.

Events

Name	Parameters	Description
onCollapse	event.originalEvent: browser event	Callback to invoke when an active tab is collapsed by clicking on the header.
onExpand	event.originalEvent: browser event	Callback to invoke when a tab gets expanded.
onToggle	event.originalEvent: browser event event.value: collapsed state as a boolean	Callback to invoke when a tab gets expanded.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-panel	Container element.
p-panel-titlebar	Header section.
p-panel-title	Title text of panel.
p-panel-titlebar-toggler	Toggle icon.
p-panel-content	Content of panel.