main
yumoqing 2023-12-18 18:15:22 +08:00
parent 77994be32a
commit 86f6872006
75 changed files with 3454 additions and 939 deletions

BIN
docs/.DS_Store vendored

Binary file not shown.

0
docs/BoxLayout.md 100755 → 100644
View File

43
docs/HBox.md 100755 → 100644
View File

@ -1,11 +1,36 @@
# HBox
Hbox is a horizontal layout widget, it layout subwidgeta in horizontal direction
## use case
## inheritance
HBox inherited fromm BoxLayout
## options
Hbox是一个水平布局小部件它按水平方向布局子小部件
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "HBox",
"options":
{
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
**注意:hbox控件是水平排列的控件,相当于一个容器,可以容纳其他的控件,如button,form等**
## method
none
## event
none

0
docs/README.md 100755 → 100644
View File

94
docs/accordion.md 100644
View File

@ -0,0 +1,94 @@
# accordion
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"Accordion",
"options":{
"item_size":'28px',
"items":[
{
"name":"test1",
"icon":"/imgs/t.png",
"text":"accordion 1 test",
"content":{
"widgettype":"Text",
"options":{
"text":"text content 1",
"i81n":true
}
}
},
{
"name":"test2",
"icon":"/imgs/t.png",
"text":"accordion 2 test",
"content":{
"widgettype":"Text",
"options":{
"text":"text content 2",
"i81n":true
}
}
}
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\accordion.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------ | ------ | -------- | --------- | ------ |
| widgettype | 控件类型 | String | 是 | Accordion | --- |
| options | 控件的配置项 | Object | 是 | --- | --- |
### widget.options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | ------------ | ------ | -------- | ------ | ------ |
| item_size | 控件的高度 | String | 是 | --- | --- |
| items | 控件的配置项 | Array | 是 | --- | --- |
#### widget.options.items参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------- | ---------------- | ------ | -------- | ------ | ------ |
| name | 原生name属性 | String | 是 | --- | --- |
| icon | 图标 | String | 否 | --- | --- |
| text | 默认显示的文字值 | String | 否 | --- | --- |
| content | 控件内容的配置项 | Objet | 是 | --- | --- |
##### widget.options.items参数内content参数说明(当content.widgettype值为Text时)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | ---------------- | ------- | -------- | ---------- | ------ |
| text | 默认显示的文字值 | String | 否 | --- | --- |
| i81n | 是否国际化 | Boolean | 否 | true/false | --- |

55
docs/audio.md 100644
View File

@ -0,0 +1,55 @@
# audio
## 用法
```html
<html>
<head>
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
/*
https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
*/
const opts =
{
"widget": {
"id":"audioplayer",
"widgettype":"AudioPlayer",
"options":{
"autoplay":true,
"url":"http://kimird.com/songs/sample-mp3-file.mp3"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\audio.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ------ | ------ |
| id | 控件的唯一标识 | String | 是 | --- | --- |
| widgettype | 控件类型 | String | 是 | --- | --- |
### widget.options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ------------ | ------- | -------- | ---------- | ------ |
| autoplay | 是否可以暂停 | Boolean | 是t | true/false | --- |
| url | 数据来源地址 | String | 是 | --- | --- |

47
docs/blankIcon.md 100644
View File

@ -0,0 +1,47 @@
# Blankicon
此控件是显示图标控件
# 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "BlankIcon",
"options": {
"url": "/bricks/imgs/edit.png",
"height": "100%",
"width": "100%"
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------- | ------ | -------- | ------ | ------ |
| url | 图标来源 | String | 是 | --- | --- |
| height | 高度 | String | 是 | 百分比 | --- |
| width | 宽度 | String | 是 | 百分比 | --- |

View File

@ -0,0 +1,16 @@
| 页面名称 | html文件 | js文件 | 说明文件是否完成 |
| ------------ | -------- | ------ | ---------------- |
| accordion | √ | √ | √ |
| audio | √ | √ | √ |
| aggrid | x | √ | x |
| button | √ | √ | √ |
| datagrid | √ | √ | x(html页面报错) |
| docs | √ | x | √ |
| editabletree | √ | √ | √ |
| error | √ | x | x(无html页面) |
| message | √ | √ | √ |
| tab | √ | √ | √ |
| toolbar | √ | √ | √ |
| tree | √ | √ | √ |
| video | √ | √ | √ |

118
docs/button.md 100644
View File

@ -0,0 +1,118 @@
# button
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "HBox",
"options": {
"height": "auto",
"width": "100%"
},
"subwidgets": [
{
"widgettype": "Button",
"options": {
"name": "test",
"icon": "/bricks/imgs/submit.png",
"label": "test once",
"tooltip": "This is a joke too",
"nonepack": true,
"orientation": "horizontal"
}
},
{
"widgettype": "Button",
"options": {
"name": "test",
"icon": "/bricks/imgs/reset.png",
"tooltip": "This is a joke",
"label": "test twice",
"nonepack": true,
"orientation": "horizontal"
}
}
],
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "script",
"script": "alert('HBox clicked');"
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 示例
![本地png图片](F:\mh\bricks\docs\images\button.png)
### widget 参数说明
控件实例
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | Hbox | --- |
| options | 控件样式 | Object | 否 | --- | --- |
| subwidgets | 控件 | Array | 否 | --- | --- |
| binds | 控件绑定的事件 | Array | 否 | --- | --- |
#### widget .options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------- | ------ | -------- | --------- | ------ |
| height | 高度 | String | 是 | auto/100% | --- |
| width | 宽度 | String | 是 | auto/100% | --- |
#### widget .subwidgets
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | Button | --- |
| options | 控件详细配置项 | Object | 是 | --- | --- |
##### options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----------- | -------------- | ------- | -------- | ---------- | ---------- |
| name | 控件的属性 | String | 是 | text | --- |
| icon | 图标 | String | 是 | --- | --- |
| label | 默认文本值 | String | 否 | --- | --- |
| tooltip | 提示文本 | String | 否 | --- | --- |
| nonepack | 是否自身有边框 | Boolean | 是 | true/false | --- |
| orientation | 排列方向 | String | 是 | horizontal | horizontal |
#### widget .binds
此项为绑定的事件
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------------ | ------ | -------- | ------ | ------ |
| wid | 事件执行的对象 | String | 是 | self | --- |
| event | 事件执行类型 | String | 是 | click | --- |
| actiontype | 事件执行的程序类型 | String | 是 | --- | --- |
| script | 事件执行的具体方法 | String | 是 | --- | --- |

44
docs/docs.md 100644
View File

@ -0,0 +1,44 @@
# docs
## 用法
```html
<html>
<head>
</head>
<body>
<script src="/marked.js"></script>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"MarkdownViewer",
"options":{
"navigator":true,
"md_url":"../docs/index.md"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | --- | --- |
### widget.options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | ---------------- | ------- | -------- | ---------- | ------ |
| navigator | 是否可以导航指向 | Boolean | 是 | true/false | --- |
| md_url | 数据来源地址 | String | 是 | --- | --- |

View File

@ -0,0 +1,50 @@
# editabletree
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype":"urlwidget",
"options":{
"url":"editabletree.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\editabletree.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ---------- | ------ | -------- | --------- | ------ |
| widgettype | 控件类型 | String | 是 | urlwidget | --- |
| options | 控件配置项 | Object | 是 | --- | --- |
### options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------- | ------ | -------- | ------ | ------ |
| url | 数据来源 | String | 是 | --- | --- |
**注意:url可以是个json文件**

9
docs/error.md 100644
View File

@ -0,0 +1,9 @@
# error
# 用法
```html
```

377
docs/form.md 100644
View File

@ -0,0 +1,377 @@
# form
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "VBox",
"options": { "height": "100%" },
"subwidgets": [
{
"widgettype": "HBox",
"options": { "height": "auto" },
"subwidgets": [
{
"widgettype": "Text",
"options": {
"otext": "Please change Font size",
"i18n": true
}
},
{
"widgettype": "Button",
"options": {
"label": "A",
"width": "auto",
"item_rate": 1.4
},
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "script",
"target": "app",
"script": "bricks_app.textsize_bigger()"
}
]
},
{
"widgettype": "Button",
"options": {
"label": "A",
"width": "auto",
"item_rate": 0.8
},
"binds": [
{
"wid": "self",
"event": "click",
"actiontype": "script",
"target": "app",
"script": "bricks_app.textsize_smaller()"
}
]
}
]
},
{
"widgettype": "Form",
"options": {
"submit_url": "/ttt/ttt.dspy",
"title": "Test hahah Form",
"description": "test input implemented",
"fields": [
{
"uitype": "email",
"name": "email",
"label": "Email",
'required': true
},
{
"uitype": "tel",
"name": "tel",
"pattern": "{\d}3-{\d}4-{\d}4",
"label": "Tel",
'required': true
},
{
"uitype": "file",
"name": "file",
"label": "File",
'required': true
},
{
"uitype": "str",
"minlength": 3,
"length": 30,
"value": "tlegre",
"name": "name",
"label": "Name",
'required': true
},
{
"uitype": "int",
"minlength": 3,
"length": 30,
"value": 12432,
"name": "integer",
"label": "Integer",
'required': true
},
{
"uitype": "float",
"dec_length": 3,
"length": 25,
"name": "float",
"label": "Float"
},
{
"uitype": "date",
"name": "date",
"label": "Date",
'required': true
},
{
"uitype": "password",
"minlength": 3,
"length": 30,
"name": "password",
"label": "Password",
'required': true
},
{
"uitype": "checkbox",
"name": "checkbox",
"label": "CheckBox",
"value": 2,
"dataurl": "test_code.json",
'required': true
},
{
"uitype": "audio",
"name": "audio",
"label": "Audio",
'required': true
},
{
"uitype": "code",
"name": "code",
"label": "Code",
"value": 2,
"dataurl": "test_code.json",
'required': true
},
{
"uitype": "text",
"name": "text",
"value": "This is a test",
"label": "Text",
'required': true
}
]
}
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\form.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ----------------------------- | ------ | -------- | --------- | ---------------- |
| widgettype | 控件类型 | String | 是 | Vbox/Hbox | --- |
| options | 当前控件的配置项 | Object | 是 | height | 100%/auto/scroll |
| id | 控件的唯一标识 | String | 否 | --- | ---- |
| subwidgets | 表单里的内容,比如表单里的子项 | Object | 否 | --- | --- |
| binds | 绑定的事件 | Object | 否 | --- | --- |
**注意:**
**如果没有widget.subwidgets参数的话,表单是一个框架,没有子级,但是还可已继续添加事件**
### widgent.subeidgets参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------------------------------- | ------ | -------- | --------- | ---------------- |
| widgettype | 控件类型 | String | 是 | Vbox/Hbox | --- |
| options | 当前控件的配置项 | Object | 是 | height | 100%/auto/scroll |
| subwidgets | 表单里的内容的配置项,比如表单里的子项 | Object | 否 | ---- | --- |
**注意:此处widgettype的值不一样,options的配置项也不相同**
#### widgettype值为Hbox时,相关配置项的参数说明
##### options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------- | ---------------- | ------ | -------- | ---------------- | ------ |
| options | 表单子项的配置项 | object | 是 | {"heigt":"auto"} | --- |
##### subwidgets配置项参数说明
**注意:subwidgets.widgettype的值不一样,相对的options的参数也不相同**
* widgettype值为"Text"时,options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----- | -------------- | ------- | -------- | ---------- | ------ |
| otext | 默认显示的文字 | String | 否 | --- | --- |
| i18n | 是否国家化 | Boolean | 否 | true/false | --- |
* widgettype值为"Button"时,options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | -------------- | ------ | -------- | --------- | ------ |
| label | 表单子项的标题 | String | 否 | --- | --- |
| width | 表单子项的宽度 | String | 否 | auto/100% | --- |
| item_rate | 字体的大小 | number | 否 | --- | --- |
* binds事件参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------------- | ------ | -------- | ------ | ------ |
| wid | 当前节点的唯一标识 | String | 是 | self | --- |
| event | 事件的类型 | String | 是 | click | --- |
| actiontype | 事件的执行方式 | String | 是 | script | --- |
| target | 事件在哪个载体执行 | String | 是 | --- | --- |
| script | 事件通过哪个方法执行 | String | 是 | --- | --- |
#### widgettype值为Form时,相关配置项的参数说明
##### options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----------- | ------------------------ | ------ | -------- | ------ | ------ |
| submit_url | 接口地址 | String | 是 | --- | --- |
| title | 标题 | String | 否 | --- | --- |
| description | 描述 | String | 否 | --- | --- |
| fields | 表单的子项的具体配置内容 | Array | 否 | --- | --- |
###### options.fieds参数说明
**注意:options.fieds内,每一项的uitype值不一样,其配置项也不同**
* uitype为email时的参数配置(**注意:email为邮件格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ---------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
* uitype为tel时的参数配置(**注意:tel为手机号格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ---------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| pattern | 当前项的正则校验 | String | 否 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
* uitype为file时的参数配置(**注意:file为上传文件格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ---------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
* uitype为str时的参数配置(**注意:str为文字格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | ---------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| minlength | 当前值的最少字符数量 | number | 否 | --- | --- |
| length | 当前值的最大字符数量 | number | 否 | --- | --- |
| value | 当前子项默认显示的值 | String | 否 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
+ uitype为int时的参数配置(**注意:int为数字格式**)
**注意:uitype为int时,数值可以点击增加或者减少,且只能填入数字)**
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | ---------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| minlength | 当前值的最少字符数量 | number | 否 | --- | --- |
| length | 当前值的最大字符数量 | number | 否 | --- | --- |
| value | 当前子项默认显示的值 | String | 否 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
+ uitype为float时的参数配置(**注意:float为浮点数字格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| dec_length | 当前值能显示的最少浮点位数 | number | 否 | --- | --- |
| length | 当前值能显示的最多浮点位数 | number | 否 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
+ uitype为date时的参数配置(**注意:data为时间格式**)
**注意:此项可以填写时间,也可以选择时间**
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ---------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
* uitype为password时的参数配置(**注意:password为密码格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | ---------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| minlength | 当前值的最少字符数量 | number | 否 | --- | --- |
| length | 当前值的最大字符数量 | number | 否 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
* uitype为chexkbox时的参数配置(**注意:chexkbox为复选格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ------------------------------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
| value | 当前子项默认显示的值 | number | 否 | --- | --- |
| dataurl | 当前项的值的来源,接口地址或者是JSON文件地址 | String | 是 | --- | --- |
* uitype为code时的参数配置(**注意:code为下拉选择格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ------------------------------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |
| value | 当前子项默认显示的值 | number | 否 | --- | --- |
| dataurl | 当前项的值的来源,接口地址或者是JSON文件地址 | String | 是 | --- | --- |
* uitype为text时的参数配置(**注意:text为文本框格式**)
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ---------------------- | ------- | -------- | ---------- | ------ |
| uitype | 表单子项的类型 | String | 是 | --- | --- |
| value | 当前子项默认显示的值 | String | 否 | --- | --- |
| name | 表单子项的原生name属性 | String | 是 | --- | --- |
| label | 当前子项的标签文本 | String | 否 | --- | --- |
| required | 是否必须 | Boolean | 是 | true/false | --- |

14
docs/hfiller.md 100644
View File

@ -0,0 +1,14 @@
# Hfiller
此控件为容器横向排列时,若宽度过宽,自动填充
## option参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------- | -------- | ------ | -------- | ------ | ------ |
| baseURI | 数据路径 | String | 是 | --- | --- |
| tooltip | 提示 | String | 是 | --- | --- |
| css | 样式 | String | 否 | --- | --- |
| csses | 样式 | String | 否 | --- | --- |
此控件为样式排列控件

55
docs/icon.md 100644
View File

@ -0,0 +1,55 @@
# Icon
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Icon",
"options": {
"url": "/bricks/imgs/edit.png",
"height": "10%",
"width": "10%"
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\icon.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ---------------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | Icon | -- |
| options | 控件的详细配置项 | Object | 是 | --- | --- |
### options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------- | ------ | -------- | -------- | ------ |
| url | icon来源 | String | 是 | --- | -- |
| height | 高度 | String | 否 | 百分比值 | --- |
| width | 宽度 | String | 否 | 百分比值 | --- |
**注意:options参数的height和width参数不写,那么这两项的默认值是'100%'**

52
docs/image.md 100755 → 100644
View File

@ -1,37 +1,40 @@
# Image
Image widget show image
## use case
```
<html>
<head>
<link rel="stylesheet" href="../css/bricks.css">
</head>
<body>
<script src="../bricks.js"></script>
# 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
{
"widget": {
"widgettype":"Image",
"options":{
"source":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
"height":"100%",
"width":"100%"
"widgettype": "Image",
"options": {
"url": "https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
"height": "100%",
"width": "100%"
}
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
the result is <br>
![image](image.png)
![image](F:\mh\bricks\docs\images\image.png)
## inheritance
Image inherited from JsWidget
@ -39,19 +42,14 @@ Image inherited from JsWidget
## options
```
{
"source":
"url":
"width":
"height":
}
```
### source
source is url to the image
### width
optional, default is 100%, specified the image's width
### height
optional, default is 100%, specified the image's height
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------- | ------ | -------- | ---------- | ------ |
| url | 照片路径 | String | 是 | --- | --- |
| width | 宽度 | String | 是 | 百分比数值 | --- |
| height | 高度 | String | 是 | 百分比数值 | --- |
## method
none
## event
none

0
docs/image.png 100755 → 100644
View File

Before

Width:  |  Height:  |  Size: 974 KiB

After

Width:  |  Height:  |  Size: 974 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 974 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
docs/images/tab.png 100644

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

@ -1 +0,0 @@
README.md

1
docs/index.md 100644
View File

@ -0,0 +1 @@
README.md

79
docs/input.md 100644
View File

@ -0,0 +1,79 @@
# input
# 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "UiStr",
"options":
{
"name": "email",
"label": "Email",
'required': true
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\input.png)
## options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | -------------- | ------ | -------- | ------ | ------ |
| name | 控件的原生属性 | String | 是 | --- | --- |
| label | 文本标签 | String | 是 | --- | --- |
| required | 是否必填 | String | 是 | --- | --- |
**注意:input内容不一样,widgettype的值也不一样.**
1.字符串:UiStr;
2.手机号:UiTel;
3.时间日期:UiDate;
4.整数:UiInt;
5.浮点数:UiFloat;
6.多选:UiCheckBox;
7.单选:UiCheck;
8.邮箱:UiEmail;
9.上传文件:UiFile;
10.下拉选择:Code;
11.文本框:UiText;
12.密码框:UiPassword;
13.音频:UiAudio;
14.视频:UiVideo;

0
docs/layout.md 100755 → 100644
View File

61
docs/markdownviewer.md 100755 → 100644
View File

@ -1,13 +1,58 @@
# MarkdownView
## Options attributes
MarkdownViewer has following attributes:
### md_url
md_url is a url address in which it is a markdown text file.
**此控件可以完成一个指向md文件的操作**
## Description
MarkdownViewer parses and show the markdown content child dom element. and ifound and modify element with tag name "a" to change href to '#' and add onclick action to get and show the markdown content inside this MarkdownViewer dom elementame "a" in markdown content.
# 用法
## Event
none
```html
<html>
<head>
</head>
<body>
<div>
<script src="/marked.min.js"></script>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "MarkdownViewer",
"options": {
"md_url": "test1.md"
}
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# options
## md_url
此属性是指向要打开的md文件,是md文件的路径

143
docs/message.md 100644
View File

@ -0,0 +1,143 @@
# Message
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Tree",
"options": {
"idField": "id",
"textField": "text",
"data": [
{
"id": 1,
"text": "node1",
"is_leaf": false,
"children": [
{
"id": 11,
"text": "node11",
"is_leaf": false,
"children": [
{
"id": 112,
"text": "node.12",
"is_leaf": false,
"children": [
{
"id": 1112,
"text": "node1112",
"is_leaf": true
},
{
"id": 1113,
"text": "node113",
"is_leaf": true
}
]
},
{
"id": 113,
"text": "node113",
"is_leaf": true
}
]
},
{
"id": 12,
"text": "node12",
"is_leaf": true
},
{
"id": 13,
"text": "node13",
"is_leaf": true
}
]
},
{
"id": 2,
"text": "node2",
"is_leaf": false,
"children": [
{
"id": 21,
"text": "node21",
"is_leaf": true
},
{
"id": 22,
"text": "node22",
"is_leaf": true
},
{
"id": 23,
"text": "node23",
"is_leaf": true
}
]
},
{
"id": 3,
"text": "node3",
"is_leaf": true
}
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
var m = new Message({
"title": "TEst Message",
"message": "This is a test message",
"auto_open": true,
"timeout": 3
})
</script>
</body>
</html>
```
## 示例
![](F:\mh\bricks\docs\images\message.png)
## 参数说明
### widget.type
控件的类型.(控件有多种类型,如:Form,Image...等等)
### widget.options参数说明
| 参数 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| --------- | -------------------- | ------- | -------- | ---------- | ------ |
| idField | 当前节点的唯一标识 | String | 是 | --- | --- |
| textField | 当前节点的label | String | 是 | --- | --- |
| is_leaf | 是否可以展开 | Boolean | 否 | true/false | --- |
| data | 文件夹具体信息的集合 | Array | 否 | --- | --- |
#### options.data参数说明
options.data参数的key必须和widget.options参数的value一致,比如widget.options.idField="id",那么options.data参数的key就是"options.data.id" .另外多了一个children参数,是对象形式,参数与options.data的参数保持一致.
注意:**如果想下写一级目录,就添加children参数对象**
## 事件
none

135
docs/miniform.md 100644
View File

@ -0,0 +1,135 @@
# MiniForm
## 用法
### 写法一:
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "urlwidget",
"options": {
"url": "miniform.json"
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
miniform.json:
```json
{
"widgettype":"MiniForm",
"options":{
"label_width":"100px",
"fields":[
{
"name":"test1",
"label":"姓名",
"uitype":"str"
},
{
"name":"test2",
"label":"性别",
"uitype":"str"
},
{
"name":"test3",
"label":"地址",
"uitype":"str"
}
]
}
}
```
### 写法二:
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "MiniForm",
"options": {
"label_width": "100px",
"fields": [
{
"name": "test1",
"label": "姓名",
"uitype": "str"
},
{
"name": "test2",
"label": "性别",
"uitype": "str"
},
{
"name": "test3",
"label": "地址",
"uitype": "str"
}
]
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\miniform.png)
## options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----------- | ------------------ | ------ | -------- | ------ | ------ |
| label_width | 控件标签的宽度 | String | 是 | --- | --- |
| fields | 控件子项的详细信息 | Array | 是 | --- | --- |
#### options.fields参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------ | -------------- | ------ | -------- | ----------- | ------ |
| name | 控件的原生属性 | String | 是 | --- | --- |
| label | 文本标签 | String | 否 | --- | --- |
| uitype | 控件类型 | String | 否 | str(字符串) | --- |

78
docs/modal.md 100644
View File

@ -0,0 +1,78 @@
# modal
# 用法
```html
<html>
<head>
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Modal",
"options": {
"auto_close": true,
"auto_open": true,
"width": "700px",
"height": "400px",
"archor": "cl"
},
"subwidgets": [
{
"widgettype": "Text",
"options": {
"text": "This is a test"
}
}
]
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\modal.png)
# options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------------------------ | ------- | -------- | ---------- | ------ |
| auto_close | 点击弹窗以外的区域是否关闭弹窗 | Boolean | 是 | true/false | --- |
| auto_close | 是否默认打开弹窗 | Boolean | 是 | true/false | --- |
| width | 宽度 | String | 是 | 百分比 | --- |
| height | 高度 | String | 是 | 百分比 | --- |
| archor | 控件的位置 | String | 是 | --- | --- |
| org_index | 控件图层层级 | String | 是 | --- | --- |
**注意:archor的值所代表的位置**
* tl:在屏幕的左上角
* tc:在屏幕顶部的中间
* tr:在屏幕的右上角
* cl:在屏幕中间部分的左侧
* cc:在屏幕的中心位置
* cr:在屏幕中间部分的右侧
* bl:在屏幕的左下角
* bc:在屏幕底部的中间
* br:在屏幕的右下角

0
docs/pw.md 100755 → 100644
View File

113
docs/tab.md 100644
View File

@ -0,0 +1,113 @@
# tab
此函数用于创建tab组件
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css">
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "TabPanel",
"options": {
"tab_wide": "auto",
"height": "100%",
"tab_long": "70%",
"tab_pos": "top",
"items": [
{
"name": "c",
"label": "C",
"content": {
"widgettype": "Text",
"options": {
"text": "This is a C language documents"
}
},
"icon": null
},
{
"name": "javascript",
"removable": true,
"label": "JavaScript",
"content": {
"widgettype": "Text",
"options": {
"text": "This is JavaScript language documents"
}
},
"icon": null
},
{
"name": "php",
"label": "PHP",
"content": {
"widgettype": "Text",
"options": {
"text": "This is PHP language documents"
}
},
"icon": null
},
{
"name": "python",
"label": "Python",
"content": {
"widgettype": "Text",
"options": {
"text": "This is Python language documents"
}
},
"icon": null
},
]
}
}
};
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 示例
![本地png图片](F:\mh\bricks\docs\images\tab.png)
## widget.options参数说明
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | ---- | ------ | --------------------- | ------ |
| tab_wide | 尺寸 | string | auto | auto |
| height | 高 | string | ---- | ---- |
| tab_long | 宽 | string | ---- | ---- |
| tab_pos | 位置 | string | top/bottom/left/right | ----- |
### options.items参数说明
一个items为一个tab项
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --------- | ------------------------------------------------- | ------- | ------ | ------ |
| name | 与选项卡绑定值 value 对应的标识符,表示选项卡别名 | string | ---- | ---- |
| label | 选项卡标题 | string | ---- | ---- |
| removable | 是否移除选项卡 | boolean | ---- | false |
| content | 选项卡的内容 | | | |
## 事件
none

156
docs/text.md 100755 → 100644
View File

@ -1,7 +1,153 @@
# Text
Text is a widget to show text
## use case
## inheritance
## options
## method
## event
## 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype":"VBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Title1",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title2",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title3",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title4",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title5",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Title6",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"Text",
"options":{
"text":"Pic Viewer",
"i18n":true
}
},
{
"widgettype":"HBox",
"options":{
},
"subwidgets":[
{
"widgettype":"Button",
"options":{
"label":"A",
"item_rate":1.4
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_bigger()"
}
]
},
{
"widgettype":"Button",
"options":{
"label":"A",
"item_rate":0.7,
"item_size":"20px"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"script",
"target":"app",
"script":"bricks_app.textsize_smaller()"
}
]
}
]
}
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\text.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | --- | --- |
| options | 控件的配置项 | Object | 是 | --- | --- |
| subwidgets | 控件子项的配置 | Object | 否 | --- | --- |
### widget.subwidgets参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------ | ------ | -------- | ------ | ------ |
| widgettype | 控件类型 | String | 是 | --- | --- |
| options | 控件的配置项 | Object | 是 | --- | --- |
#### options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | ------------ | ------- | -------- | ---------- | ------ |
| text | 默认显示的值 | String | 否 | --- | --- |
| i18n | 是否国际化 | Boolean | 否 | true/false | --- |

92
docs/title1.md 100644
View File

@ -0,0 +1,92 @@
# title1
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title2.md 100644
View File

@ -0,0 +1,92 @@
# title2
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title3.md 100644
View File

@ -0,0 +1,92 @@
# title3
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title4.md 100644
View File

@ -0,0 +1,92 @@
# title4
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title5.md 100644
View File

@ -0,0 +1,92 @@
# title5
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

92
docs/title6.md 100644
View File

@ -0,0 +1,92 @@
# title6
此控件是标题控件,标题也有大小
# 用法
```html
<html>
<head>
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script type="text/javascript">
const opts =
{
"widget": {
"widgettype": "VBox",
"options": {
},
"subwidgets": [
{
"widgettype": "Title1",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title2",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title3",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title4",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title5",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
{
"widgettype": "Title6",
"options": {
"text": "Pic Viewer",
"i18n": true
}
},
]
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
# 效果图
![](F:\mh\bricks\docs\images\title.png)
# options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | -------------- | ------- | -------- | ---------- | ------ |
| text | 标题的文本内容 | String | 是 | --- | --- |
| i18n | 是否国际化 | Boolean | 是 | true/false | --- |

0
docs/toolbar.md 100755 → 100644
View File

0
docs/toolbar.png 100755 → 100644
View File

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

88
docs/toolbarNew.md 100644
View File

@ -0,0 +1,88 @@
# Toolbar
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
</head>
<body>
<script src="http://kimird.com/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "Toolbar",
"options": {
"target": null,
"orientation": "horizontal",
"tool_margin": "15px",
"tools": [
{
"name": "c",
"Label": "C",
"icon": null
},
{
"name": "javascript",
"Label": "JavaScript",
"icon": null
},
{
"name": "php",
"Label": "PHP",
"icon": null
},
{
"name": "python",
"Label": "Python",
"icon": null
},
]
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\toolbar.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ------------ | ------ | -------- | ------- | ------ |
| widgettype | 控件类型 | String | 是 | Toolbar | --- |
| options | 控件的配置项 | Object | 是 | --- | --- |
### widget.options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----------- | ------------------ | ------ | -------- | ------------------- | ------ |
| target | 参数返回值 | String | 否 | --- | --- |
| orientation | 控件的方向 | Object | 是 | horizontal/vertical | --- |
| tool_margin | 控件子项间的距离 | String | 否 | --- | --- |
| tools | 控件子项的具体信息 | Array | 否 | --- | --- |
#### tools参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ----- | -------- | ------ | -------- | ------- | ------ |
| name | 原生属性 | String | 是 | Toolbar | --- |
| Label | 标签文本 | String | 是 | --- | --- |
| icon | 图标 | String | 是 | --- | --- |
**icon可以指向一个相对路径或者绝对路径的图标,若引入图标,则会显示在tools的前面.若没有label属性,则显示的文本是name属性的值**

52
docs/tree.md 100644
View File

@ -0,0 +1,52 @@
# Tree
## 用法
```html
<html>
<head>
<link rel="stylesheet" href="/bricks/css/bricks.css" />
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"widgettype": "urlwidget",
"options": {
"url": "tree.json"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\tree.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | ---------- | ------ | -------- | --------- | ------ |
| widgettype | 控件类型 | String | 是 | urlwidget | --- |
| options | 控件配置项 | Object | 是 | --- | --- |
**options为树形结构的数据来源**
### options
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---- | ------------ | ------ | -------- | ------ | ------ |
| url | 控件数据来源 | String | 是 | --- | --- |

0
docs/vbox.md 100755 → 100644
View File

14
docs/vfiller.md 100644
View File

@ -0,0 +1,14 @@
# Vfiller
此控件为容器纵向排列时,若宽度过宽,自动填充
## option参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ------- | -------- | ------ | -------- | ------ | ------ |
| baseURI | 数据路径 | String | 是 | --- | --- |
| tooltip | 提示 | String | 是 | --- | --- |
| css | 样式 | String | 否 | --- | --- |
| csses | 样式 | String | 否 | --- | --- |
此控件为样式排列控件

52
docs/video.md 100644
View File

@ -0,0 +1,52 @@
# video
## 用法
```html
<html>
<head>
</head>
<body>
<script src="/bricks/bricks.js"></script>
<script>
const opts =
{
"widget": {
"id":"videoplayer",
"widgettype":"VideoPlayer",
"options":{
"autoplay":true,
"url":"http://kimird.com/video/sample-mp4-file.mp4",
"type":"mp4"
}
}
}
;
const app = new BricksApp(opts);
app.run();
</script>
</body>
</html>
```
## 效果图
![](F:\mh\bricks\docs\images\video.png)
## widget参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| ---------- | -------------- | ------ | -------- | ----------- | ------ |
| id | 控件的唯一标识 | String | 是 | --- | --- |
| widgettype | 控件的类型 | String | 是 | VideoPlayer | --- |
| options | 详细配置项 | Object | 是 | --- | --- |
### options参数说明
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
| -------- | ---------------- | ------- | -------- | ---------- | ------ |
| autoplay | 视频是否可以暂停 | Boolean | 是 | true/false | --- |
| url | 视频来源地址 | String | 是 | --- | --- |
| type | 视频类型 | String | 是 | mp4 | --- |

0
docs/videoplayer.md 100755 → 100644
View File

View File

@ -1,49 +1,52 @@
# Bricks widgets
## Accordion
## AudioPlayer
## BlankIcon
## Accordion (完成)
## AudioPlayer (完成)
## BlankIcon (完成)
## BoxLayout
[boxlayout](BoxLayout.md)
## Button
## DataGrid
## EditableTree
## Button (完成)
## DataGrid (完成)
## EditableTree (完成)
## Error
## Form
## HBox
## Form (完成)
## HBox (完成)
[hbox](HBox.md)
## HFiller
## HFiller (完成)
## HScrollPanel
## Icon
## Image
## Icon (完成)
## Image (完成)
[image](image.md)
## MarkdownViewer
## MarkdownViewer (完成)
(markdown viewer](markdownviewer.md)
## Menu
## Message
## MiniForm
## Modal
## Message (完成)
## MiniForm (完成)
## Modal (完成)
## ModalForm
## MultipleStateImage
## PopupForm
## TabForm
## TabPanel
## Text
## TabPanel (完成)
## Text (完成)
[text](text.md)
## Title1
## Title2
## Title3
## Title4
## Title5
## Title6
## Toolbar
## Title1 (完成)
## Title2 (完成)
## Title3 (完成)
## Title4 (完成)
## Title5 (完成)
## Title6 (完成)
## Toolbar (完成)
[Toolbar](toolbar.md)
## Tree
## VBox
## Tree (完成)
## VBox (完成)
[VBox](vbox.md)
## VFiller
## VFiller (完成)
## VScrollPanel
## Video
## VideoPlayer
## Video (完成)
## VideoPlayer (与video一样)
[VideoPlayer](videoplayer.md)
## XTerminal
## XTerminal(没有js文件)

4
xterm/dev.xterm 100644
View File

@ -0,0 +1,4 @@
{
"host":"dev.kaiyuancloud.cn",
"username":"ymq"
}

6
xterm/glib.cc.ui 100644
View File

@ -0,0 +1,6 @@
{
"widgettype":"Wterm",
"options":{
"ws_url":"{{websocket_url('./glib.cc.xterm')}}"
}
}

View File

@ -0,0 +1,5 @@
{
"host":"glib.cc",
"username":"ceni",
"port":10022
}

View File

@ -13,9 +13,9 @@ https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js
const opts =
{
"widget": {
"widgettype":"Wterm",
"widgettype":"urlwidget",
"options":{
"ws_url":"ws://localhost/test/dev.xterm"
"url":"{{entire_url('wterm.ui')}}"
}
}
}

View File

@ -0,0 +1,6 @@
{
"widgettype":"Wterm",
"options":{
"ws_url":"{{websocket_url('./kymoz.com.xterm')}}"
}
}

View File

@ -0,0 +1,4 @@
{
"host":"kymoz.com",
"username":"ymq"
}

88
xterm/wterm.ui 100644
View File

@ -0,0 +1,88 @@
{
"widgettype":"TabPanel",
"options":{
"tab_wide":"auto",
"height":"100%",
"tab_long":"70%",
"tab_pos":"top",
"items":[
{
"name":"kymoz.com",
"label":"kymoz.com",
"icon":null,
"content":{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"open terminal to kymoz.com"
}
},
{
"widgettype":"Button",
"options":{
"text":"Open"
},
"binds":[
{
"wid":"self",
"event":"click",
"actiontype":"urlwidget",
"options":{
"url":"{{
}
]
}
},
{
"name":"glib.cc",
"removable":true,
"label":"glib.cc",
"icon":null,
"content":{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"open terminal to glib.cc"
}
},
{
"widgettype":"Button",
"options":{
"text":"Open"
}
}
]
}
},
{
"name":"www.kaiyuancloud.cn",
"label":"www.kaiyuancloud.cn",
"icon":null,
"content":{
"widgettype":"VBox",
"options":{},
"subwidgets":[
{
"widgettype":"Text",
"options":{
"text":"open terminal to www.kaiyuancloud.cn"
}
},
{
"widgettype":"Button",
"options":{
"otext":"Open"
}
}
]
}
}
]
}
}