136 lines
2.3 KiB
Markdown
136 lines
2.3 KiB
Markdown
|
# 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>
|
||
|
|
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## 效果图
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## options参数说明
|
||
|
|
|
||
|
|
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||
|
|
| ----------- | ------------------ | ------ | -------- | ------ | ------ |
|
||
|
|
| label_width | 控件标签的宽度 | String | 是 | --- | --- |
|
||
|
|
| fields | 控件子项的详细信息 | Array | 是 | --- | --- |
|
||
|
|
|
||
|
|
#### options.fields参数说明
|
||
|
|
|
||
|
|
| 参数 | 参数说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|
||
|
|
| ------ | -------------- | ------ | -------- | ----------- | ------ |
|
||
|
|
| name | 控件的原生属性 | String | 是 | --- | --- |
|
||
|
|
| label | 文本标签 | String | 否 | --- | --- |
|
||
|
|
| uitype | 控件类型 | String | 否 | str(字符串) | --- |
|
||
|
|
|
||
|
|
|
||
|
|
|