forked from fanruan/fineui
WoodyJang
7 years ago
8 changed files with 615 additions and 7 deletions
@ -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 | | | | |
||||
|
||||
--- |
||||
@ -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 | | | | |
||||
|
||||
--- |
||||
@ -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 | | | |
||||
|
||||
--- |
||||
@ -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 | |
||||
|
||||
--- |
||||
|
||||
|
||||
@ -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 | | | | |
||||
|
||||
|
||||
--- |
||||
@ -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 | | | | |
||||
|
||||
|
||||
--- |
||||
@ -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 | | | | |
||||
|
||||
--- |
||||
@ -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…
Reference in new issue