DModal-API verwenden, um Modal-Fenster (aka Popups/Dialoge) in Discourse darzustellen

[Discourse]

Discourse 3.1.0.beta6 wird mit einer brandneuen, komponentenbasierten API für <DModal> ausgeliefert.

Diese ersetzt die alte controllerbasierte API, die nun als veraltet markiert ist. Wenn Sie bereits vorhandene Modals mit den alten APIs verwenden, lesen Sie den Migrationsleitfaden hier.

Ein Modal rendern

Modals werden gerendert, indem die <DModal>-Komponente in eine Handlebars-Vorlage eingebunden wird. Falls Sie noch keine geeignete Vorlage haben, schauen Sie sich Using Plugin Outlet Connectors from a Theme or Plugin an.

Ein einfaches Modal sieht etwa so aus:

<DButton
  @translatedLabel="Modal anzeigen"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <DModal @title="Mein Modal" @closeModal={{fn (mut this.modalIsVisible) false}}>
    Hallo Welt, dies ist ein Inhalt in einem Modal
  </DModal>
{{/if}}

Der mut-Helper wird hier als hbs-spezifische Methode verwendet, um einen Wert zu setzen. Sie könnten modalIsVisible auch mit einer anderen Standard-Ember-Methode setzen.

Dieses Beispiel erstellt ein einfaches Modal wie dieses:

In eine Komponente einpacken

Bevor Sie weitere Komplexität einführen, ist es meist am besten, Ihr neues Modal in eine eigene Komponenten-Definition zu verpacken. Verschieben wir den <DModal>-Teil in eine neue <MyModal />-Komponente.

// components/my-modal.gjs
<template>
  <DModal @title="Mein Modal" @closeModal={{@closeModal}}>
    Hallo Welt, dies ist ein Inhalt in einem Modal
  </DModal>
</template>

Das Aktualisieren dieser .gjs-Datei zu einer klassenbasierten Komponente ermöglicht es Ihnen, komplexere Logik und Zustände einzuführen.

Um die neue Komponente zu verwenden, aktualisieren Sie die Aufrufstelle, um darauf zu verweisen, und stellen Sie sicher, dass Sie ein @closeModal-Argument übergeben.

<DButton
  @translatedLabel="Modal anzeigen"
  @action={{fn (mut this.modalIsVisible) true}}
/>

{{#if this.modalIsVisible}}
  <MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}

Eine Fußzeile hinzufügen

Viele Modals haben eine Art Handlungsaufforderung. In Discourse befinden sich diese meist am unteren Rand des Modals. Um dies zu ermöglichen, verfügt DModal über mehrere „benannte Blöcke“, in die Inhalte gerendert werden können. Hier ist das Beispiel, aktualisiert um zwei Buttons in der Fußzeile, von denen einer unser Standard-Button DModalCancel ist:

<DModal @title="Mein Modal" @closeModal={{@closeModal}}>
  <:body>
    Hallo Welt, dies ist ein Inhalt in einem Modal
  </:body>
  <:footer>
    <DButton class="btn-primary" @translatedLabel="Absenden" />
    <DModalCancel @close={{@closeModal}} />
  </:footer>
</DModal>

Ein Modal aus einem Nicht-hbs-Kontext rendern

Idealerweise sollten <DModal>-Instanzen innerhalb einer Ember-Vorlage mit der oben demonstrierten deklarativen Technik gerendert werden. Falls dies für Ihren Anwendungsfall nicht machbar ist, kann dies durch Einbinden des modal-Services und Aufrufen von modal.show() erfolgen.

Stellen Sie sicher, dass Sie Ihr Modal wie oben beschrieben in eine eigene Komponente verpackt haben. Rufen Sie das Modal dann aus, indem Sie einen Verweis auf Ihre Komponentenklasse an showModal übergeben:

import MyModal from "discourse/components/my-modal";

// (den modal-Service an der relevanten Stelle injizieren)

// Rufen Sie dies auf, wann immer Sie das Modal öffnen möchten.
// Ein `@closeModal`-Argument wird automatisch an Ihre Komponente übergeben.
this.modal.show(MyModal);

// Optional: einen `model`-Parameter übergeben. Wird als `@model` an Ihre Komponente übergeben.
// Dies kann Daten sowie Aktionen/Callbacks für Ihr Modal enthalten.
this.modal.show(MyModal, {
  model: { topic: this.topic, someAction: this.someAction },
});

// `modal.show()` gibt ein Promise zurück, sodass Sie auf das Schließen warten können.
// Es wird mit den Daten aufgelöst, die an die `@closeModal`-Aktion übergeben wurden.
const result = await this.modal.show(MyModal);

Noch mehr Anpassungsmöglichkeiten!

<DModal> verfügt über mehrere benannte Blöcke und Argumente. Schauen Sie sich den interaktiven Styleguide für Argumente und die d-modal-Vorlagenimplementierung für benannte Blöcke an.

---

Dieses Dokument wird versioniert – schlagen Sie Änderungen auf GitHub vor.