bricks/docs/cn/widgets/button.md
2024-05-11 17:58:28 +08:00

3.6 KiB

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>

示例

本地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 --- ---