Controls

Geçiş

Geçiş, iki durumu olan bir düğmedir. Kullanıcı düğmeye tıkladığında durum değişir. Geçiş örnekleri aşağıdaki şekillerde bulunabilir.

CS3

Bağlama türü: BOOLEAN
Bir kullanıcı butona tıkladığında, PLC'ye bağlantı kanalı üzerinden yeni bir durum ayarlanır.

SVG Öğesi

'id = "labelOff"'

  • Bağlı değişkenin değeri false olduğunda görünür olması gereken bir öğenin (tercihen bir grup) "LabelOff" kimliğine sahip olması gerekir.

'id = "labelOn"'

  • Tersine, değer doğru olduğunda görünür olması gereken öğenin "labelOn" kimliğine sahip olması gerekir.

CSS Stil Örnekleri

Renk paletlerini (örneğin, Açık / Koyu modlar) uygulamak ve 'id="labelOn" ve id="labelOff" ile bir SVG öğesini kontrol etmek için '.css' nasıl kullanılacağını gösterir.

Aşağıdaki satır için PlcVisu CSS Düzenleyicisine eklerseniz:

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

Bu SVG dosyasını, örneğin 'id "#labelOn"' üzerinden renk ayarlayarak kontrol edebilirsiniz.
Ve bunu ışık moduyla ilgili olarak yapabilirsiniz -->Metin kırmızı


veya karanlık mod -->Metin mavi

Çözüm

Switcher'in SVG çizimi, herhangi bir grafik içerebilir. Prensip, bağlı değişkenin değeri false ise "labelOff" grubu altında iç içe geçmiş öğelerin görüntülenmesi ve değer true ise "labelOn" grubu altındaki öğelerin görüntülenmesidir.

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