Dropdown ui-dropdown
Demo Ausprobieren Fügt Ihrem Dashboard ein Dropdown hinzu, das Werte in Node-RED unter msg.payload ausgibt, sobald sich sein Wert ändert.
Programmatische Auswahlen
Sie können dynamisch Auswahlen für dieses Dropdown treffen, indem Sie den jeweiligen Wert an msg.payload übergeben.
Einzelauswahl
Um eine Einzelauswahl zu treffen, übergeben Sie den Wert der Option als msg.payload, z.B. msg.payload = "option1".
Mehrfachauswahl
Um eine Mehrfachauswahl zu treffen, müssen Sie zuerst "Mehrfachauswahl erlauben" auf dem Knoten aktiviert haben, dann können Sie ein Array von Wert der jeweiligen Optionen als msg.payload übergeben, z.B. msg.payload = ["option1", "option2"].
Auswahl löschen
Um eine Auswahl für ein Dropdown zu löschen, übergeben Sie ein leeres Array [] als msg.payload.
Eigenschaften
| Prop | Dynamic | Description |
|---|---|---|
| Gruppe | Definiert, in welcher Gruppe des UI-Dashboards dieses Widget gerendert wird. | |
| Größe | Steuert die Breite des Dropdowns in Bezug auf die übergeordnete Gruppe. Der Maximalwert ist die Breite der Gruppe. | |
| Beschriftung | ✓ | Der Text, der links vom Dropdown angezeigt wird. HTML-Inhalt ist erlaubt. |
| Optionen | ✓ | Eine Liste der im Dropdown verfügbaren Optionen. Jede Zeile definiert eine 'Beschriftung' (im Dropdown angezeigt) und eine `Wert`-Eigenschaft (bei Auswahl ausgegeben). |
| Mehrfachauswahl erlauben | ✓ | Ob ein Benutzer mehrere Optionen auswählen kann, wenn ja, werden Kontrollkästchen angezeigt und der Wert wird in einem Array ausgegeben. |
| Chips | Zeigt ausgewählte Elemente in Chips an. | |
| Löschbar | Auswahl mit Schaltfläche löschen. | |
| Suche erlauben | Ermöglicht dem Benutzer, einen neuen Wert einzugeben, der die Liste der möglichen Werte zum Auswählen filtert. | |
| Nachrichten-Trigger | Gibt an, wann eine Ausgabemeldung gesendet werden soll. Bei jeder Änderung oder wenn das Dropdown geschlossen wird. |
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 |
|---|---|---|---|
| Beschriftung | msg.ui_update.label | String | |
| Optionen | msg.ui_update.options |
| |
| Mehrfachauswahl erlauben | msg.ui_update.multiple | Boolean | |
| Klasse | msg.ui_update.class | String | |
| Nachrichten-Trigger | msg.ui_update.msgTrigger | String |
Beispiel
Beispiel eines gerenderten Dropdowns in einem Dashboard.
Dropdown mit Mehrfachauswahl, Chips und Löschtaste.