Node-RED系列（十）：Node-RED面板dashboard节点的配置

Node-RED系列文章目前已经写了9篇，介绍了Node-RED的安装以及默认安装的一些基本节点的使用，作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章

物联网平台Node-RED系列（一）：Node-RED的介绍与安装

物联网平台Node-RED系列（二）：Node-RED的面板的操作

物联网平台Node-RED系列（三）：Node-RED公共节点的使用

物联网平台Node-RED系列（四）：Node-RED函数节点的使用

物联网平台Node-RED系列（五）：Node-RED序列节点的使用

物联网平台Node-RED系列（六）：Node-RED解析节点的使用

物联网平台Node-RED系列（七）：Node-RED存储节点的使用

物联网平台Node-RED系列（八）：Node-RED网络节点的使用

物联网平台Node-RED系列（九）：Node-RED面板dashboard节点的使用

上一期我给大家介绍了dashboard的安装以及一个按钮的配置，这一期我们来更加系统地学习一下dashboard的节点配置。

上一期我们已经知道 dashboard的库一共有16个节点，分别是

button 按钮节点 dropdown 下拉选择节点 switch 开关节点 slider 轮播图 numeric 数字滑块 text input 文本输入 date picker 日期选择 colour picker 颜色选择器 form 表单 text 文本显示 gauge 仪表板 chart 图表，折线图 audio out 音频输出 notification 通知 ui control ui控制 template 模板

本篇文章我就给大家多讲解几个节点的使用与配置。

首先我们要了解dashboard这个库, 库的介绍，https://flows.nodered.org/node/node-red-dashboard 库的github源码 https://github.com/node-red/node-red-dashboard 目前899个star，还是挺不错的。 dashboard的布局可以看做是一个网格布局，每一个group（组），都有一个默认的宽度，6个单位（每个单位48px，并且6px的间隔） 每一个部件都必须存在于一个group中，这里的部件其实就是指一个UI元素，像按钮，输入框，选择框，数字滑块。每一个部件的宽度默认是auto.这意味着它将布满整个group，并且会自适应单位。

给定一个宽度为6的组，如果你添加六个小部件，每个小部件的宽度为2，则它们将分两行布置-每行三个小部件。

如果你添加两组宽度6，只要你的浏览器窗口足够宽，它们就会并排放置。如果缩小浏览器，则某一列中的第二组有时会移到第一组之下。

建议尽可能使用多个组，而不是一个大组，以便页面可以在较小的屏幕上动态调整大小。

在布局中，最大的布局单位是tab，以下是group，然后是部件 widget 你可以在右上角点击 一个柱形图的图表来查看dashboard的操作面板

site配置

主题色配置

可以对主题进行自定义

Style选中Custom，就可以选择自定义的颜色。

关于图标，dashboard内置了四套图标。 分别是

Angular Material icons : angular图标 如send Font Awesome 4.7 : 字体图标 如fa-fire fa-2x Weather Icons Lite : 天气图标 如wi-wu-sunny Material Design Iconfont ; Material设计图标 如mi-alarm_on

如图配置了所有的UI组件到流中， UI组件只要不涉及到数据的流转，那就可以不用连线，依然可以显示到页面上。 上面的流配置 显示的页面是这样子的

由于group的默认是6个单位，所以会有点小。我们可以点击这里进行调整宽度

调整后的效果图

没有那么小了，会稍微好看很多。

最后在给大家看一下dashboard支持的图标库吧。

angular-material-icons

Font Awesome 4.7

Weather Icons Lite

Material Design Iconfont