fanruan
/
fineui
4
1
Fork 3
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

布局文档添加

es6
WoodyJang 7 years ago
parent
8477c030ce
commit
d7fa2bbd71
8 changed files with 615 additions and 7 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -1,2 +1,68 @@
# 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
Unescape View File

@ -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
Unescape View File

@ -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 | | | |
---
Write Preview
Loading…
Cancel
Save