`dialog`

Diese Aktion blendet eine Pop-up-Nachricht ein, die andere Inhalte überlagert, bis sie vom Nutzer aktiv geschlossen wird. Sie eignet sich als Antwort auf einen Submit, um Rückmeldungen (z. B. Erfolgsmeldungen) anzuzeigen. Für kurze Statusmeldungen steht alternativ notification zur Verfügung.

Übersicht

action ("dialog"): Auszuführende Aktion.
payload (MessageActionPayload): Definiert Aussehen und Inhalt der Nachricht.

MessagePayload

color (string): Farbe des Pop-ups als CSS-Farbwert. Ohne Angabe wird der Wert automatisch anhand des type bestimmt.
icon (Font-Awesome-string): Icon, angegeben als Font-Awesome-CSS-Klasse (siehe Icons). Ohne Angabe richtet sich das Icon nach dem gewählten type.
iconColor (string): Farbe des Icons als CSS-Farbwert. Fehlt diese Angabe, greift der unter color definierte Wert.

message (MultiLanguageDefinition): Inhalt der Nachricht.
title (MultiLanguageDefinition): Titel der Nachricht. Ohne Angabe wird der Titel passend zum type gesetzt.

type (enum<"error" | "info" | "success">): Kategorie der Nachricht. Dies beeinflusst das Aussehen der Nachricht, hat aber keinen Einfluss auf den Inhalt. Der Default ist success.

Beispiel

dialog.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": "0",
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "languageButton": true,
      "components": [
        {
          "type": "button",
          "label": "success",
          "onClick": {
            "action": "dialog",
            "payload": {
              "message": "Success message"
            }
          }
        },
        {
          "type": "button",
          "label": "error",
          "onClick": {
            "action": "dialog",
            "payload": {
              "type": "error",
              "message": "Error message"
            }
          }
        },
        {
          "type": "button",
          "label": "info",
          "onClick": {
            "action": "dialog",
            "payload": {
              "type": "info",
              "message": "Information message"
            }
          }
        },
        {
          "type": "button",
          "label": "custom",
          "onClick": {
            "action": "dialog",
            "payload": {
              "icon": "fas fa-headphones",
              "color": "#b32ab5",
              "title": {
                "MULTI_LANGUAGE": {
                  "de": "Überschrift",
                  "en": "Headline"
                }
              },
              "message": {
                "MULTI_LANGUAGE": {
                  "de": "Inhalt",
                  "en": "Content"
                }
              }
            }
          }
        }
      ]
    }
  ]
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: