2.3 KiB
2.3 KiB
MiniForm
用法
写法一:
<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:
{
"widgettype":"MiniForm",
"options":{
"label_width":"100px",
"fields":[
{
"name":"test1",
"label":"姓名",
"uitype":"str"
},
{
"name":"test2",
"label":"性别",
"uitype":"str"
},
{
"name":"test3",
"label":"地址",
"uitype":"str"
}
]
}
}
写法二:
<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(字符串) | --- |