Browse Source

各种小组件

es6
gittz 7 years ago
parent
commit
6bbb8980c0
  1. 11
      uidoc/SUMMARY.md
  2. 167
      uidoc/detailed/bi.button/general.md
  3. 61
      uidoc/detailed/bi.button/items.md
  4. 68
      uidoc/detailed/bi.button/node.md
  5. 67
      uidoc/detailed/bi.button/segment.md
  6. 133
      uidoc/detailed/bi.button/tooltip.md
  7. 2
      uidoc/detailed/text_input/bi.clear_editor.md
  8. 2
      uidoc/detailed/text_input/bi.search_editor.md
  9. 2
      uidoc/detailed/text_input/bi.text_editor.md

11
uidoc/SUMMARY.md

@ -4,13 +4,12 @@
* [文档规范](README.md) * [文档规范](README.md)
## 详细控件 ## 详细控件
* 按钮组 * 各种小组件
* [通用按钮](detailed/bi.button/general.md) * [通用按钮](detailed/bi.button/general.md)
* [带提示的按钮](detailed/bi.button/tooltip.md) * [提示性信息](detailed/bi.button/tooltip.md)
* [单选框](detailed/bi.single_select_item.md) * [各种items](detailed/bi.button/items.md)
* [复选框](detailed/bi.multi_select_item.md) * [各种节点nodes](detailed/bi.button/node.md)
* [node节点](detailed/node.md) * [各种segment](detailed/bi.button/segment.md)
* [segment组件](detailed/bi.segment.md)
* 树形结构 * 树形结构
* [bi.multi_tree_combo](detailed/tree/bi.multi_tree_combo.md) * [bi.multi_tree_combo](detailed/tree/bi.multi_tree_combo.md)
* [bi.switch_tree](detailed/tree/bi.switch_tree.md) * [bi.switch_tree](detailed/tree/bi.switch_tree.md)

167
uidoc/detailed/bi.button/general.md

@ -1,2 +1,167 @@
# 通用按钮 # bi.button
##通用按钮
{% method %}
[source](https://jsfiddle.net/fineui/txqwwzLm/)
{% 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",
text: '一般按钮',
level: 'common',
height: 30
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| hgap | 效果相当于文本框左右padding值,如果clear属性为true,该属性值置0 | number | | 10 |
| 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 | | |
| width | 宽度 | number | | |
| height | 高度 | number | | |
##### 高级属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| level |按钮类型 | string| common,success,warning,ignore | common |
| text|按钮文本内容 | string| | |
| disabled|灰化 | boolean| true,false | |
| minWidth | 最小宽度,如果block/clear中某一项为true,此项值为0,否则为90 | number | | 90 |
| shadow | | boolean| true,false | |
| isShadowShowingOnSelected| | boolean| true,false | true |
| readonly | 是否只读 | boolean | true,false | true |
| iconClass | 图标类型 | string| | " "|
| 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 |
| textWidth| 按钮文本宽度 | number| | null |
| textHeight | 按钮文本高度 | number| | null |
---

61
uidoc/detailed/bi.button/items.md

@ -0,0 +1,61 @@
## 各种items
{% method %}
[source](https://jsfiddle.net/fineui/jyo0qdwL/)
{% 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",
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| hgap | 效果相当于文本框左右padding值,如果clear属性为true,该属性值置0 | number | | 10 |
| 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 | | |
| width | 宽度 | number | | |
| height | 高度 | number | | |
--- ---

68
uidoc/detailed/bi.button/node.md

@ -0,0 +1,68 @@
## 各种节点nodes
{% method %}
[source](https://jsfiddle.net/fineui/jg257cog/)
{% 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",
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| hgap | 效果相当于文本框左右padding值,如果clear属性为true,该属性值置0 | number | | 10 |
| 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 | | |
| width | 宽度 | number | | |
| height | 高度 | number | | |
--- ---

67
uidoc/detailed/bi.button/segment.md

@ -0,0 +1,67 @@
# bi.sgement
## 各种segment
{% method %}
[source](https://jsfiddle.net/fineui/7skvd64L/)
{% 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",
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| hgap | 效果相当于文本框左右padding值 | number | | 10 |
| 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 | | |
| width | 宽度 | number | | |
| height | 高度 | number | | |
--- ---

133
uidoc/detailed/bi.button/tooltip.md

@ -1,2 +1,133 @@
# 带提示的按钮 ## 提示性信息
{% method %}
[source](https://jsfiddle.net/fineui/gn25yyrx/)
{% 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 toast = BI.createWidget({
type: "bi.vertical",
items: [{
el: {
type: 'bi.button',
text: '简单Toast测试',
height: 30,
handler: function () {
BI.Msg.toast("这是一条简单的数据");
}
}
}],
vgap: 20
});
return {
type: "bi.horizontal_auto",
vgap: 20,
hgap: 20,
items: [bubble, title, toast]
}
}
});
BI.shortcut("demo.tips", Demo.Tips);
BI.createWidget({
type: 'demo.tips',
element: "#wrapper",
});
```
{% endmethod %}
## API
##### 基础属性
| 参数 | 说明 | 类型 | 可选值 | 默认值
| :------ |:------------- | :-----| :----|:----
| hgap | 效果相当于文本框左右padding值 | number | | 10 |
| 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 | | |
| width | 宽度 | number | | |
| height | 高度 | number | | |
--- ---

2
uidoc/detailed/text_input/bi.clear_editor.md

@ -38,5 +38,5 @@ BI.createWidget({
| width | 文本框宽度 | number | | | | width | 文本框宽度 | number | | |
| height | 文本框高度 | number | | 30 | | height | 文本框高度 | number | | 30 |
# --- ---

2
uidoc/detailed/text_input/bi.search_editor.md

@ -55,6 +55,6 @@ BI.createWidget({
| width | 文本框宽度 | number | | | | width | 文本框宽度 | number | | |
| height | 文本框高度 | number | | 30 | | height | 文本框高度 | number | | 30 |
# --- ---

2
uidoc/detailed/text_input/bi.text_editor.md

@ -85,5 +85,5 @@ BI.createWidget({
| width | 文本框宽度 | number | | | | width | 文本框宽度 | number | | |
| height | 文本框高度 | number | | 30 | | height | 文本框高度 | number | | 30 |
# --- ---

Loading…
Cancel
Save