codecamp

React EasyUI 面板

面板( Panel )可当做其他内容的容器使用。 面板( Panel )是创建其他组件(布局( Layout )、选项卡( Tabs )、折叠面板( Accoedion )等的基础组件。 面板( 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
headerCls string 面板标题样式类。 null
headerStyle Object 面板标题内联样式。 null
bodyCls string 面板主体样式类。 null
bodyStyle Object 面板主体内联样式。 null
footerCls string 面板页脚样式类。 null
header function 渲染面板标题的函数。
footer function 渲染面板页脚的函数。

注:
- 继承: LocaleBase 。

使用方法

<Panel title="Panel Title" collapsible bodyStyle={{ padding: 20 }} style={{ height: 200 }}>
  <p>Panel Content。</p>
</Panel>
React EasyUI 布局
React EasyUI 分类
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

React EasyUI 教程总览

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }