button
用法
<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>
示例
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 |
是 |
--- |
--- |
