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>