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