Erstellen Sie modale Elemente in UI Builder

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 2 Minuten Lesedauer

    • Verwenden Sie modale Elemente in UI Builder mit Komponenten, um Warnungen oder Handlungsaufforderungen für einen Anwender 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 Benutzer-Experience. Benutzer 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
    • Images
    • Schaltflächen

    UI Builder Für sind vorkonfigurierte modale Elemente verfügbar. Sie können Ihrer Komponente ein modales Element hinzufügen. Konfigurieren Sie dann den Inhalt des Modals und die Anzeige auf dem Bildschirm. Fügen Sie dem Modal einen Ereignishandler hinzu, um eine Aktion auszuführen, wenn ein Benutzer sie auswählt. Die Aktion kann einen Benutzer über etwas warnen oder einen Benutzer bitten, eine Aktion zu bestätigen. Ein Modal ist eine Möglichkeit, um sicherzustellen, dass ein Benutzer weiß, was passiert. Zum Beispiel kann ein Modal einen Benutzer bitten, eine Auswahl zu bestätigen, bevor er die Aktion fortsetzt, die er auf der Hauptseite ausführt.

    Modal – Aufbau

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

    Diagramm, das die verschiedenen Teile von modalen Elementen zeigt

    Modal-Typen

    In UI Buildersind verschiedene Arten von modalen Elementen verfügbar, wie in der folgenden Tabelle dargestellt.

    Modal-Typ Beschreibung
    Warnung Ein Warnungsdialogfeld enthält Informationen zur Komponentenaktion. Wenn ein Benutzer beispielsweise auf die Schaltfläche „Löschen“ klickt, könnten Sie ein Warnungs-Popup anzeigen, das den Benutzer 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 eine Löschtaste klickt, muss er die Löschung der Daten bestätigen. Sie können die Bestätigungsoptionen aus den primären und sekundären Schaltflächenbezeichnungsfeldern auswählen, z. B. Ja/Abbrechen.
    Bestätigen und löschen Ein Modal zum Bestätigen und Löschen ist direktiver und bezieht sich normalerweise auf das Löschen oder Löschen von Inhalten. Sie informiert den Benutzer über die Schwere einer Aktion und fragt ihn, ob er mit der Aktion fortfahren möchte.
    Benutzerdefiniert Benutzerdefinierte modale Elemente behandeln Szenarien, die nicht mit den standardmäßigen modalen Elementen behandelt werden. Benutzerdefinierte modale Elemente können als Containerkomponente in einem modalen Element betrachtet werden. Sie können ein benutzerdefiniertes Layout, Komponenten, Ereignisse und Datenressourcen wie auf einer -Seite hinzufügen. Das benutzerdefinierte Modal verwendet Layouts, damit Sie vollständig entwerfen können, welche Informationen im Modal angezeigt werden sollen. Layouts entscheiden auch, wo sich die Informationen auf dem modalen Bildschirm befinden. 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 übernehmen.
    Modaler Viewport Übergeben Sie Inhalte dynamisch an Ihr Viewport-Modal durch eine Event-Bindung mit einem Client-Skript.

    Event-Handler und modale Elemente

    Events für modale Elemente verfügbar machen, um Handlungsaufforderungs-Events zu verarbeiten. Beispielsweise eine primäre Aktion, eine sekundäre Aktion usw. Sie konfigurieren die Daten, indem Sie einen Event-Handler hinzufügen und eine Datenressource aufrufen. Es ist so einfach wie das Hinzufügen eines neuen Event Handlers für die Komponente, die über ein Modal verfügt. Oder Sie können dem Modal selbst einen Event-Handler hinzufügen. Sie wählen das Event aus, das der Komponente oder dem Modal zugeordnet werden soll, und fügen es hinzu. Ausführliche Anweisungen finden Sie unter Modales Element zu Komponente hinzufügen.