bricks/docs/button.md
2023-12-18 18:15:22 +08:00

119 lines
3.6 KiB
Markdown

# 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 | 是 | --- | --- |