Discourse 3.1.0.beta6 intègre une toute nouvelle API basée sur le composant <DModal>.
Cette API remplace l’ancienne API basée sur les contrôleurs, désormais obsolète. Si vous utilisez encore des modales avec l’ancienne API, consultez le guide de migration ici.
Affichage d’une modale
Les modales sont affichées en incluant le composant <DModal> dans un template Handlebars. Si vous n’avez pas encore de template approprié, consultez Using Plugin Outlet Connectors from a Theme or Plugin.
Une modale simple pourrait ressembler à ceci :
<DButton
@translatedLabel="Afficher la modale"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<DModal @title="Ma modale" @closeModal={{fn (mut this.modalIsVisible) false}}>
Bonjour le monde, voici un contenu dans une modale
</DModal>
{{/if}}
mutest utilisé ici comme une méthode spécifique à HBS pour définir une valeur. Vous pouvez également définirmodalIsVisibleen utilisant n’importe quelle autre méthode standard d’Ember.
Cet exemple crée une modale simple comme celle-ci :
Encapsulation dans un composant
Avant d’introduire plus de complexité, il est généralement préférable d’encapsuler votre nouvelle modale dans sa propre définition de composant. Déplaçons le contenu de <DModal> dans un nouveau composant <MyModal />.
// components/my-modal.gjs
<template>
<DModal @title="Ma modale" @closeModal={{@closeModal}}>
Bonjour le monde, voici un contenu dans une modale
</DModal>
</template>
Mettre à jour ce fichier .gjs pour en faire un composant basé sur une classe vous permettra d’ajouter une logique et un état plus complexes.
Pour utiliser le nouveau composant, mettez à jour l’appel pour le référencer, en veillant à transmettre un argument @closeModal.
<DButton
@translatedLabel="Afficher la modale"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<MyModal @closeModal={{fn (mut this.modalIsVisible) false}} />
{{/if}}
Ajout d’un pied de page
De nombreuses modales comportent une sorte d’appel à l’action. Dans Discourse, ceux-ci sont généralement situés en bas de la modale. Pour permettre cela, DModal dispose de plusieurs « blocs nommés » dans lesquels du contenu peut être rendu. Voici l’exemple mis à jour pour inclure deux boutons dans le pied de page, dont l’un est notre bouton standard DModalCancel.
<DModal @title="Ma modale" @closeModal={{@closeModal}}>
<:body>
Bonjour le monde, voici un contenu dans une modale
</:body>
<:footer>
<DButton class="btn-primary" @translatedLabel="Soumettre" />
<DModalCancel @close={{@closeModal}} />
</:footer>
</DModal>
Affichage d’une modale depuis un contexte non HBS
Idéalement, les instances de <DModal> doivent être affichées depuis un template Ember en utilisant la technique déclarative démontrée ci-dessus. Si cela n’est pas réalisable pour votre cas d’utilisation, cela peut être fait en injectant le service modal et en appelant modal.show().
Assurez-vous d’avoir encapsulé votre modale dans son propre composant comme décrit ci-dessus. Ensuite, déclenchez la modale en passant une référence de votre classe de composant à showModal :
import MyModal from "discourse/components/my-modal";
// (injectez le service modal à l'endroit approprié)
// Ajoutez cet appel chaque fois que vous souhaitez ouvrir la modale.
// Un argument `@closeModal` sera automatiquement passé à votre composant.
this.modal.show(MyModal);
// Optionnellement, passez un paramètre `model`. Passé sous forme de `@model` à votre composant.
// Cela peut inclure des données, ainsi que des actions/rappels pour votre modale à utiliser.
this.modal.show(MyModal, {
model: { topic: this.topic, someAction: this.someAction },
});
// `modal.show()` retourne une promesse, vous pouvez donc attendre qu'elle soit fermée.
// Elle sera résolue avec les données passées à l'action `@closeModal`.
const result = await this.modal.show(MyModal);
Plus de personnalisation !
<DModal> dispose de plusieurs blocs nommés et arguments. Consultez le guide de style interactif pour les arguments, et l’implémentation du template d-modal pour les blocs nommés.
Ce document est versionné - proposez des modifications sur GitHub.