89 lines
2.4 KiB
Markdown
89 lines
2.4 KiB
Markdown
# Toolbar
|
|
|
|
## 用法
|
|
|
|
```html
|
|
<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属性的值**
|
|
|