Browse Source

float_center布局

es6
WoodyJang 7 years ago
parent
commit
936d998ef5
  1. 29
      uidoc/core/layout/float_center.md

29
uidoc/core/layout/float_center.md

@ -1,39 +1,30 @@
# bi.float_center # bi.float_center
#### 浮动布局实现的居中容器 #### 浮动布局实现的居中容器
{% method %} {% method %}
[source](https://jsfiddle.net/fineui/8fd2nvkm/) [source](https://jsfiddle.net/fineui/1vgn555m/)
{% common %} {% common %}
```javascript ```javascript
Demo = {}; Demo = {};
Demo.CenterLayout = BI.inherit(BI.Widget, { Demo.FloatCenterLayout = BI.inherit(BI.Widget, {
props: { props: {
baseCls: "demo-center" baseCls: "demo-float-center"
}, },
render: function () { render: function () {
return { return {
type: "bi.center", type: "bi.float_center",
items: [{ items: [{
type: "bi.label", type: "bi.label",
text: "Center 1,这里虽然设置label的高度30,但是最终影响高度的是center布局", text: "floatCenter与center的不同在于,它可以控制最小宽度和最大宽度",
cls: "layout-bg1", cls: "layout-bg1",
whiteSpace: "normal" whiteSpace: "normal"
},{ }, {
type: "bi.label", type: "bi.label",
text: "Center 2,为了演示label是占满整个的,用了一个whiteSpace:normal", text: "floatCenter与center的不同在于,它可以控制最小宽度和最大宽度",
cls: "layout-bg2", cls: "layout-bg2",
whiteSpace: "normal" whiteSpace: "normal"
},{
type: "bi.label",
text: "Center 3",
cls: "layout-bg3"
},{
type: "bi.label",
text: "Center 4",
cls: "layout-bg5"
}], }],
height: 300, height: 300,
hgap: 20, hgap: 20,
@ -41,9 +32,9 @@ Demo.CenterLayout = BI.inherit(BI.Widget, {
} }
} }
}); });
BI.shortcut("demo.center_layout", Demo.CenterLayout); BI.shortcut("demo.float_center", Demo.FloatCenterLayout);
BI.createWidget({ BI.createWidget({
type: 'demo.center_layout', type: 'demo.float_center',
element: "#wrapper", element: "#wrapper",
}); });
@ -63,6 +54,6 @@ BI.createWidget({
| rgap | 效果相当于容器right-padding值 | number | | 0 | | rgap | 效果相当于容器right-padding值 | number | | 0 |
| tgap | 效果相当于容器top-padding值 | number | | 0 | | tgap | 效果相当于容器top-padding值 | number | | 0 |
| bgap | 效果相当于容器bottom-padding值 | number | | 0 | | bgap | 效果相当于容器bottom-padding值 | number | | 0 |
| items | 子控件数组 | array | | | | items | 子控件数组 | array | | |
--- ---
Loading…
Cancel
Save