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