Angular EasyUI 分类
分类( Accordion )允许您提供多个面板( Panel ),并同时显示若干个面板( Panel )。提供的每个面板( Panel )都有展开和折叠的内建支持。 用户可自定义被选中的面板( Panel )。若未指定,则默认选中第一个面板( Panel )。
属性列表
| 名称 | 数据类型 | 作用描述 | 默认值 |
|---|---|---|---|
| border | boolean | 是否显示边框。 | true |
| title | string | 在面板标题中显示的标题文本。 | null |
| iconCls | string | 用于在面板标题上显示16x16图标的CSS类。 | null |
| closed | boolean | 面板是否关闭。 | false |
| collapsed | boolean | 面板是否已经折叠。 | false |
| collapsible | boolean | 是否在标题上显示可折叠按钮。 | false |
| showHeader | boolean | 是否显示标题。 | true |
| showFooter | boolean | 是否显示页脚。 | true |
| expandIconCls | string | 展开图标的样式类。 | panel-tool-expand |
| collapseIconCls | string | 折叠图标的样式类。 | panel-tool-collapse |
| panelCls | string | 面板样式类。 | null |
| panelStyle | Object | 面板内联样式。 | null |
| headerCls | string | 面板标题样式类。 | null |
| headerStyle | Object | 面板标题内联样式。 | null |
| bodyCls | string | 面板主题样式类。 | null |
| bodyStyle | Object | 面板体内联样式。 | null |
| footerCls | string | 面板页脚样式类。 | null |
| footerStyle | Object | 面板页脚内联样式。 | null |
注:
- 继承: None 。
- 选择器: eui-panel 。
使用方法
<eui-panel [title]="'Panel Title'" [collapsible]="true" [bodyStyle]="{padding:'20px'}" style="height:200px">
<p>面板内容。</p>
</eui-panel>
分类面板( AccordionPanelComponent )
- 分类面板( AccordionPanelComponent )选项继承自面板( PanelComponent )。
| 名称 | 数据类型 | 作用描述 | 默认值 |
|---|---|---|---|
| selected | boolean | 是否选择面板。 | false |
| title | string | 面板标题。 | |
| expandIconCls | string | 展开图标类。 | accordion-expand |
| collapseIconCls | string | 折叠图标类。 | accordion-collapse |
- 方法列表:
| 名称 | 参数 | 返回值 | 作用描述 |
|---|---|---|---|
| select | none | void | 选择面板。 |
| unselect | none | void | 取消选择面板。 |
注:
- 选择器: eui-accordion-panel 。