Panel（面板）

面板作为承载其它内容的容器。这是构建其他组件的基础（比如：layout,tabs,accordion等）

使用说明

1. import

import {Panel} from 'primeng/primeng';

2. Getting Started

通过 p-panel 元素标签定义panel

<p-panel header="Title"> 
    Content 
</p-panel>

3.Toggleable

panel 主体内容的折叠效果,通过设置collapsed 来显示默认状态（默认折叠还是展开）

<p-panel header="Title" [toggleable]="true"> Content </p-panel>

4.自定义标题

面板头部可以自定义标题

<p-panel > 
    <header> 
        Header content here
    </header> 
    Body Content 
</p-panel>

5.属性

属性名 属性值类型 默认值 描述
header string null 面板头部文本显示值
toggleable boolean false 是否可折叠
collapsed boolean false 设置为true，则默认折叠显示
style string null 组件行内样式
styleClass string null 组件样式类

6.事件

事件名 参数 描述
onBeforeToggle event.originalEvent: browser event
event.collapsed: state as a boolean		 内容折叠前的回调函数
onAfterToggle event.originalEvent: browser event
event.collapsed: state as a boolean		 内容折叠后的回调函数

7.Styling

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.

8.Dependencies

Native component that only requires the css of PrimeUI Panel

results matching ""

    No results matching ""