节点外观
节点的外观有三个方面可以自定义：图标、背景颜色及其标签。
图标
节点的图标通过其定义中的 icon 属性来指定。
该属性的值可以是一个字符串或一个函数。
如果值是一个字符串，那么它将被用作图标。
如果值是一个函数，它将在节点首次加载或编辑后被求值。该函数应返回用作图标的值。
该函数既会为工作区中的节点调用（其中 this 引用一个节点实例），也会为节点在面板中的条目调用。在后一种情况下，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 替代品，以获得更好的外观。为了确保向后兼容性，如果 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";
},
...请注意，不能在标签函数中使用凭证属性。
面板标签
默认情况下，节点的类型被用作其在面板中的标签。可以使用 paletteLabel 属性来覆盖它。
与 label 一样，此属性可以是一个字符串或一个函数。如果它是一个函数，它在节点被添加到面板时求值一次。
标签样式
标签的 CSS 样式也可以使用 labelStyle 属性动态设置。目前，此属性必须标识要应用的 CSS 类。如果未指定，它将使用默认的 node_label 类。唯一另一个预定义的类是 node_label_italic。
以下示例展示了如果设置了 name 属性，如何将 labelStyle 设置为 node_label_italic
...
labelStyle: function() {
return this.name?"node_label_italic":"";
},
...对齐方式
默认情况下，图标和标签在节点中是左对齐的。对于位于流程末端的节点，约定是右对齐内容。这可以通过在节点定义中将 align 属性设置为 right 来实现。
...
align: 'right',
...
端口标签
节点可以在其输入和输出端口上提供标签，将鼠标悬停在端口上即可看到。
这些标签可以通过节点的 html 文件静态设置：
...
inputLabels: "parameter for input",
outputLabels: ["stdout","stderr","rc"],
...或由一个函数生成，该函数被传递一个索引来指示输出引脚（从 0 开始）。
...
outputLabels: function(index) {
return "my port number "+index;
}
...在这两种情况下，用户都可以使用配置编辑器的 节点设置 部分来覆盖它们。
注意：标签不是动态生成的，也不能由 msg 属性设置。
按钮
节点可以在其左侧或右侧边缘有一个按钮，就像核心的 Inject 和 Debug 节点一样。
一个关键原则是，编辑器不是用于控制流程的仪表板。因此，通常情况下，节点不应该有按钮。Inject 和 Debug 节点是特殊情况，因为它们的按钮在流程开发中扮演着重要角色。
其定义中的 button 属性用于描述按钮的行为。它必须至少提供一个 onclick 函数，该函数在按钮被点击时调用。
...
button: {
onclick: function() {
// Called when the button is clicked
}
},
...该属性还可以定义一个 enabled 函数，以根据节点的当前配置动态启用和禁用按钮。类似地，它可以定义一个 visible 函数来决定是否显示按钮。
...
button: {
enabled: function() {
// return whether or not the button is enabled, based on the current
// configuration of the node
return !this.changed
},
visible: function() {
// return whether or not the button is visible, based on the current
// configuration of the node
return this.hasButton
},
onclick: function() { }
},
...该 button 也可以配置为切换按钮——就像 Debug 节点一样。这可以通过添加一个名为 toggle 的属性来实现，该属性标识节点 defaults 对象中的一个属性，该属性应用于存储一个布尔值，每次按下按钮时该值都会被切换。
...
defaults: {
...
buttonState: {value: true}
...
},
button: {
toggle: "buttonState",
onclick: function() { }
}
...