mini.Splitter
分隔容器。
Extend
mini.Control
Usage
<div class="mini-splitter" style="width:350px;height:200px;">
<div size="30%" showCollapseButton="true">
1
</div>
<div showCollapseButton="true">
2
</div>
</div>
Screenshots
Examples
Splitter
Properties
| Name | Type | Description | Default | Set? | Get? | Tag? |
|---|
| vertical |
Boolean |
是否竖向 |
false |
√ | √ | √ |
| allowResize |
Boolean |
是否允许拖拽调整 |
true |
√ | √ | √ |
| handlerSize |
Number |
分割条尺寸 |
6 |
√ | √ | √ |
Methods
| Name | Parameter | Description | Return |
|---|
| setPanes（panes） |
panes：Array。2个元素。pane对象。 |
设置面板配置数组。 |
|
| updatePane（index, options） |
|
更新面板对象。 |
|
| getPane（index） |
|
获取面板对象。 |
|
| getPaneEl（index） |
|
获取面板对象DOM元素。 |
|
| expandPane（index） |
|
展开面板。 |
|
| collapsePane（index） |
|
收缩面板。 |
|
| showPane（index） |
|
显示面板。 |
|
| hidePane（index） |
|
隐藏面板。 |
|
| getPaneEl（index） |
|
获取面板DOM对象。 |
Element |
Events
| Name | EventObject | Description |
|---|
| resize |
|
拖拽调节尺寸时发生 |
| collapse |
|
折叠面板时发生 |
| expand |
|
展开面板时发生 |
Pane Object
Splitter 面板对象，属性如下：
| Name | Type | Description | Default |
|---|
| minSize |
Number |
最小尺寸 |
80 |
| maxSize |
Number |
最大尺寸 |
3000 |
| size |
Number/String |
尺寸 |
|
| showCollapseButton |
Boolean |
是否显示折叠图标 |
|
| cls |
String |
面板样式类 |
|
| style |
String |
面板样式 |
|
| visible |
Boolean |
是否显示 |
|
| expanded |
Boolean |
是否折叠 |
|