yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
main
bricks/docs/toolbarNew.md
yumoqing 86f6872006 bugfix
2023-12-18 18:15:22 +08:00

2.4 KiB
Raw Permalink Blame History

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属性的值