节点外观
节点外观可以定制的三个方面；图标、背景颜色和标签。
图标
节点的图标由其定义中的 icon 属性指定。
该属性的值可以是字符串或函数。
如果值是字符串，则使用该字符串作为图标。
如果值是函数，则在节点首次加载或经过编辑后进行评估。函数应返回用于作为图标的值。
该函数将在工作区中的节点以及调色板中的节点条目上被调用。在后者的情况下，this 不会引用特定的节点实例，函数 必须 返回有效值。
...
icon: "file.svg",
...图标可以是：
- Node-RED 提供的标准图标名称，
- 模块提供的自定义图标名称，
- Font Awesome 4.7 图标
标准图标
alert.svg
arrow-in.svg
bridge-dash.svg
bridge.svg
db.svg
debug.svg
envelope.svg
feed.svg
file.svg
function.svg
hash.svg
inject.svg
light.svg
serial.svg
template.svg
white-globe.svg
注意：在 Node-RED 1.0 中，所有这些图标都已被 SVG 替代，以改善外观。为确保向后兼容，编辑器将自动将对 png 版本的任何请求替换为 SVG 版本（如果可用）。
自定义图标
节点可以在与其 .js 和 .html 文件同级的 icons目录中提供自己的图标。这些目录在编辑器查找给定图标文件名时会被添加到搜索路径中。因此，图标文件名必须是唯一的。
图标应为白色背景透明，宽高比为 2:3，最小尺寸为 40 x 60。
Font Awesome 图标
Node-RED 包含完整的 Font Awesome 4.7 图标 集。
要指定 FA 图标，属性应采取以下形式：
...
icon: "font-awesome/fa-automobile",
...用户自定义图标
用户可以在节点的编辑对话框的“外观”选项卡中自定义单个节点图标。
注意：如果节点的 defaults 对象中有 icon 属性，则无法自定义其图标。例如，node-red-dashboard 的 ui_button 节点。
背景颜色
节点的背景颜色是迅速区分不同节点类型的主要方式之一。它由节点定义中的 color 属性指定。
...
color: "#a6bbcf",
...我们使用了柔和的颜色调色板。新节点应尝试找到与该调色板相适应的颜色。
以下是一些常用颜色：
- #3FADB5
- #87A980
- #A6BBCF
- #AAAA66
- #C0C0C0
- #C0DEED
- #C7E9C0
- #D7D7A0
- #D8BFD8
- #DAC4B4
- #DEB887
- #DEBD5C
- #E2D96E
- #E6E0F8
- #E7E7AE
- #E9967A
- #F3B567
- #FDD0A2
- #FDF0C2
- #FFAAAA
- #FFCC66
- #FFF0F0
- #FFFFFF
标签
节点有四个标签属性；label、paletteLabel、outputLabel 和 inputLabel。
节点标签
工作区中节点的 label 可以是静态文本，或者根据节点的属性动态设置。
该属性的值可以是字符串或函数。
如果值是字符串，则使用该字符串作为标签。
如果值是函数，则在节点首次加载或经过编辑后进行评估。函数应返回作为标签的值。
如前面部分提到的，节点有约定的 name 属性来帮助区分。以下示例显示了如何将 label 设置为获取该属性的值，或默认为某些合理的值。
...
label: function() {
return this.name||"lower-case";
},
...请注意，无法在标签函数中使用 credential 属性。
调色板标签
默认情况下，节点的类型用于其在调色板中的标签。可以使用 paletteLabel 属性来重写此标签。
与 label 类似，此属性可以是字符串或函数。如果它是函数，则在节点添加到调色板时评估一次。
标签样式
标签的 CSS 样式也可以动态设置，使用 labelStyle 属性。目前，此属性必须标识要应用的 CSS 类。如果未指定，则将使用默认的 node_label 类。唯一的其他预定义类是 node_label_italic。
以下示例显示如何将 labelStyle 设置为 node_label_italic，如果设置了 name 属性：
...
labelStyle: function() {
return this.name?"node_label_italic":"";
},
...对齐
默认情况下，图标和标签在节点中左对齐。对于位于流程末端的节点，约定是将内容右对齐。这可以通过在节点定义中将 align 属性设置为 right 来实现：
...
align: 'right',
...
端口标签
节点可以在其输入和输出端口上提供标签，可以通过将鼠标悬停在端口上查看。
这些标签可以通过节点的 HTML 文件静态设置
...
inputLabels: "输入参数",
outputLabels: ["stdout","stderr","rc"],
...或通过函数生成，传递一个索引以指示输出针脚（从 0 开始）。
...
outputLabels: function(index) {
return "我的端口编号 "+index;
}
...在这两种情况下，用户都可以通过配置编辑器的 节点设置 部分进行覆盖。
注意：标签不会动态生成，不能通过 msg 属性设置。
按钮
节点可以在其左侧或右侧边缘上有一个按钮，如核心 Inject 和 Debug 节点所示。
一个关键原则是编辑器不是用来控制流程的仪表板。因此，通常情况下，节点上不应有按钮。Inject 和 Debug 节点是特例，因为按钮在流程开发中发挥作用。
其定义中的 button 属性用于描述按钮的行为。它必须至少提供一个 onclick 函数，该函数将在按钮被点击时调用。
...
button: {
onclick: function() {
// 按钮被点击时调用
}
},
...该属性还可以定义一个 enabled 函数，以根据节点的当前配置动态启用和禁用按钮。同样，它可以定义一个 visible 函数来确定按钮是否应该被显示。
...
button: {
enabled: function() {
// 根据节点的当前配置返回按钮是否启用
return !this.changed
},
visible: function() {
// 根据节点的当前配置返回按钮是否可见
return this.hasButton
},
onclick: function() { }
},
...button 还可以配置为切换按钮 - 如在 Debug 节点中所见。通过添加一个名为 toggle 的属性来实现，该属性标识节点的 defaults 对象中的属性，用于存储每次按下按钮时变更的布尔值。
...
defaults: {
...
buttonState: {value: true}
...
},
button: {
toggle: "buttonState",
onclick: function() { }
}
...