雖然說 Node-RED 的 Dashboard 內建介面所提供的 tab 切換功能很方便，左上角點開「≡」就可以選擇要切換的 tab，但若可以做一個首頁，上頭佈滿要連結的 tab 按鈕，一定會非常方便！因此這次要運用 Dashboard 內建的節點 button 和 ui control 來切換 tab！

▲ 先拉兩個 button 與一個 ui control，請接在一起，然後編輯節點，重點在這！button 的 Label 與 Payload 都改成其中一個 tab 的名稱，這樣就代表這個按鈕點下去會到那個 tab，很容易理解吧！另外 ui control 基本上用預設的選項即可。最後請記得在 Dashboard 新增好相關的 tab、group，以製作出首頁。

▲ 大致上 Dashboard 首頁最後會長這樣，點擊按鈕就可以連到指定 tab。

flow.json

僅供參考。

[
    {
        "id": "b80494bdcb98cbee",
        "type": "ui_button",
        "z": "0d05fa1bc18157f3",
        "name": "",
        "group": "80c78d71fd175fbf",
        "order": 1,
        "width": "4",
        "height": "4",
        "passthru": false,
        "label": "測試",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "測試",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 60,
        "wires": [
            [
                "bd19f4282b1404ac"
            ]
        ]
    },
    {
        "id": "bd19f4282b1404ac",
        "type": "ui_ui_control",
        "z": "0d05fa1bc18157f3",
        "name": "",
        "events": "all",
        "x": 240,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "0668f0062590e2ed",
        "type": "ui_button",
        "z": "0d05fa1bc18157f3",
        "name": "",
        "group": "80c78d71fd175fbf",
        "order": 2,
        "width": "4",
        "height": "4",
        "passthru": false,
        "label": "測試2",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "測試2",
        "payloadType": "str",
        "topic": "topic",
        "topicType": "msg",
        "x": 90,
        "y": 100,
        "wires": [
            [
                "bd19f4282b1404ac"
            ]
        ]
    },
    {
        "id": "80c78d71fd175fbf",
        "type": "ui_group",
        "name": "Group 1",
        "tab": "fc4acb4da1369f93",
        "order": 1,
        "disp": false,
        "width": "24",
        "collapse": false,
        "className": ""
    },
    {
        "id": "fc4acb4da1369f93",
        "type": "ui_tab",
        "name": "首頁",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

PHP 取得使用者 IP 並運用 Session 建立登入次數限制機制
📆 2019-06-30
📁 網站技術, 資訊安全, PHP

PHP：$_SERVER 擷取當下網址的片段
📆 2022-02-10
📁 網站技術, PHP

Bracket Pair Colorizer（Visual Studio Code 擴充功能）：匹配括弧顏色標記、括弧內線條強調
📆 2019-02-11
📁 軟體應用, 網站技術

MySQL：解決缺少表達式及 MySOL server has gone away 問題（教學基於 XAMPP）
📆 2022-10-08
📁 軟體應用, 網站技術, 伺服器, 資料庫

Master Styles Language Service（Visual Studio Code 擴充功能）：Master 框架的語法突顯及完成提示
📆 2022-05-02
📁 軟體應用, 網站技術, HTML, CSS

【技巧】設計網站的'左上角'原則
📆 2013-01-01
📁 網站技術

CSS:反白特效
📆 2013-01-01
📁 網站技術, CSS

自動隱藏且可直接使用的網頁回頂部按鈕
📆 2021-11-30
📁 網站技術, HTML, CSS, JavaScript, jQuery

《上一篇》米家自動感應洗手機+小衛質品泡沫抗菌洗手液(三瓶裝) 《下一篇》DURACELL 金頂鹼性電池3號 AA (4入裝)