import {PanelModule} from 'primeng/primeng';
Panel is defined with p-panel element.
<p-panel header="Title">
Content
</p-panel>
Content of the panel can be expanded and collapsed using toggleable option, default state is defined with collapsed option.
<p-panel header="Title" [toggleable]="true">
Content
</p-panel>
Header section of the panel can be customized by defining a header element with content.
<p-panel >
<header>
Header content here
</header>
Body Content
</p-panel>
Name | Type | Default | Description |
---|---|---|---|
header | string | null | Header text of the panel. |
toggleable | boolean | false | Defines if content of panel can be expanded and collapsed. |
collapsed | boolean | false | When specified, displays the panel as collapsed initially. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Name | Parameters | Description |
---|---|---|
onBeforeToggle | event.originalEvent: browser event event.collapsed: state as a boolean |
Callback to invoke before content toggle. |
onAfterToggle | event.originalEvent: browser event event.collapsed: state as a boolean |
Callback to invoke after content toggle. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-panel | Container element. |
ui-panel-titlebar | Header section. |
ui-panel-title | Title text of panel. |
ui-panel-titlebar-toggler | Toggle icon. |
ui-panel-content | Content of panel. |
Native component that only requires the css of PrimeUI Panel.
<p-growl [value]="msgs"></p-growl>
<p-panel header="Godfather I" [toggleable]="true" [style]="{'margin-bottom':'20px'}">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-panel>
<p-panel>
<header>
<div class="ui-helper-clearfix">
<span class="ui-panel-title" style="font-size:16px;display:inline-block;margin-top:2px">Custom Header</span>
<p-splitButton [style]="{'float':'right'{" label="Save" icon="fa-check" (onClick)="save()" [model]="items"></p-splitButton>
</div>
</header>
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</p-panel>