forked from fanruan/fineui
WoodyJang
7 years ago
24 changed files with 965 additions and 661 deletions
@ -1,2 +1,40 @@ |
|||||||
# bubble |
# bi.bubble |
||||||
|
|
||||||
|
#### 气泡提示 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/4u705v2v/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.bubble', |
||||||
|
element: "#wrapper", |
||||||
|
height: 30, |
||||||
|
text: "测试" |
||||||
|
}) |
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :---- |:---- |
||||||
|
| direction | 气泡显示位置 | string | | "top" | |
||||||
|
| height | 气泡高度 | number | | 35 | |
||||||
|
| text | 气泡显示内容 | string | | " " | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| setText | 设置文本值 | 需要设置的文本值text| |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,71 @@ |
|||||||
# label |
# bi.label |
||||||
|
|
||||||
|
#### 文本标签 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/47f5ps1j/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
textWidth: 100, |
||||||
|
textHeight: 30, |
||||||
|
text: "基本标签" |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| hgap | 效果相当于容器左右padding值 | number | | 0 | |
||||||
|
| vgap | 效果相当于容器上下padding值 | number | | 0 | |
||||||
|
| lgap | 效果相当于容器left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于容器right-padding值 | number | | 0 | |
||||||
|
| tgap | 效果相当于容器top-padding值 | number | | 0 | |
||||||
|
| bgap | 效果相当于容器bottom-padding值 | number | | 0 | |
||||||
|
| textWidth | 文本标签宽度 | number| | null | |
||||||
|
| textHeight | 文本标签宽度 | number| | null | |
||||||
|
| text | 文本内容 | string | | " " | |
||||||
|
|
||||||
|
|
||||||
|
##### 高级属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| textAlign | 文本对齐方式 | string | left,center,right | center | |
||||||
|
| whiteSpace | 元素内空白处理方式 | string| normal,nowrap | nowrap| |
||||||
|
| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | true | |
||||||
|
| py | | string | | 空 | |
||||||
|
| keyword | | string | | 空 | |
||||||
|
| disabled | 灰化 | boolean| true,false | 无 | |
||||||
|
| title | 提示title | string | | 空 | |
||||||
|
| warningTitle | 错误提示title | string | | 空 | |
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| doRedMark | 文本标红 | — | |
||||||
|
| unRedMark | 取消文本标红| —| |
||||||
|
| doHighLight | 文本高亮 | —| |
||||||
|
| unHighLight | 取消文本高亮 | —| |
||||||
|
| setText| 设置文本值 | 需要设置的文本值text| |
||||||
|
| getText| 获取文本值 | —| |
||||||
|
| setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} | |
||||||
|
| setValue | 设置文本值 | 需要设置的文本值text | |
||||||
|
| populate| | —| |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,39 @@ |
|||||||
# message |
# bi.Msg |
||||||
|
|
||||||
|
#### 消息提示 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source]() |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.button", |
||||||
|
element: "#wrapper", |
||||||
|
text : '点击我弹出一个消息框', |
||||||
|
height : 30, |
||||||
|
handler : function() { |
||||||
|
BI.Msg.confirm('测试消息框',"我是测试消息框的内容"); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| alert | 警告消息框 | title, message, callback| |
||||||
|
| confirm | 确认消息框 | title, message, callback | |
||||||
|
| prompt | 提示消息框 | title, message, value, callback, min_width | |
||||||
|
| toast | toast提示 | message, level, context| |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
|
|||||||
@ -1,2 +1,42 @@ |
|||||||
# toast |
# bi.toast |
||||||
|
|
||||||
|
#### toast提示 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source]() |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.toast', |
||||||
|
element: "#wrapper", |
||||||
|
height: 30, |
||||||
|
level: "warning", |
||||||
|
text: "toast测试" |
||||||
|
}) |
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :---- |:---- |
||||||
|
| level | 提示类型 | string | success,warning | "success" | |
||||||
|
| height | 高度 | number | | 30 | |
||||||
|
| text | 显示内容 | string | | " " | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 对外方法 |
||||||
|
| 名称 | 说明 | 回调参数 |
||||||
|
| :------ |:------------- | :----- |
||||||
|
| setText | 设置文本值 | 需要设置的文本值text | |
||||||
|
| setHeight | 设置高度 | 需要设置的高度值height | |
||||||
|
|
||||||
|
--- |
||||||
|
|||||||
@ -1,2 +1,114 @@ |
|||||||
# border |
# bi.border |
||||||
|
|
||||||
|
#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/qtdsdegp/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
Demo = {}; |
||||||
|
Demo._createNorth = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
text: "North", |
||||||
|
cls: "layout-bg1", |
||||||
|
height: 30 |
||||||
|
}) |
||||||
|
}; |
||||||
|
Demo._createWest = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
cls: "layout-bg2", |
||||||
|
items:[{ |
||||||
|
type: "bi.label", |
||||||
|
text: "West", |
||||||
|
whiteSpace: "normal" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
Demo._createCenter = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
cls: "layout-bg3", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
text: "Center", |
||||||
|
whiteSpace: "normal" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
Demo._createEast = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.center", |
||||||
|
cls: "layout-bg5", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
text: "East", |
||||||
|
whiteSpace: "normal" |
||||||
|
}] |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
Demo._createSouth = function(){ |
||||||
|
return BI.createWidget({ |
||||||
|
type: "bi.label", |
||||||
|
text: "South", |
||||||
|
cls: "layout-bg6", |
||||||
|
height: 50 |
||||||
|
}) |
||||||
|
}; |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.border', |
||||||
|
element: "#wrapper", |
||||||
|
cls: "", |
||||||
|
items: { |
||||||
|
north: { |
||||||
|
el: Demo._createNorth(), |
||||||
|
height: 30, |
||||||
|
top: 20, |
||||||
|
left: 20, |
||||||
|
right: 20 |
||||||
|
}, |
||||||
|
south: { |
||||||
|
el: Demo._createSouth(), |
||||||
|
height: 50, |
||||||
|
bottom: 20, |
||||||
|
left: 20, |
||||||
|
right: 20 |
||||||
|
}, |
||||||
|
west: { |
||||||
|
el: Demo._createWest(), |
||||||
|
width: 200, |
||||||
|
left: 20 |
||||||
|
}, |
||||||
|
east: { |
||||||
|
el: Demo._createEast(), |
||||||
|
width: 300, |
||||||
|
right: 20 |
||||||
|
}, |
||||||
|
center: Demo._createCenter() |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| items | 子控件对象 | object | north,east,west,south,center | | | |
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,75 @@ |
|||||||
# flow |
# bi.flow |
||||||
|
|
||||||
|
#### 靠左/右对齐的自由浮动布局 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/c761a856/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.center_adapt", |
||||||
|
element: "#wrapper", |
||||||
|
items: [{ |
||||||
|
type: "bi.left", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "Left-1", |
||||||
|
cls: "layout-bg1", |
||||||
|
hgap: 20 |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "Left-2", |
||||||
|
cls: "layout-bg2", |
||||||
|
hgap: 20 |
||||||
|
}], |
||||||
|
hgap: 20, |
||||||
|
vgap: 20 |
||||||
|
}, { |
||||||
|
type: "bi.right", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "Right-1", |
||||||
|
cls: "layout-bg3", |
||||||
|
hgap: 20 |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
height: 30, |
||||||
|
text: "Right-2", |
||||||
|
cls: "layout-bg4", |
||||||
|
hgap: 20 |
||||||
|
}], |
||||||
|
hgap: 20, |
||||||
|
vgap: 20 |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| hgap | 效果相当于容器左右padding值 | number | | 0 | |
||||||
|
| vgap | 效果相当于容器上下padding值 | number | | 0 | |
||||||
|
| lgap | 效果相当于容器left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于容器right-padding值 | number | | 0 | |
||||||
|
| tgap | 效果相当于容器top-padding值 | number | | 0 | |
||||||
|
| bgap | 效果相当于容器bottom-padding值 | number | | 0 | |
||||||
|
| items | 子控件数组 | array | | | | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,71 @@ |
|||||||
# grid |
# bi.grid |
||||||
|
|
||||||
|
#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/1gwjbpL6/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.grid', |
||||||
|
element: "#wrapper", |
||||||
|
columns: 2, |
||||||
|
rows: 2, |
||||||
|
items: [{ |
||||||
|
column: 0, |
||||||
|
row: 0, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-0, row-0", |
||||||
|
cls: "layout-bg1" |
||||||
|
} |
||||||
|
}, { |
||||||
|
column: 1, |
||||||
|
row: 0, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-1, row-0", |
||||||
|
cls: "layout-bg2" |
||||||
|
} |
||||||
|
} { |
||||||
|
column: 0, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-0, row-1", |
||||||
|
cls: "layout-bg5" |
||||||
|
} |
||||||
|
}, { |
||||||
|
column: 1, |
||||||
|
row: 1, |
||||||
|
el: { |
||||||
|
type: "bi.label", |
||||||
|
text: "column-1, row-1", |
||||||
|
cls: "layout-bg6" |
||||||
|
} |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| columns | 列的数量 | number | | null | |
||||||
|
| rows | 行的数量 | number | | null | |
||||||
|
| items | 子控件数组 | array | | [] | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,68 @@ |
|||||||
# horizontal |
# bi.horizontal |
||||||
|
|
||||||
|
#### 水平流式布局 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/oj7y7q3o/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'bi.horizontal', |
||||||
|
element: "#wrapper", |
||||||
|
items: [{ |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "这里设置了lgap,rgap,tgap,bgap", |
||||||
|
height: 30 |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0 |
||||||
|
}], |
||||||
|
width: 100, |
||||||
|
height: 30 |
||||||
|
}, { |
||||||
|
type: "bi.absolute", |
||||||
|
items: [{ |
||||||
|
el: { |
||||||
|
type: "bi.text_button", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "这里设置了lgap,rgap,tgap,bgap", |
||||||
|
height: 30 |
||||||
|
}, |
||||||
|
left: 0, |
||||||
|
right: 0 |
||||||
|
}], |
||||||
|
width: 200, |
||||||
|
height: 30 |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| hgap | 效果相当于容器左右padding值 | number | | 0 | |
||||||
|
| vgap | 效果相当于容器上下padding值 | number | | 0 | |
||||||
|
| lgap | 效果相当于容器left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于容器right-padding值 | number | | 0 | |
||||||
|
| tgap | 效果相当于容器top-padding值 | number | | 0 | |
||||||
|
| bgap | 效果相当于容器bottom-padding值 | number | | 0 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
| columnSize | 每列宽度所组成的数组 | array | | | |
||||||
|
| verticalAlign | 元素的垂直对齐方式 | string | | "middle" | |
||||||
|
| scrollx | 设置水平方向是否有滚动条 | boolean | true,false | true | |
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,64 @@ |
|||||||
# htape |
# bi.htape |
||||||
|
|
||||||
|
#### 水平tape布局,两列定宽,一列自适应 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/ry7Lnhgw/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.htape", |
||||||
|
element: "#wrapper", |
||||||
|
items : [ |
||||||
|
{ |
||||||
|
width: 100, |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '1', |
||||||
|
cls: "layout-bg1" |
||||||
|
} |
||||||
|
}, { |
||||||
|
width: 200, |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '2', |
||||||
|
cls: "layout-bg2" |
||||||
|
} |
||||||
|
}, { |
||||||
|
width: 'fill', |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '3', |
||||||
|
cls: "layout-bg3" |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| hgap | 效果相当于容器左右padding值 | number | | 0 | |
||||||
|
| vgap | 效果相当于容器上下padding值 | number | | 0 | |
||||||
|
| lgap | 效果相当于容器left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于容器right-padding值 | number | | 0 | |
||||||
|
| tgap | 效果相当于容器top-padding值 | number | | 0 | |
||||||
|
| bgap | 效果相当于容器bottom-padding值 | number | | 0 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,47 @@ |
|||||||
# vertical |
# bi.vertical |
||||||
|
|
||||||
|
#### 垂直流式布局 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/zjyaz9fn/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: 'demo.vertical', |
||||||
|
element: "#wrapper", |
||||||
|
items: [{ |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg1", |
||||||
|
text: "这里设置了hgap(水平间距)，vgap(垂直间距)", |
||||||
|
height: 30 |
||||||
|
}, { |
||||||
|
type: "bi.label", |
||||||
|
cls: "layout-bg2", |
||||||
|
text: "这里设置了hgap(水平间距)，vgap(垂直间距)", |
||||||
|
height: 30 |
||||||
|
}] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| hgap | 效果相当于容器左右padding值 | number | | 0 | |
||||||
|
| vgap | 效果相当于容器上下padding值 | number | | 0 | |
||||||
|
| lgap | 效果相当于容器left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于容器right-padding值 | number | | 0 | |
||||||
|
| tgap | 效果相当于容器top-padding值 | number | | 0 | |
||||||
|
| bgap | 效果相当于容器bottom-padding值 | number | | 0 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
| scrolly | 设置垂直方向是否有滚动条 | boolean | true,false | true | |
||||||
|
|
||||||
|
--- |
||||||
@ -1,2 +1,64 @@ |
|||||||
# vtape |
# bi.vtape |
||||||
|
|
||||||
|
#### 垂直tape布局,两列定高,一列自适应 |
||||||
|
|
||||||
|
{% method %} |
||||||
|
[source](https://jsfiddle.net/fineui/ufpnz53d/) |
||||||
|
|
||||||
|
{% common %} |
||||||
|
```javascript |
||||||
|
|
||||||
|
BI.createWidget({ |
||||||
|
type: "bi.vtape", |
||||||
|
element: "#wrapper", |
||||||
|
items : [ |
||||||
|
{ |
||||||
|
height: 100, |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '1', |
||||||
|
cls: "layout-bg1" |
||||||
|
} |
||||||
|
}, { |
||||||
|
height: 200, |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '2', |
||||||
|
cls: "layout-bg2" |
||||||
|
} |
||||||
|
}, { |
||||||
|
height: 'fill', |
||||||
|
el : { |
||||||
|
type : 'bi.label', |
||||||
|
text : '3', |
||||||
|
cls: "layout-bg3" |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}); |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
``` |
||||||
|
|
||||||
|
{% endmethod %} |
||||||
|
|
||||||
|
|
||||||
|
## API |
||||||
|
##### 基础属性 |
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
||||||
|
| :------ |:------------- | :----- | :----|:---- |
||||||
|
| hgap | 效果相当于容器左右padding值 | number | | 0 | |
||||||
|
| vgap | 效果相当于容器上下padding值 | number | | 0 | |
||||||
|
| lgap | 效果相当于容器left-padding值 | number | | 0 | |
||||||
|
| rgap | 效果相当于容器right-padding值 | number | | 0 | |
||||||
|
| tgap | 效果相当于容器top-padding值 | number | | 0 | |
||||||
|
| bgap | 效果相当于容器bottom-padding值 | number | | 0 | |
||||||
|
| items | 子控件数组 | array | | | |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--- |
||||||
Loading…
Reference in new issue