From d7fa2bbd71587c31411190f5bb9698825da487c9 Mon Sep 17 00:00:00 2001 From: WoodyJang Date: Tue, 29 Aug 2017 20:07:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=96=87=E6=A1=A3=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- uidoc/core/layout/center.md | 66 +++++++++- uidoc/core/layout/center_adapt.md | 117 +++++++++++++++++- uidoc/core/layout/float_center.md | 68 +++++++++- uidoc/core/layout/horizontal_adapt.md | 78 +++++++++++- uidoc/core/layout/horizontal_auto.md | 74 ++++++++++- uidoc/core/layout/horizontal_float.md | 66 ++++++++++ .../core/layout/left_right_vertical_adapt.md | 78 +++++++++++- uidoc/core/layout/vertical_adapt.md | 75 ++++++++++- 8 files changed, 615 insertions(+), 7 deletions(-) diff --git a/uidoc/core/layout/center.md b/uidoc/core/layout/center.md index 03cc95344..dfdd53d56 100644 --- a/uidoc/core/layout/center.md +++ b/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 | | | | + +--- \ No newline at end of file diff --git a/uidoc/core/layout/center_adapt.md b/uidoc/core/layout/center_adapt.md index 423df4ec8..303af8a5c 100644 --- a/uidoc/core/layout/center_adapt.md +++ b/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 | | | | + +--- \ No newline at end of file diff --git a/uidoc/core/layout/float_center.md b/uidoc/core/layout/float_center.md index 7bf817dc7..2e2c6a7a8 100644 --- a/uidoc/core/layout/float_center.md +++ b/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 | | | + +--- \ No newline at end of file diff --git a/uidoc/core/layout/horizontal_adapt.md b/uidoc/core/layout/horizontal_adapt.md index 4c9aeb6d1..a323eddcf 100644 --- a/uidoc/core/layout/horizontal_adapt.md +++ b/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 | + +--- diff --git a/uidoc/core/layout/horizontal_auto.md b/uidoc/core/layout/horizontal_auto.md index 0a9b2d1c5..f8b61d645 100644 --- a/uidoc/core/layout/horizontal_auto.md +++ b/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 | | | | + + +--- \ No newline at end of file diff --git a/uidoc/core/layout/horizontal_float.md b/uidoc/core/layout/horizontal_float.md index 6b295da3e..b9a234629 100644 --- a/uidoc/core/layout/horizontal_float.md +++ b/uidoc/core/layout/horizontal_float.md @@ -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 | | | | + + +--- \ No newline at end of file diff --git a/uidoc/core/layout/left_right_vertical_adapt.md b/uidoc/core/layout/left_right_vertical_adapt.md index a69b9861b..f87bcd6ac 100644 --- a/uidoc/core/layout/left_right_vertical_adapt.md +++ b/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 | | | | + +--- \ No newline at end of file diff --git a/uidoc/core/layout/vertical_adapt.md b/uidoc/core/layout/vertical_adapt.md index e6d45c092..8835fff02 100644 --- a/uidoc/core/layout/vertical_adapt.md +++ b/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 | | | | + +--- \ No newline at end of file