Erstellen Sie modale Elemente in UI Builder

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 2 Minuten Lesedauer

    • Verwenden Sie modale Elemente in UI Builder mit Komponenten, um Warnungen oder Handlungsaufforderungen für einen Benutzer bereitzustellen. UI Builder enthält modale Elemente, um Zeit und Aufwand zu sparen.

    Was sind modale Elemente?

    Modale Elemente, auch als Dialogfelder bezeichnet, sind Fenster, die ein anderes Inhaltsfenster überlagern. Modale Elemente übernehmen die Kontrolle über die Anwender-Experience. Anwender können erst mit dem überlagerten Fenster interagieren, wenn das Dialogfeld geschlossen wurde. Modale Elemente können verschiedene Arten von Inhalten enthalten, z. B.:
    • Statischer Text
    • Dynamischer Text
    • Formulare
    • Bilder
    • Schaltflächen

    UI Builder Für sind vorkonfigurierte modale Elemente verfügbar. Sie können Ihrer Komponente ein Modal hinzufügen. Konfigurieren Sie dann den Inhalt des Modals und wie es auf dem Bildschirm angezeigt wird. Fügen Sie dem Modal einen Ereignis-Handler hinzu, um eine Aktion auszuführen, wenn ein Anwender sie auswählt. Die Aktion kann einen Anwender über etwas warnen oder ihn auffordern, eine Aktion zu bestätigen. Mit einem modalen Element können Sie sicherstellen, dass ein Benutzer weiß, was gerade passiert. Beispielsweise kann ein modaler Dialog einen Anwender auffordern, eine Auswahl zu bestätigen, bevor er die Aktion fortsetzt, die er auf der Hauptseite ausführt.

    Modale Anatomie

    Modale Elemente in UI Builder können Folgendes enthalten:
    • Modaler Header
    • Modaler Inhalt
    • Schaltfläche „Dialogfeld schließen“ (keine Aktion vom Modal ausgeführt)
    • Mindestens eine modale Schaltfläche (Aktion kann vom modalen Element ausgeführt werden)

    Diagramm, das die verschiedenen Teile von modalen Elementen zeigt.

    Modale Typen

    In UI Buildersind verschiedene Arten von modalen Elementen verfügbar (siehe folgende Tabelle).

    Modaler Typ Beschreibung
    Warnung Ein modales Element „Warnung“ enthält Informationen zur Komponentenaktion. Wenn ein Benutzer beispielsweise auf die Schaltfläche „Löschen“ klickt, kann ein Warnungs-Popup angezeigt werden, das ihn darüber informiert, dass er eine Löschaktion nicht rückgängig machen kann.
    Bestätigen Ein modales Element zum Bestätigen fordert einen Benutzer auf, die Komponentenaktion zu bestätigen. Wenn ein Benutzer beispielsweise die Schaltfläche „Löschen“ klickt, muss er das Löschen von Daten bestätigen. Sie können die Bestätigungsoptionen aus dem primären und sekundären Schaltflächenbezeichnungsfeld auswählen, z. B. Ja/Abbrechen.
    Bestätigen und löschen Ein modales Element zum Bestätigen und Löschen ist eher eine Direktive, die sich normalerweise auf das Löschen oder Löschen von Inhalten bezieht. Sie teilt dem Benutzer die Schwere einer Aktion mit und fragt, ob er mit der Aktion fortfahren möchte.
    Anwenderdefiniert Anwenderdefinierte modale Elemente behandeln Szenarien, die nicht mit den standardmäßigen modalen Elementen behandelt werden. Anwenderdefinierte modale Elemente können als Containerkomponente in einem modalen Element betrachtet werden. Sie können ein anwenderdefiniertes Layout, Komponenten, Ereignisse und Datenressourcen wie auf einer Seite hinzufügen. Das anwenderdefinierte Modal verwendet Layouts, damit Sie die gewünschten Informationen im Modal vollständig entwerfen können. Layouts entscheiden auch, wo die Informationen auf dem modalen Bildschirm platziert werden. Sie können Cascading Style Sheets (CSS) verwenden, um das visuelle Erscheinungsbild des Modals zu ändern.
    iframe Verwenden Sie iframe, um Inhalte aus vorhandenen iframe-Inhalten aus einer URL und Daten in Ihr Modal zu importieren.
    Modaler Viewport Übergeben Sie Inhalte dynamisch über eine Ereignisbindung mithilfe eines Client-Skripts an Ihr Viewport-Modal.

    Ereignishandler und modale Elemente

    Machen Sie Ereignisse für Modals verfügbar, um Handlungsaufforderungsereignisse zu verarbeiten. Zum Beispiel eine primäre Aktion, eine sekundäre Aktion usw. Sie konfigurieren die Daten, indem Sie einen Ereignishandler hinzufügen und eine Datenressource aufrufen. Es ist so einfach wie das Hinzufügen eines neuen Ereignishandlers für die Komponente, die ein Modal enthält. Oder Sie können dem Modal selbst einen Ereignishandler hinzufügen. Sie wählen das Ereignis aus, das der Komponente oder dem Modal zugeordnet werden soll, und fügen es hinzu. Ausführliche Anweisungen finden Sie unter Modal zur Komponente hinzufügen.