bugfix
BIN
docs/.DS_Store
vendored
0
docs/BoxLayout.md
Executable file → Normal file
43
docs/HBox.md
Executable file → Normal file
@ -1,11 +1,36 @@
|
|||||||
# HBox
|
# HBox
|
||||||
Hbox is a horizontal layout widget, it layout subwidgeta in horizontal direction
|
Hbox是一个水平布局小部件,它按水平方向布局子小部件
|
||||||
## use case
|
## 用法
|
||||||
## inheritance
|
```html
|
||||||
HBox inherited fromm BoxLayout
|
<html>
|
||||||
## options
|
|
||||||
|
<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
Executable file → Normal file
94
docs/accordion.md
Normal 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
Normal 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
Normal 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 | 是 | 百分比 | --- |
|
||||||
|
|
||||||
|
|
||||||
|
|
16
docs/brick文件目录.md
Normal 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
Normal 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
Normal 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 | 是 | --- | --- |
|
50
docs/editabletree.md
Normal 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
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
# error
|
||||||
|
|
||||||
|
# 用法
|
||||||
|
|
||||||
|
```html
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
377
docs/form.md
Normal 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
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
# Hfiller
|
||||||
|
|
||||||
|
此控件为容器横向排列时,若宽度过宽,自动填充
|
||||||
|
|
||||||
|
## option参数说明
|
||||||
|
|
||||||
|
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||||
|
| ------- | -------- | ------ | -------- | ------ | ------ |
|
||||||
|
| baseURI | 数据路径 | String | 是 | --- | --- |
|
||||||
|
| tooltip | 提示 | String | 是 | --- | --- |
|
||||||
|
| css | 样式 | String | 否 | --- | --- |
|
||||||
|
| csses | 样式 | String | 否 | --- | --- |
|
||||||
|
|
||||||
|
此控件为样式排列控件
|
55
docs/icon.md
Normal 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%'**
|
32
docs/image.md
Executable file → Normal file
@ -1,13 +1,15 @@
|
|||||||
# Image
|
# Image
|
||||||
Image widget show image
|
Image widget show image
|
||||||
## use case
|
# 用法
|
||||||
```
|
```html
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="../css/bricks.css">
|
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<script src="../bricks.js"></script>
|
<script src="/bricks/bricks.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const opts =
|
const opts =
|
||||||
@ -15,7 +17,7 @@ Image widget show image
|
|||||||
"widget": {
|
"widget": {
|
||||||
"widgettype": "Image",
|
"widgettype": "Image",
|
||||||
"options": {
|
"options": {
|
||||||
"source":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
|
"url": "https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
|
||||||
"height": "100%",
|
"height": "100%",
|
||||||
"width": "100%"
|
"width": "100%"
|
||||||
}
|
}
|
||||||
@ -28,10 +30,11 @@ Image widget show image
|
|||||||
app.run();
|
app.run();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
the result is <br>
|
the result is <br>
|
||||||
![image](image.png)
|
![image](F:\mh\bricks\docs\images\image.png)
|
||||||
|
|
||||||
## inheritance
|
## inheritance
|
||||||
Image inherited from JsWidget
|
Image inherited from JsWidget
|
||||||
@ -39,19 +42,14 @@ Image inherited from JsWidget
|
|||||||
## options
|
## options
|
||||||
```
|
```
|
||||||
{
|
{
|
||||||
"source":
|
"url":
|
||||||
"width":
|
"width":
|
||||||
"height":
|
"height":
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
### source
|
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||||
source is url to the image
|
| ------ | -------- | ------ | -------- | ---------- | ------ |
|
||||||
### width
|
| url | 照片路径 | String | 是 | --- | --- |
|
||||||
optional, default is 100%, specified the image's width
|
| width | 宽度 | String | 是 | 百分比数值 | --- |
|
||||||
### height
|
| height | 高度 | String | 是 | 百分比数值 | --- |
|
||||||
optional, default is 100%, specified the image's height
|
|
||||||
|
|
||||||
## method
|
|
||||||
none
|
|
||||||
## event
|
|
||||||
none
|
|
||||||
|
0
docs/image.png
Executable file → Normal file
Before Width: | Height: | Size: 974 KiB After Width: | Height: | Size: 974 KiB |
BIN
docs/images/accordion.png
Normal file
After Width: | Height: | Size: 5.8 KiB |
BIN
docs/images/audio.png
Normal file
After Width: | Height: | Size: 5.7 KiB |
BIN
docs/images/button.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
docs/images/docs.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
docs/images/editabletree.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
docs/images/form.png
Normal file
After Width: | Height: | Size: 35 KiB |
BIN
docs/images/icon.png
Normal file
After Width: | Height: | Size: 2.5 KiB |
BIN
docs/images/image.png
Normal file
After Width: | Height: | Size: 974 KiB |
BIN
docs/images/input.png
Normal file
After Width: | Height: | Size: 2.1 KiB |
BIN
docs/images/message.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
docs/images/miniform.png
Normal file
After Width: | Height: | Size: 5.8 KiB |
BIN
docs/images/modal.png
Normal file
After Width: | Height: | Size: 7.1 KiB |
BIN
docs/images/tab.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
docs/images/text.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
docs/images/title.png
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
docs/images/toolbar.png
Normal file
After Width: | Height: | Size: 6.7 KiB |
BIN
docs/images/tree.png
Normal file
After Width: | Height: | Size: 16 KiB |
BIN
docs/images/video.png
Normal file
After Width: | Height: | Size: 1.5 MiB |
@ -1 +0,0 @@
|
|||||||
README.md
|
|
1
docs/index.md
Normal file
@ -0,0 +1 @@
|
|||||||
|
README.md
|
79
docs/input.md
Normal 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
Executable file → Normal file
61
docs/markdownviewer.md
Executable file → Normal file
@ -1,13 +1,58 @@
|
|||||||
# MarkdownView
|
# MarkdownView
|
||||||
|
|
||||||
## Options attributes
|
**此控件可以完成一个指向md文件的操作**
|
||||||
MarkdownViewer has following attributes:
|
|
||||||
### md_url
|
|
||||||
md_url is a url address in which it is a markdown text file.
|
|
||||||
|
|
||||||
## 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
|
```html
|
||||||
none
|
<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
Normal 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
Normal 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
Normal 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
Executable file → Normal file
113
docs/tab.md
Normal 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
Executable file → Normal file
@ -1,7 +1,153 @@
|
|||||||
# Text
|
# Text
|
||||||
|
|
||||||
Text is a widget to show text
|
Text is a widget to show text
|
||||||
## use case
|
## 用法
|
||||||
## inheritance
|
|
||||||
## options
|
```html
|
||||||
## method
|
|
||||||
## event
|
<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
Normal 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
Normal 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
Normal 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
Normal 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
Normal 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
Normal 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
Executable file → Normal file
0
docs/toolbar.png
Executable file → Normal file
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
88
docs/toolbarNew.md
Normal 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
Normal 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
Executable file → Normal file
14
docs/vfiller.md
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
# Vfiller
|
||||||
|
|
||||||
|
此控件为容器纵向排列时,若宽度过宽,自动填充
|
||||||
|
|
||||||
|
## option参数说明
|
||||||
|
|
||||||
|
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||||||
|
| ------- | -------- | ------ | -------- | ------ | ------ |
|
||||||
|
| baseURI | 数据路径 | String | 是 | --- | --- |
|
||||||
|
| tooltip | 提示 | String | 是 | --- | --- |
|
||||||
|
| css | 样式 | String | 否 | --- | --- |
|
||||||
|
| csses | 样式 | String | 否 | --- | --- |
|
||||||
|
|
||||||
|
此控件为样式排列控件
|
52
docs/video.md
Normal 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
Executable file → Normal file
@ -1,49 +1,52 @@
|
|||||||
# Bricks widgets
|
# Bricks widgets
|
||||||
## Accordion
|
## Accordion (完成)
|
||||||
## AudioPlayer
|
## AudioPlayer (完成)
|
||||||
## BlankIcon
|
## BlankIcon (完成)
|
||||||
## BoxLayout
|
## BoxLayout
|
||||||
[boxlayout](BoxLayout.md)
|
[boxlayout](BoxLayout.md)
|
||||||
## Button
|
|
||||||
## DataGrid
|
## Button (完成)
|
||||||
## EditableTree
|
## DataGrid (完成)
|
||||||
|
## EditableTree (完成)
|
||||||
## Error
|
## Error
|
||||||
## Form
|
## Form (完成)
|
||||||
## HBox
|
## HBox (完成)
|
||||||
[hbox](HBox.md)
|
[hbox](HBox.md)
|
||||||
|
|
||||||
## HFiller
|
## HFiller (完成)
|
||||||
## HScrollPanel
|
## HScrollPanel
|
||||||
## Icon
|
## Icon (完成)
|
||||||
## Image
|
## Image (完成)
|
||||||
[image](image.md)
|
[image](image.md)
|
||||||
## MarkdownViewer
|
|
||||||
|
## MarkdownViewer (完成)
|
||||||
(markdown viewer](markdownviewer.md)
|
(markdown viewer](markdownviewer.md)
|
||||||
## Menu
|
## Menu
|
||||||
## Message
|
## Message (完成)
|
||||||
## MiniForm
|
## MiniForm (完成)
|
||||||
## Modal
|
## Modal (完成)
|
||||||
## ModalForm
|
## ModalForm
|
||||||
## MultipleStateImage
|
## MultipleStateImage
|
||||||
## PopupForm
|
## PopupForm
|
||||||
## TabForm
|
## TabForm
|
||||||
## TabPanel
|
## TabPanel (完成)
|
||||||
## Text
|
## Text (完成)
|
||||||
[text](text.md)
|
[text](text.md)
|
||||||
## Title1
|
## Title1 (完成)
|
||||||
## Title2
|
## Title2 (完成)
|
||||||
## Title3
|
## Title3 (完成)
|
||||||
## Title4
|
## Title4 (完成)
|
||||||
## Title5
|
## Title5 (完成)
|
||||||
## Title6
|
## Title6 (完成)
|
||||||
## Toolbar
|
## Toolbar (完成)
|
||||||
[Toolbar](toolbar.md)
|
[Toolbar](toolbar.md)
|
||||||
## Tree
|
## Tree (完成)
|
||||||
## VBox
|
## VBox (完成)
|
||||||
[VBox](vbox.md)
|
[VBox](vbox.md)
|
||||||
## VFiller
|
|
||||||
|
## VFiller (完成)
|
||||||
## VScrollPanel
|
## VScrollPanel
|
||||||
## Video
|
## Video (完成)
|
||||||
## VideoPlayer
|
## VideoPlayer (与video一样)
|
||||||
[VideoPlayer](videoplayer.md)
|
[VideoPlayer](videoplayer.md)
|
||||||
## XTerminal
|
## XTerminal(没有js文件)
|
||||||
|
4
xterm/dev.xterm
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"host":"dev.kaiyuancloud.cn",
|
||||||
|
"username":"ymq"
|
||||||
|
}
|
6
xterm/glib.cc.ui
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"widgettype":"Wterm",
|
||||||
|
"options":{
|
||||||
|
"ws_url":"{{websocket_url('./glib.cc.xterm')}}"
|
||||||
|
}
|
||||||
|
}
|
5
xterm/glib.cc.xterm
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"host":"glib.cc",
|
||||||
|
"username":"ceni",
|
||||||
|
"port":10022
|
||||||
|
}
|
@ -13,9 +13,9 @@ https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js
|
|||||||
const opts =
|
const opts =
|
||||||
{
|
{
|
||||||
"widget": {
|
"widget": {
|
||||||
"widgettype":"Wterm",
|
"widgettype":"urlwidget",
|
||||||
"options":{
|
"options":{
|
||||||
"ws_url":"ws://localhost/test/dev.xterm"
|
"url":"{{entire_url('wterm.ui')}}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
6
xterm/kymoz.com.ui
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"widgettype":"Wterm",
|
||||||
|
"options":{
|
||||||
|
"ws_url":"{{websocket_url('./kymoz.com.xterm')}}"
|
||||||
|
}
|
||||||
|
}
|
4
xterm/kymoz.com.xterm
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
"host":"kymoz.com",
|
||||||
|
"username":"ymq"
|
||||||
|
}
|
88
xterm/wterm.ui
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|