Schaltfläche ui-button

Demo Ausprobieren

Fügt Ihrem Dashboard eine anklickbare Schaltfläche hinzu.

Eigenschaften

Prop	Dynamic	Description
Gruppe		Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird.
Größe		Steuert die Breite der Schaltfläche in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe.
Symbol	✓	Rendert ein Material Design-Symbol innerhalb der Schaltfläche. Es ist nicht erforderlich, das "mdi-" Präfix einzuschließen.
Symbolposition	✓	Wenn "Symbol" definiert ist, steuert diese Eigenschaft, auf welcher Seite des "Labels" das Symbol gerendert wird.
Label	✓	Der Text, der innerhalb der Schaltfläche angezeigt wird. Wenn nicht angegeben, wird die Schaltfläche nur das Symbol rendern.
Schaltflächenfarbe	✓	Schaltflächenfarbe. Wenn nicht angegeben, wird die Standard-Themenfarbe verwendet.
Textfarbe	✓	Text (Label) Farbe. Wenn nicht angegeben, wird automatisch basierend auf der Schaltflächenfarbe Schwarz oder Weiß berechnet.
Symbolfarbe	✓	Symbolfarbe. Wenn nicht angegeben, hat es die gleiche Farbe wie Text / Label.
Zeigerhoch-Ereignis aktivieren		Ermöglicht das Erfassen von Zeigerhoch-Ereignissen auf der Schaltfläche. Die Ausgabe enthält msg._event, das den Typ der Interaktion beschreibt, die das Ereignis verursacht.
Zeigerniedrig-Ereignis aktivieren		Ermöglicht das Erfassen von Zeigerniedrig-Ereignissen auf der Schaltfläche. Die Ausgabe enthält msg._event, das den Typ der Interaktion beschreibt, die das Ereignis verursacht.
Klick-Ereignis aktivieren		Ermöglicht das Erfassen von Klick-Ereignissen auf der Schaltfläche, d.h. wenn sowohl das Zeigerniedrig- als auch das Zeigerhoch-Ereignis auftreten, während die Maus innerhalb der Schaltfläche bleibt. Die Ausgabe enthält msg._event, das den Typ der Interaktion beschreibt, die das Ereignis verursacht.
Schaltflächenklick emulieren		Wenn aktiviert, löst jede empfangene Nachricht einen Schaltflächenklick aus und gibt die entsprechende Nutzlast und das Thema aus.

Dynamische Eigenschaften

Dynamic properties are those that can be overriden at runtime by sending a particular msg to the node.

Where appropriate, the underlying values set within Node-RED will be overriden by the values set in the received messages.

Prop	Payload	Structures	Example Values
Symbol	msg.ui_update.icon	String
Symbolposition	msg.ui_update.iconPosition	String
Label	msg.ui_update.label	String
Schaltflächenfarbe	msg.ui_update.buttonColor	String
Textfarbe	msg.ui_update.textColor	String
Symbolfarbe	msg.ui_update.iconColor	String
Klasse	msg.ui_update.class	String

Steuerungen

msg.	Example	Description
aktiviert	true | false	Ermöglicht die Steuerung, ob die Schaltfläche anklickbar ist oder nicht.

Beispiel

Einfache Schaltfläche

Beispiel einer gerenderten Schaltfläche in einem Dashboard.

Haltezeit messen

Es ist möglich, eine Schaltfläche so zu konfigurieren, dass sie Zeigerniedrig- und Zeigerhoch-Ereignisse ausgibt. Damit ist es möglich zu messen, wie lange eine Schaltfläche gedrückt gehalten wird.

Der Flow, um diese Demo zu erreichen, ist wie folgt: