Here is the Editor JS code:
Here are my Obsidian notes on RED.tabs:
RED.tabs
- https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/3
- https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/10-function.html#L358
- https://github.com/bartbutenaers/node-red-contrib-blockly/blob/master/blockly.html#L624
- https://github1s.com/node-red/node-red/blob/HEAD/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js
this.tabs = RED.tabs.create({
id: "node-svg-tabs",
scrollable: true,
collapsible: true,
onchange: function(tab) { }
})
this.tabs.addTab({
id: "node-svg-tab-source",
label: "SVG source"
})
this.tabs.removeTab("node-svg-tab-editor")
this.tabs.order(["node-svg-tab-source", "node-svg-tab-editor", "node-svg-tab-animations"])
const tabs = RED.tabs.create({
id: 'el-tabs',
// scrollable: true,
// collapsible: true,
onchange: function (tab) {
$('#el-tabs-content').children().hide()
$('#' + tab.id).show()
}
})
tabs.addTab({
id: 'el-tab-main',
label: 'Main'
})
tabs.addTab({
id: 'el-tab-conf',
label: 'Element Config'
})
<div class="form-row func-tabs-row">
<ul style="min-width: 450px; margin-bottom: 20px;" id="el-tabs"></ul>
</div>
<div id="el-tabs-content">
<div id="el-tab-main" style="display:none">
<!-- ... -->
</div>
<!-- ... -->
</div>
the Function node, or the MQTT Broker config nodes. They both contain tabbed sections and will show how it is done. node-red/packages/node_modules/@node-red/nodes/core/network/10-mqtt.html at b3ce0c007907b93aeb52e13631597ff258719254 · node-red/node-red · GitHub
