From 2bd1cdb66d6a40fead2badef51d84deb212cde5c Mon Sep 17 00:00:00 2001 From: WoodyJang Date: Wed, 30 Aug 2017 20:29:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=96=87=E6=A1=A3=E4=BB=A5?= =?UTF-8?q?=E5=8F=8A=E5=9F=BA=E7=A1=80=E6=8E=A7=E4=BB=B6=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- uidoc/base/bubble.md | 40 ++++- uidoc/base/label.md | 71 +++++++- uidoc/base/message.md | 39 ++++- uidoc/base/toast.md | 42 ++++- uidoc/core/layout/border.md | 114 ++++++++++++- uidoc/core/layout/center.md | 59 +++---- uidoc/core/layout/center_adapt.md | 99 ++--------- uidoc/core/layout/float_center.md | 47 ++---- uidoc/core/layout/flow.md | 75 ++++++++- uidoc/core/layout/grid.md | 71 +++++++- uidoc/core/layout/horizontal.md | 68 +++++++- uidoc/core/layout/horizontal_adapt.md | 59 ++----- uidoc/core/layout/horizontal_auto.md | 59 ++----- uidoc/core/layout/horizontal_float.md | 48 ++---- uidoc/core/layout/htape.md | 64 +++++++- .../core/layout/left_right_vertical_adapt.md | 77 ++++----- uidoc/core/layout/vertical.md | 47 +++++- uidoc/core/layout/vertical_adapt.md | 59 ++----- uidoc/core/layout/vtape.md | 64 +++++++- uidoc/detailed/bi.button/general.md | 111 +------------ uidoc/detailed/bi.button/items.md | 45 ++--- uidoc/detailed/bi.button/node.md | 58 +++---- uidoc/detailed/bi.button/segment.md | 55 +++---- uidoc/detailed/bi.button/tooltip.md | 155 +++++++----------- 24 files changed, 965 insertions(+), 661 deletions(-) diff --git a/uidoc/base/bubble.md b/uidoc/base/bubble.md index 35323d26d..685c1978d 100644 --- a/uidoc/base/bubble.md +++ b/uidoc/base/bubble.md @@ -1,2 +1,40 @@ -# bubble +# bi.bubble +#### 气泡提示 + +{% method %} +[source](https://jsfiddle.net/fineui/4u705v2v/) + +{% common %} +```javascript + +BI.createWidget({ + type: 'bi.bubble', + element: "#wrapper", + height: 30, + text: "测试" +}) + +``` + +{% endmethod %} + + +## API +##### 基础属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :----- | :---- |:---- +| direction | 气泡显示位置 | string | | "top" | +| height | 气泡高度 | number | | 35 | +| text | 气泡显示内容 | string | | " " | + + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| setText | 设置文本值 | 需要设置的文本值text| + + +--- \ No newline at end of file diff --git a/uidoc/base/label.md b/uidoc/base/label.md index 36d3686d9..ac6945682 100644 --- a/uidoc/base/label.md +++ b/uidoc/base/label.md @@ -1,2 +1,71 @@ -# label +# bi.label +#### 文本标签 + +{% method %} +[source](https://jsfiddle.net/fineui/47f5ps1j/) + +{% common %} +```javascript + +BI.createWidget({ + type: "bi.label", + textWidth: 100, + textHeight: 30, + text: "基本标签" +}); + + +``` + +{% 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 | +| textWidth | 文本标签宽度 | number| | null | +| textHeight | 文本标签宽度 | number| | null | +| text | 文本内容 | string | | " " | + + +##### 高级属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :----- | :----|:---- +| textAlign | 文本对齐方式 | string | left,center,right | center | +| whiteSpace | 元素内空白处理方式 | string| normal,nowrap | nowrap| +| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | true | +| py | | string | | 空 | +| keyword | | string | | 空 | +| disabled | 灰化 | boolean| true,false | 无 | +| title | 提示title | string | | 空 | +| warningTitle | 错误提示title | string | | 空 | + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| doRedMark | 文本标红 | — | +| unRedMark | 取消文本标红| —| +| doHighLight | 文本高亮 | —| +| unHighLight | 取消文本高亮 | —| +| setText| 设置文本值 | 需要设置的文本值text| +| getText| 获取文本值 | —| +| setStyle | 设置文本样式 |需要设置的文本标签样式,例{"color":"#000"} | +| setValue | 设置文本值 | 需要设置的文本值text | +| populate| | —| + + + + + + +--- \ No newline at end of file diff --git a/uidoc/base/message.md b/uidoc/base/message.md index 32eea64f8..5aed5c11f 100644 --- a/uidoc/base/message.md +++ b/uidoc/base/message.md @@ -1,2 +1,39 @@ -# message +# bi.Msg +#### 消息提示 + +{% method %} +[source]() + +{% common %} +```javascript + +BI.createWidget({ + type: "bi.button", + element: "#wrapper", + text : '点击我弹出一个消息框', + height : 30, + handler : function() { + BI.Msg.confirm('测试消息框',"我是测试消息框的内容"); + } +}); + + + +``` + +{% endmethod %} + + + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| alert | 警告消息框 | title, message, callback| +| confirm | 确认消息框 | title, message, callback | +| prompt | 提示消息框 | title, message, value, callback, min_width | +| toast | toast提示 | message, level, context| + + +--- diff --git a/uidoc/base/toast.md b/uidoc/base/toast.md index 2f2527c02..d94a421c6 100644 --- a/uidoc/base/toast.md +++ b/uidoc/base/toast.md @@ -1,2 +1,42 @@ -# toast +# bi.toast +#### toast提示 + +{% method %} +[source]() + +{% common %} +```javascript + +BI.createWidget({ + type: 'bi.toast', + element: "#wrapper", + height: 30, + level: "warning", + text: "toast测试" +}) + + +``` + +{% endmethod %} + + +## API +##### 基础属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :----- | :---- |:---- +| level | 提示类型 | string | success,warning | "success" | +| height | 高度 | number | | 30 | +| text | 显示内容 | string | | " " | + + + +## 对外方法 +| 名称 | 说明 | 回调参数 +| :------ |:------------- | :----- +| setText | 设置文本值 | 需要设置的文本值text | +| setHeight | 设置高度 | 需要设置的高度值height | + +--- diff --git a/uidoc/core/layout/border.md b/uidoc/core/layout/border.md index 39f6b45e7..6714e701f 100644 --- a/uidoc/core/layout/border.md +++ b/uidoc/core/layout/border.md @@ -1,2 +1,114 @@ -# border +# bi.border +#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 + +{% method %} +[source](https://jsfiddle.net/fineui/qtdsdegp/) + +{% common %} +```javascript + +Demo = {}; +Demo._createNorth = function(){ + return BI.createWidget({ + type: "bi.label", + text: "North", + cls: "layout-bg1", + height: 30 + }) +}; +Demo._createWest = function(){ + return BI.createWidget({ + type: "bi.center", + cls: "layout-bg2", + items:[{ + type: "bi.label", + text: "West", + whiteSpace: "normal" + }] + }) +}; + +Demo._createCenter = function(){ + return BI.createWidget({ + type: "bi.center", + cls: "layout-bg3", + items: [{ + type: "bi.label", + text: "Center", + whiteSpace: "normal" + }] + }) +}; + +Demo._createEast = function(){ + return BI.createWidget({ + type: "bi.center", + cls: "layout-bg5", + items: [{ + type: "bi.label", + text: "East", + whiteSpace: "normal" + }] + }) +}; + +Demo._createSouth = function(){ + return BI.createWidget({ + type: "bi.label", + text: "South", + cls: "layout-bg6", + height: 50 + }) +}; + +BI.createWidget({ + type: 'bi.border', + element: "#wrapper", + cls: "", + items: { + north: { + el: Demo._createNorth(), + height: 30, + top: 20, + left: 20, + right: 20 + }, + south: { + el: Demo._createSouth(), + height: 50, + bottom: 20, + left: 20, + right: 20 + }, + west: { + el: Demo._createWest(), + width: 200, + left: 20 + }, + east: { + el: Demo._createEast(), + width: 300, + right: 20 + }, + center: Demo._createCenter() + } +}); + + + + +``` + +{% endmethod %} + + +## API +##### 基础属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :----- | :----|:---- +| items | 子控件对象 | object | north,east,west,south,center | | | + + +--- \ No newline at end of file diff --git a/uidoc/core/layout/center.md b/uidoc/core/layout/center.md index dfdd53d56..de95464c9 100644 --- a/uidoc/core/layout/center.md +++ b/uidoc/core/layout/center.md @@ -7,42 +7,31 @@ {% 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", + type: "bi.center", + element: "#wrapper", + 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 }); diff --git a/uidoc/core/layout/center_adapt.md b/uidoc/core/layout/center_adapt.md index 303af8a5c..c89b18475 100644 --- a/uidoc/core/layout/center_adapt.md +++ b/uidoc/core/layout/center_adapt.md @@ -7,92 +7,23 @@ {% 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", -}); + type: "bi.center_adapt", + element: "#wrapper", + hgap: 10, + items: [{ + type: "bi.label", + text: "Center Adapt 1", + cls: "layout-bg1", + height: 30 + }, { + type: "bi.label", + text: "Center Adapt 2", + cls: "layout-bg2", + height: 30 + }] +}) diff --git a/uidoc/core/layout/float_center.md b/uidoc/core/layout/float_center.md index 1d3884f87..1a32f1534 100644 --- a/uidoc/core/layout/float_center.md +++ b/uidoc/core/layout/float_center.md @@ -7,35 +7,24 @@ {% common %} ```javascript -Demo = {}; -Demo.FloatCenterLayout = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-float-center" - }, - render: function () { - return { - type: "bi.float_center", - items: [{ - type: "bi.label", - text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", - cls: "layout-bg1", - whiteSpace: "normal" - }, { - type: "bi.label", - text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", - cls: "layout-bg2", - whiteSpace: "normal" - }], - height: 300, - hgap: 20, - vgap: 20 - } - } -}); -BI.shortcut("demo.float_center", Demo.FloatCenterLayout); + BI.createWidget({ - type: 'demo.float_center', - element: "#wrapper", + type: 'bi.float_center', + element: "#wrapper", + items: [{ + type: "bi.label", + text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", + cls: "layout-bg1", + whiteSpace: "normal" + }, { + type: "bi.label", + text: "floatCenter与center的不同在于，它可以控制最小宽度和最大宽度", + cls: "layout-bg2", + whiteSpace: "normal" + }], + height: 300, + hgap: 20, + vgap: 20 }); @@ -54,6 +43,6 @@ BI.createWidget({ | rgap | 效果相当于容器right-padding值 | number | | 0 | | tgap | 效果相当于容器top-padding值 | number | | 0 | | bgap | 效果相当于容器bottom-padding值 | number | | 0 | -| items | 子控件数组 | array | | | +| items | 子控件数组 | array | | | | --- \ No newline at end of file diff --git a/uidoc/core/layout/flow.md b/uidoc/core/layout/flow.md index 7b865cb73..1d90b2770 100644 --- a/uidoc/core/layout/flow.md +++ b/uidoc/core/layout/flow.md @@ -1,2 +1,75 @@ -# flow +# bi.flow +#### 靠左/右对齐的自由浮动布局 + +{% method %} +[source](https://jsfiddle.net/fineui/c761a856/) + +{% common %} +```javascript + +BI.createWidget({ + type: "bi.center_adapt", + element: "#wrapper", + items: [{ + type: "bi.left", + items: [{ + type: "bi.label", + height: 30, + text: "Left-1", + cls: "layout-bg1", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Left-2", + cls: "layout-bg2", + hgap: 20 + }], + hgap: 20, + vgap: 20 + }, { + type: "bi.right", + items: [{ + type: "bi.label", + height: 30, + text: "Right-1", + cls: "layout-bg3", + hgap: 20 + }, { + type: "bi.label", + height: 30, + text: "Right-2", + cls: "layout-bg4", + hgap: 20 + }], + hgap: 20, + vgap: 20 + }] +}); + + + + + +``` + +{% 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/grid.md b/uidoc/core/layout/grid.md index d819dfdf8..ce5df9a9a 100644 --- a/uidoc/core/layout/grid.md +++ b/uidoc/core/layout/grid.md @@ -1,2 +1,71 @@ -# grid +# bi.grid +#### 上下的高度固定/左右的宽度固定，中间的高度/宽度自适应 + +{% method %} +[source](https://jsfiddle.net/fineui/1gwjbpL6/) + +{% common %} +```javascript + +BI.createWidget({ + type: 'bi.grid', + element: "#wrapper", + columns: 2, + rows: 2, + items: [{ + column: 0, + row: 0, + el: { + type: "bi.label", + text: "column-0, row-0", + cls: "layout-bg1" + } + }, { + column: 1, + row: 0, + el: { + type: "bi.label", + text: "column-1, row-0", + cls: "layout-bg2" + } + } { + column: 0, + row: 1, + el: { + type: "bi.label", + text: "column-0, row-1", + cls: "layout-bg5" + } + }, { + column: 1, + row: 1, + el: { + type: "bi.label", + text: "column-1, row-1", + cls: "layout-bg6" + } + }] +}); + + + + + +``` + +{% endmethod %} + + +## API +##### 基础属性 + +| 参数 | 说明 | 类型 | 可选值 | 默认值 +| :------ |:------------- | :----- | :----|:---- +| columns | 列的数量 | number | | null | +| rows | 行的数量 | number | | null | +| items | 子控件数组 | array | | [] | + + + +--- \ No newline at end of file diff --git a/uidoc/core/layout/horizontal.md b/uidoc/core/layout/horizontal.md index ceee5c635..59a3d510f 100644 --- a/uidoc/core/layout/horizontal.md +++ b/uidoc/core/layout/horizontal.md @@ -1,2 +1,68 @@ -# horizontal +# bi.horizontal +#### 水平流式布局 + +{% method %} +[source](https://jsfiddle.net/fineui/oj7y7q3o/) + +{% common %} +```javascript + +BI.createWidget({ + type: 'bi.horizontal', + element: "#wrapper", + items: [{ + type: "bi.absolute", + items: [{ + el: { + type: "bi.text_button", + cls: "layout-bg1", + text: "这里设置了lgap,rgap,tgap,bgap", + height: 30 + }, + left: 0, + right: 0 + }], + width: 100, + height: 30 + }, { + type: "bi.absolute", + items: [{ + el: { + type: "bi.text_button", + cls: "layout-bg2", + text: "这里设置了lgap,rgap,tgap,bgap", + height: 30 + }, + left: 0, + right: 0 + }], + width: 200, + height: 30 + }] +}); + + + +``` + +{% 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 | + +--- \ No newline at end of file diff --git a/uidoc/core/layout/horizontal_adapt.md b/uidoc/core/layout/horizontal_adapt.md index a323eddcf..c5d612436 100644 --- a/uidoc/core/layout/horizontal_adapt.md +++ b/uidoc/core/layout/horizontal_adapt.md @@ -8,50 +8,25 @@ {% 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", -}); + type: "bi.horizontal_adapt", + element: "#wrapper", + 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 + }] +}) ``` diff --git a/uidoc/core/layout/horizontal_auto.md b/uidoc/core/layout/horizontal_auto.md index f8b61d645..9572c92d0 100644 --- a/uidoc/core/layout/horizontal_auto.md +++ b/uidoc/core/layout/horizontal_auto.md @@ -7,50 +7,25 @@ {% 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", -}); + type: "bi.horizontal_auto", + element: "#wrapper", + 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 + }] +}) ``` diff --git a/uidoc/core/layout/horizontal_float.md b/uidoc/core/layout/horizontal_float.md index b9a234629..e681bcc61 100644 --- a/uidoc/core/layout/horizontal_float.md +++ b/uidoc/core/layout/horizontal_float.md @@ -7,44 +7,20 @@ {% 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", -}); + type: "bi.horizontal_float", + element: "#wrapper", + vgap: 10, + items: [{ + type: "bi.label", + text: "Horizontal Float左右自适应", + cls: "layout-bg1", + width: 200, + height:30 + }] +}) + ``` diff --git a/uidoc/core/layout/htape.md b/uidoc/core/layout/htape.md index e8972ed3b..50d742e9c 100644 --- a/uidoc/core/layout/htape.md +++ b/uidoc/core/layout/htape.md @@ -1,2 +1,64 @@ -# htape +# bi.htape +#### 水平tape布局,两列定宽,一列自适应 + +{% method %} +[source](https://jsfiddle.net/fineui/ry7Lnhgw/) + +{% common %} +```javascript + +BI.createWidget({ + type: "bi.htape", + element: "#wrapper", + items : [ + { + width: 100, + el : { + type : 'bi.label', + text : '1', + cls: "layout-bg1" + } + }, { + width: 200, + el : { + type : 'bi.label', + text : '2', + cls: "layout-bg2" + } + }, { + width: 'fill', + el : { + type : 'bi.label', + text : '3', + cls: "layout-bg3" + } + } + ] +}); + + + + + +``` + +{% 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 f87bcd6ac..4b3e090b1 100644 --- a/uidoc/core/layout/left_right_vertical_adapt.md +++ b/uidoc/core/layout/left_right_vertical_adapt.md @@ -8,51 +8,40 @@ {% 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", + type: 'demo.left_right_vertical_adapt', + element: "#wrapper", + 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 + }] + } }); diff --git a/uidoc/core/layout/vertical.md b/uidoc/core/layout/vertical.md index fde99df73..820c7c50d 100644 --- a/uidoc/core/layout/vertical.md +++ b/uidoc/core/layout/vertical.md @@ -1,2 +1,47 @@ -# vertical +# bi.vertical +#### 垂直流式布局 + +{% method %} +[source](https://jsfiddle.net/fineui/zjyaz9fn/) + +{% common %} +```javascript + +BI.createWidget({ + type: 'demo.vertical', + element: "#wrapper", + items: [{ + type: "bi.label", + cls: "layout-bg1", + text: "这里设置了hgap(水平间距)，vgap(垂直间距)", + height: 30 + }, { + type: "bi.label", + cls: "layout-bg2", + text: "这里设置了hgap(水平间距)，vgap(垂直间距)", + height: 30 + }] +}); + + + +``` + +{% 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 | | | +| scrolly | 设置垂直方向是否有滚动条 | boolean | true,false | true | + +--- \ No newline at end of file diff --git a/uidoc/core/layout/vertical_adapt.md b/uidoc/core/layout/vertical_adapt.md index 8835fff02..3e12b4cfb 100644 --- a/uidoc/core/layout/vertical_adapt.md +++ b/uidoc/core/layout/vertical_adapt.md @@ -7,50 +7,25 @@ {% 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", -}); + type: "bi.vertical_adapt", + element: "#wrapper", + 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 + }] +}) diff --git a/uidoc/core/layout/vtape.md b/uidoc/core/layout/vtape.md index cbcd749cd..cb83303be 100644 --- a/uidoc/core/layout/vtape.md +++ b/uidoc/core/layout/vtape.md @@ -1,2 +1,64 @@ -# vtape +# bi.vtape +#### 垂直tape布局,两列定高,一列自适应 + +{% method %} +[source](https://jsfiddle.net/fineui/ufpnz53d/) + +{% common %} +```javascript + +BI.createWidget({ + type: "bi.vtape", + element: "#wrapper", + items : [ + { + height: 100, + el : { + type : 'bi.label', + text : '1', + cls: "layout-bg1" + } + }, { + height: 200, + el : { + type : 'bi.label', + text : '2', + cls: "layout-bg2" + } + }, { + height: 'fill', + el : { + type : 'bi.label', + text : '3', + cls: "layout-bg3" + } + } + ] +}); + + + + + +``` + +{% 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/detailed/bi.button/general.md b/uidoc/detailed/bi.button/general.md index e583a21c7..ad90e1e8e 100644 --- a/uidoc/detailed/bi.button/general.md +++ b/uidoc/detailed/bi.button/general.md @@ -7,112 +7,7 @@ {% common %} ```javascript -Demo = {}; -Demo.Buttons = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-button" - }, - render: function () { - var items = [{ - el: { - type: 'bi.button', - text: '一般按钮', - level: 'common', - height: 30 - } - }, - { - el: { - type: 'bi.button', - text: '普通灰化按钮', - disabled: true, - level: 'success', - height: 30 - } - }, { - el: { - type: 'bi.button', - text: '带图标的按钮', - //level: 'ignore', - iconClass: "close-font", - height: 30 - } - }, { - el: { - type: 'bi.button', - text: '一般按钮', - block: true, - level: 'common', - height: 30 - } - }, - { - el: { - type: 'bi.button', - text: '普通灰化按钮', - block: true, - disabled: true, - level: 'success', - height: 30 - } - }, { - el: { - type: 'bi.button', - text: '带图标的按钮', - block: true, - //level: 'ignore', - iconClass: "close-font", - height: 30 - } - }, { - el: { - type: 'bi.button', - text: '一般按钮', - clear: true, - level: 'common', - height: 30 - } - }, - { - el: { - type: 'bi.button', - text: '普通灰化按钮', - clear: true, - disabled: true, - level: 'success', - height: 30 - } - }, { - el: { - type: 'bi.button', - text: '带图标的按钮', - clear: true, - //level: 'ignore', - iconClass: "close-font", - height: 30 - } - }, { - el: { - type: 'bi.text_button', - text: '文字按钮', - height: 30 - } - } - ]; - BI.each(items, function (i, item) { - item.el.handler = function () { - BI.Msg.alert('按钮', this.options.text); - } - }); - return { - type: "bi.left", - vgap: 100, - hgap: 20, - items: items - } - } -}); -BI.shortcut("demo.buttons", Demo.Buttons); + BI.createWidget({ type: 'demo.buttons', element: "#wrapper", @@ -155,8 +50,8 @@ BI.createWidget({ | block| 是否块状显示，即不显示边框，没有最小宽度的限制 | boolean| true,false | false | | clear| 是否去掉边框和背景 |boolean| true,false | false | | textAlign | 文字布局 | string | left,center,right | cneter | -| whiteSpace | 元素内的空白处理方式 | string | normal,pre,nowrap,pre-wrap,pre-line,inherit | nowrap| -| forceCenter | | boolean | true,false | false | +| whiteSpace | 元素内的空白处理方式 | string | normal,nowrap | nowrap| +| forceCenter | 是否无论如何都要居中, 不考虑超出边界的情况, 在未知宽度和高度时有效 | boolean | true,false | false | | textWidth| 按钮文本宽度 | number| | null | | textHeight | 按钮文本高度 | number| | null | diff --git a/uidoc/detailed/bi.button/items.md b/uidoc/detailed/bi.button/items.md index d427bf753..a73bd37d3 100644 --- a/uidoc/detailed/bi.button/items.md +++ b/uidoc/detailed/bi.button/items.md @@ -5,34 +5,25 @@ {% common %} ```javascript -Demo = {}; -Demo.Items = BI.inherit(BI.Widget, { - render: function () { - return { - type: "bi.vertical", - items: [{ - type: "bi.label", - height: 30, - text: "单选item" - }, { - type: "bi.single_select_item", - text: "单选项" - }, { - type: "bi.label", - height: 30, - text: "复选item" - }, { - type: "bi.multi_select_item", - text: "复选项" - }] - - } - } -}); -BI.shortcut("demo.items", Demo.Items); + BI.createWidget({ - type: 'demo.items', - element: "#wrapper", + type: 'bi.vertical', + element: "#wrapper", + items: [{ + type: "bi.label", + height: 30, + text: "单选item" + }, { + type: "bi.single_select_item", + text: "单选项" + }, { + type: "bi.label", + height: 30, + text: "复选item" + }, { + type: "bi.multi_select_item", + text: "复选项" + }] }); diff --git a/uidoc/detailed/bi.button/node.md b/uidoc/detailed/bi.button/node.md index d31067352..74348d87b 100644 --- a/uidoc/detailed/bi.button/node.md +++ b/uidoc/detailed/bi.button/node.md @@ -5,42 +5,32 @@ {% common %} ```javascript -Demo = {}; -Demo.Nodes = BI.inherit(BI.Widget, { - render: function (vessel) { - return { - type: "bi.vertical", - items: [{ - type: "bi.label", - height: 30, - text: "十字形的节点" - }, { - type: "bi.plus_group_node", - text: "十字形的节点" - }, { - type: "bi.label", - height: 30, - text: "三角形的节点" - }, { - type: "bi.triangle_group_node", - text: "三角形的节点" - }, { - type: "bi.label", - height: 30, - text: "箭头节点" - }, { - type: "bi.arrow_group_node", - text: "箭头节点" - }] - } - } -}); - -BI.shortcut("demo.nodes", Demo.Nodes); BI.createWidget({ - type: 'demo.nodes', - element: "#wrapper", + type: 'bi.vertical', + element: "#wrapper", + items: [{ + type: "bi.label", + height: 30, + text: "十字形的节点" + }, { + type: "bi.plus_group_node", + text: "十字形的节点" + }, { + type: "bi.label", + height: 30, + text: "三角形的节点" + }, { + type: "bi.triangle_group_node", + text: "三角形的节点" + }, { + type: "bi.label", + height: 30, + text: "箭头节点" + }, { + type: "bi.arrow_group_node", + text: "箭头节点" + }] }); diff --git a/uidoc/detailed/bi.button/segment.md b/uidoc/detailed/bi.button/segment.md index 912a25890..c70ee213d 100644 --- a/uidoc/detailed/bi.button/segment.md +++ b/uidoc/detailed/bi.button/segment.md @@ -7,40 +7,31 @@ {% common %} ```javascript -Demo = {}; -Demo.Segments = BI.inherit(BI.Widget, { - render: function () { - return { - type: "bi.vertical", - items: [{ - type: "bi.label", - height: 30, - text: "默认风格" - }, { - type: "bi.segment", - items: [{ - text: "tab1", - value: 1, - selected: true - }, { - text: "tab2", - value: 2 - }, { - text: "tab3 disabled", - disabled: true, - value: 3 - }] - }], - hgap: 50, - vgap: 20 - } - } -}); -BI.shortcut("demo.segments", Demo.Segments); BI.createWidget({ - type: 'demo.segments', - element: "#wrapper", + type: "bi.vertical", + element: "#wrapper", + items: [{ + type: "bi.label", + height: 30, + text: "默认风格" + }, { + type: "bi.segment", + items: [{ + text: "tab1", + value: 1, + selected: true + }, { + text: "tab2", + value: 2 + }, { + text: "tab3 disabled", + disabled: true, + value: 3 + }] + }], + hgap: 50, + vgap: 20 }); ``` diff --git a/uidoc/detailed/bi.button/tooltip.md b/uidoc/detailed/bi.button/tooltip.md index 1e45143a9..7a384e925 100644 --- a/uidoc/detailed/bi.button/tooltip.md +++ b/uidoc/detailed/bi.button/tooltip.md @@ -5,107 +5,72 @@ {% common %} ```javascript -Demo = {}; -Demo.Tips = BI.inherit(BI.Widget, { - props: { - baseCls: "demo-tips" - }, - render: function () { - var btns = []; - var bubble = BI.createWidget({ - type: "bi.left", - items: [{ - el: { - type: 'bi.button', - text: 'bubble测试', - height: 30, - handler: function () { - BI.Bubbles.show("singleBubble1", "bubble测试", this); - btns.push("singleBubble1"); - } - } - }, { - el: { - type: 'bi.button', - text: 'bubble测试(居中显示)', - height: 30, - handler: function () { - BI.Bubbles.show("singleBubble2", "bubble测试", this, { - offsetStyle: "center" - }); - btns.push("singleBubble2"); - } - } - }, { - el: { - type: 'bi.button', - text: 'bubble测试(右边显示)', - height: 30, - handler: function () { - BI.Bubbles.show("singleBubble3", "bubble测试", this, { - offsetStyle: "right" - }); - btns.push("singleBubble3"); - } - } - }, { - el: { - type: 'bi.button', - text: '隐藏所有 bubble', - height: 30, - cls: "layout-bg2", - handler: function () { - BI.each(btns, function (index, value) { - BI.Bubbles.hide(value); - }) - } - } - }], - hgap: 20, - vgap: 20 - }); - var title = BI.createWidget({ - type: "bi.vertical", - items: [{ - type: "bi.label", - cls: "layout-bg1", - height: 50, - title: "title提示", - text: "移上去有title提示", - textAlign: "center" - }], - hgap: 20, - vgap: 20 - }); +var bubble = BI.createWidget({ + type: "bi.left", + items: [{ + el: { + type: 'bi.button', + text: 'bubble测试', + height: 30, + handler: function () { + BI.Bubbles.show("singleBubble1", "bubble测试", this); + btns.push("singleBubble1"); + } + } + },{ + el: { + type: 'bi.button', + text: '隐藏所有 bubble', + height: 30, + cls: "layout-bg2", + handler: function () { + BI.each(btns, function (index, value) { + BI.Bubbles.hide(value); + }) + } + } + }], + hgap: 20, + vgap: 20 +}); - var toast = BI.createWidget({ - type: "bi.vertical", - items: [{ - el: { - type: 'bi.button', - text: '简单Toast测试', - height: 30, - handler: function () { - BI.Msg.toast("这是一条简单的数据"); - } - } - }], - vgap: 20 - }); +var title = BI.createWidget({ + type: "bi.vertical", + items: [{ + type: "bi.label", + cls: "layout-bg1", + height: 50, + title: "title提示", + text: "移上去有title提示", + textAlign: "center" + }], + hgap: 20, + vgap: 20 +}); - return { - type: "bi.horizontal_auto", - vgap: 20, - hgap: 20, - items: [bubble, title, toast] +var toast = BI.createWidget({ + type: "bi.vertical", + items: [{ + el: { + type: 'bi.button', + text: '简单Toast测试', + height: 30, + handler: function () { + BI.Msg.toast("这是一条简单的数据"); + } } - } + }], + vgap: 20 }); -BI.shortcut("demo.tips", Demo.Tips); + + BI.createWidget({ - type: 'demo.tips', - element: "#wrapper", + type: "bi.horizontal_auto", + element: "#wrapper", + vgap: 20, + hgap: 20, + items: [bubble, title, toast] });