Cap4J:面板

最新推荐文章于 2025-06-04 09:14:24 发布

喜只狼果冻

最新推荐文章于 2025-06-04 09:14:24 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36750352/article/details/97973356

本文详细介绍了nui-panel布局的属性设置，包括标题、图标、工具栏、页脚等组件的显示与样式调整，以及如何将DOM元素加入到工具栏、页脚和内容区的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

class=“nui-panel”，通过property属性来设置工具条和页脚，正文部分写在div外面.

属性：

名称	类型	描述	默认值
title	String	标题文本	无
iconCls	String	标题图标样式类	无
iconStyle	String	标题图标样式	无
showToolbar	Boolean	是否显示工具栏	false
showFooter	Boolean	是否显示底部	false
showCloseButton	Boolean	是否显示关闭按钮	false
showCollapseButton	Boolean	是否显示折叠按钮	false
headerStyle	String	头部样式.	无
headerCls	String	头部样式类.	无
bodyStyle	String	内容区样式.如”padding:0px;”	无
bodyCls	String	内容区样式类.	无
footerStyle	String	底部样式.如”padding:0px;”	无
footerCls	String	底部样式类.	无
toolbarStyle	String	工具栏样式.如”padding:0px;”	无
toolbarCls	String	工具栏样式类.	无
url	String	内容区域地址	无
refreshOnExpand	Boolean	展开则不断刷新.	false

方法:

名称	参数	描述	返回值
getHeaderEl ( )	无	获取头部DOM对象	Element
getToolbarEl ( )	无	获取工具栏DOM对象	Element
getFooterEl ( )	无	获取底部DOM对象	Element
getBodyEl ( )	无	获取内容区对象	Element
getIFrameEl ( )	无	获取内容IFrame对象	Element
setBody ( Element )	无	把DOM元素加入内容区	无
setToolbar ( Element )	无	把DOM元素加入工具栏	无
setFooter ( Element )	无	把DOM元素加入底部	无

<div class="nui-panel" title="header" iconCls="icon-add"style="width: 300px; height: 200px;" showToolbar="true"showCloseButton="true" showFooter="true">
<div property="toolbar">
	<input type='button' value='Toolbar' style='vertical-align: middle;' />
</div>
<div property="footer">
	<input type='button' value='Footer' style='vertical-align: middle;' />
</div>
</div>