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

2.4 KiB

Toolbar

用法

<html>

<head>
	<link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
</head>

<body>
	<script src="http://kimird.com/bricks/bricks.js"></script>

	<script>
		const opts =
		{
			"widget": {
				"widgettype": "Toolbar",
				"options": {
					"target": null,
					"orientation": "horizontal",
					"tool_margin": "15px",
					"tools": [
						{
							"name": "c",
							"Label": "C",
							"icon": null
						},
						{
							"name": "javascript",
							"Label": "JavaScript",
							"icon": null
						},
						{
							"name": "php",
							"Label": "PHP",
							"icon": null
						},
						{
							"name": "python",
							"Label": "Python",
							"icon": null
						},
					]
				}
			}
		}

			;
		const app = new BricksApp(opts);
		app.run();
	</script>
</body>

</html>

效果图

widget参数说明

参数 参数说明 类型 是否必填 可选值 默认值
widgettype 控件类型 String Toolbar ---
options 控件的配置项 Object --- ---

widget.options参数说明

参数 参数说明 类型 是否必填 可选值 默认值
target 参数返回值 String --- ---
orientation 控件的方向 Object horizontal/vertical ---
tool_margin 控件子项间的距离 String --- ---
tools 控件子项的具体信息 Array --- ---

tools参数说明

参数 参数说明 类型 是否必填 可选值 默认值
name 原生属性 String Toolbar ---
Label 标签文本 String --- ---
icon 图标 String --- ---

icon可以指向一个相对路径或者绝对路径的图标,若引入图标,则会显示在tools的前面.若没有label属性,则显示的文本是name属性的值