Browse Source

布局文档添加

es6
WoodyJang 7 years ago
parent
commit
d7fa2bbd71
  1. 66
      uidoc/core/layout/center.md
  2. 117
      uidoc/core/layout/center_adapt.md
  3. 68
      uidoc/core/layout/float_center.md
  4. 78
      uidoc/core/layout/horizontal_adapt.md
  5. 74
      uidoc/core/layout/horizontal_auto.md
  6. 66
      uidoc/core/layout/horizontal_float.md
  7. 78
      uidoc/core/layout/left_right_vertical_adapt.md
  8. 75
      uidoc/core/layout/vertical_adapt.md

66
uidoc/core/layout/center.md

@ -1,2 +1,66 @@
# center # bi.center
#### 水平和垂直方向都居中容器, 非自适应,用于宽度高度固定的面板
{% method %}
[source](https://jsfiddle.net/fineui/8fd2nvkm/)
{% common %}
```javascript
Demo = {};
Demo.CenterLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-center"
},
render: function () {
return {
type: "bi.center",
items: [{
type: "bi.label",
text: "Center 1,这里虽然设置label的高度30,但是最终影响高度的是center布局",
cls: "layout-bg1",
whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 2,为了演示label是占满整个的,用了一个whiteSpace:normal",
cls: "layout-bg2",
whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 3",
cls: "layout-bg3"
},{
type: "bi.label",
text: "Center 4",
cls: "layout-bg5"
}],
hgap: 20,
vgap: 20
}
}
});
BI.shortcut("demo.center_layout", Demo.CenterLayout);
BI.createWidget({
type: 'demo.center_layout',
element: "#wrapper",
});
```
{% 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 | | | |
---

117
uidoc/core/layout/center_adapt.md

@ -1,2 +1,117 @@
# center_adapt # bi.center_adapt
#### 自适应左右垂直居中布局
{% method %}
[source](https://jsfiddle.net/fineui/7bsxw7u5/)
{% common %}
```javascript
Demo = {};
Demo.CenterAdapt = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-absolute"
},
render: function () {
return {
type: "bi.grid",
columns: 1,
rows: 2,
items: [{
column: 0,
row: 0,
el: this._createNoWidth()
}, {
column: 0,
row: 1,
el: this._createBottom()
}]
}
},
_createNoWidth: function () {
return BI.createWidget({
type: "bi.center_adapt",
hgap: 10,
items: [{
type: "bi.label",
text: "Center Adapt 1 这些label都是没有宽度的",
cls: "layout-bg1",
height: 30
}, {
type: "bi.label",
text: "Center Adapt 2",
cls: "layout-bg2",
height: 30
}, {
type: "bi.label",
text: "Center Adapt 3",
cls: "layout-bg3",
height: 30
}, {
type: "bi.label",
text: "Center Adapt 4",
cls: "layout-bg5",
height: 30
}]
})
},
_createBottom: function () {
return BI.createWidget({
type: "bi.center_adapt",
items: [{
type: "bi.text_button",
text: "这个是有宽度和高度的按钮按钮-1",
height: "100%",
width: 160,
cls: "layout-bg1"
}, {
type: "bi.text_button",
text: "按钮-2",
height: 30,
width: 100,
cls: "layout-bg2"
}, {
type: "bi.text_button",
text: "按钮-3",
height: 30,
width: 100,
cls: "layout-bg3"
}, {
type: "bi.text_button",
text: "按钮-4",
height: 30,
width: 100,
cls: "layout-bg5"
}]
})
},
});
BI.shortcut("demo.center_adapt", Demo.CenterAdapt);
BI.createWidget({
type: 'demo.center_adapt',
element: "#wrapper",
});
```
{% 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 | | | |
---

68
uidoc/core/layout/float_center.md

@ -1,2 +1,68 @@
# float_center
# bi.float_center
#### 浮动布局实现的居中容器
{% method %}
[source](https://jsfiddle.net/fineui/8fd2nvkm/)
{% common %}
```javascript
Demo = {};
Demo.CenterLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-center"
},
render: function () {
return {
type: "bi.center",
items: [{
type: "bi.label",
text: "Center 1,这里虽然设置label的高度30,但是最终影响高度的是center布局",
cls: "layout-bg1",
whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 2,为了演示label是占满整个的,用了一个whiteSpace:normal",
cls: "layout-bg2",
whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 3",
cls: "layout-bg3"
},{
type: "bi.label",
text: "Center 4",
cls: "layout-bg5"
}],
height: 300,
hgap: 20,
vgap: 20
}
}
});
BI.shortcut("demo.center_layout", Demo.CenterLayout);
BI.createWidget({
type: 'demo.center_layout',
element: "#wrapper",
});
```
{% 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 | | |
---

78
uidoc/core/layout/horizontal_adapt.md

@ -1,2 +1,78 @@
# horizontal_adapt # bi.horizontal_adapt
#### 自适应左右居中布局
{% method %}
[source](https://jsfiddle.net/fineui/Lgobog42/)
{% common %}
```javascript
Demo = {};
Demo.HorizontalAdapt = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-horizontal-adapt"
},
_createLayout: function () {
return BI.createWidget({
type: "bi.horizontal_adapt",
vgap: 10,
items: [{
type: "bi.label",
text: "Horizontal Adapt左右自适应",
cls: "layout-bg1",
width: 300,
height: 30
}, {
type: "bi.label",
text: "Horizontal Adapt左右自适应",
cls: "layout-bg2",
//width: 300,
height: 30
}]
})
},
render: function () {
return {
type: "bi.grid",
columns: 1,
rows: 2,
items: [{
column: 0,
row: 0,
el: this._createLayout()
}]
}
}
});
BI.shortcut("demo.horizontal_adapt", Demo.HorizontalAdapt);
BI.createWidget({
type: 'demo.horizontal_adapt',
element: "#wrapper",
});
```
{% 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 |
---

74
uidoc/core/layout/horizontal_auto.md

@ -1,2 +1,74 @@
# horizontal_auto # bi.horizontal_auto
#### 水平方向居中自适应容器
{% method %}
[source](https://jsfiddle.net/fineui/ej2j8umg/)
{% common %}
```javascript
Demo = {};
Demo.HorizontalAuto = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-horizontal-auto"
},
_createLayout: function () {
return BI.createWidget({
type: "bi.horizontal_auto",
vgap: 10,
items: [{
type: "bi.label",
text: "Horizontal Auto左右自适应",
cls: "layout-bg1",
width: 300,
height: 30
}, {
type: "bi.label",
text: "Horizontal Auto左右自适应",
cls: "layout-bg2",
width: 300,
height: 30
}]
})
},
render: function () {
return {
type: "bi.grid",
columns: 1,
rows: 2,
items: [{
column: 0,
row: 0,
el: this._createLayout()
}]
}
}
});
BI.shortcut("demo.horizontal_auto", Demo.HorizontalAuto);
BI.createWidget({
type: 'demo.horizontal_auto',
element: "#wrapper",
});
```
{% 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 | | | |
---

66
uidoc/core/layout/horizontal_float.md

@ -1,2 +1,68 @@
# horizontal_float # horizontal_float
#### 浮动的水平居中布局
{% method %}
[source](https://jsfiddle.net/fineui/91rd0zpe/)
{% common %}
```javascript
Demo = {};
Demo.HorizontalFloat = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-horizontal-float"
},
_createLayout: function () {
return BI.createWidget({
type: "bi.horizontal_float",
vgap: 10,
items: [{
type: "bi.label",
text: "Horizontal Float左右自适应",
cls: "layout-bg1",
width: 200,
height:30
}]
})
},
render: function () {
return {
type: "bi.grid",
columns: 1,
rows: 2,
items: [{
column: 0,
row: 0,
el: this._createLayout()
}]
}
}
});
BI.shortcut("demo.horizontal_float", Demo.HorizontalFloat);
BI.createWidget({
type: 'demo.horizontal_float',
element: "#wrapper",
});
```
{% 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 | | | |
---

78
uidoc/core/layout/left_right_vertical_adapt.md

@ -1,2 +1,78 @@
# left_right_vertical_adapt
# bi.left_right_vertical_adapt
#### 左右分离,垂直方向居中容器
{% method %}
[source](https://jsfiddle.net/fineui/2udhep9z/)
{% common %}
```javascript
Demo = {};
Demo.LeftRightVerticalAdaptLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-left-right-vertical-adapt"
},
render: function () {
return {
type: "bi.left_right_vertical_adapt",
lhgap: 10,
rhgap: 10,
items: {
left: [{
type: "bi.label",
text: "左边的垂直居中",
cls: "layout-bg1",
width: 100,
height: 30
}, {
type: "bi.label",
text: "左边的垂直居中",
cls: "layout-bg2",
width: 100,
height: 30
}],
right: [{
type: "bi.label",
text: "右边的垂直居中",
cls: "layout-bg1",
width: 100,
height: 30
}, {
type: "bi.label",
text: "右边的垂直居中",
cls: "layout-bg2",
width: 100,
height: 30
}]
}
}
}
});
BI.shortcut("demo.left_right_vertical_adapt", Demo.LeftRightVerticalAdaptLayout);
BI.createWidget({
type: 'demo.left_right_vertical_adapt',
element: "#wrapper",
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :----- | :----|:----
| lhgap | 左边容器左右padding值 | number | | 0 |
| lrgap | 左边容器right-padding值 | number | | 0 |
| llgap | 左边容器left-padding值 | number | | 0 |
| rhgap | 右边容器左右padding值 | number | | 0 |
| rrgap | 右边容器right-padding值 | number | | 0 |
| rhgap | 右边容器left-padding值 | number | | 0 |
| items | 子控件数组 | array | | |
| columnSize | 每列宽度所组成的数组 | array | | | |
---

75
uidoc/core/layout/vertical_adapt.md

@ -1,2 +1,75 @@
# vertical_adapt # bi.vertical_adapt
#### 自适应垂直居中布局
{% method %}
[source](https://jsfiddle.net/fineui/7t1bsfy0/)
{% common %}
```javascript
Demo = {};
Demo.VerticalAdaptLayout = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-vertical-adapt"
},
_createLayout: function () {
return BI.createWidget({
type: "bi.vertical_adapt",
vgap: 10,
items: [{
type: "bi.label",
text: "Vertical Adapt上下自适应",
cls: "layout-bg1",
width: 300,
height: 30
}, {
type: "bi.label",
text: "Vertical Adapt上下自适应",
cls: "layout-bg2",
width: 300,
height: 30
}]
})
},
render: function () {
return {
type: "bi.grid",
columns: 2,
rows: 1,
items: [{
column: 0,
row: 0,
el: this._createLayout()
}]
}
}
});
BI.shortcut("demo.vertical_adapt", Demo.VerticalAdaptLayout);
BI.createWidget({
type: 'demo.vertical_adapt',
element: "#wrapper",
});
```
{% 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 | | | |
---
Loading…
Cancel
Save