Controls

切換

切換是具有兩種狀態的按鈕。當使用者按一下按鈕時，狀態會變更。切換的範例如下圖所示。

CS3

繫結類型：布林值
當使用者點擊按鈕時，會透過連接到 PLC 的連接通道設定新狀態。

SVG 元素

'id = “標籤關閉”'

• 當繫結變數的值為 false 時，應該可見的元素 （最好是群組） 必須具有 ID 「LabelOff」。

'id = “labelOn”'

• 相反地，當值為 true 時，應該可見的元素必須具有 ID 「labelOn」。

CSS 樣式範例

它示範如何使用 '.css' 來實作調色板（例如，淺色/深色模式）並使用 'id=“labelOn” 和 id=“labelOff” 控制 SVG 元素。

如果您將下列行新增至 PlcVisu CSS 編輯器：

.theme-light #labelOn{
        fill: red;
}
.theme-light #labelOff{
        fill: black;
}
.theme-dark #labelOn{
        fill: blue;
}
.theme-dark #labelOff{
        fill: white;
}

您可以控制此 SVG 文件，例如透過設定顏色的「id “#labelOn”」。
你可以這樣關於淺色模式 -->文字是紅色的

或深色模式 -->文字為藍色

結論

切換器的 SVG 繪圖可以包含任何圖形。原理是，如果綁定變數的值為false，則顯示嵌套在群組「labelOff」下的元素，如果值為true，則顯示群組「labelOn」下的元素。