Discourse 3.1.0.beta6 est livré avec une toute nouvelle API basée sur le composant <DModal>.
Ceci remplace l’ancienne API basée sur les contrôleurs, qui est maintenant obsolète. Si vous avez des modales existantes utilisant les anciennes API, consultez le guide de migration ici.
Rendu d’une Modale
Les modales sont rendues 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 ressemblerait à ceci :
<DButton
@translatedLabel="Show Modal"
@action={{fn (mut this.modalIsVisible) true}}
/>
{{#if this.modalIsVisible}}
<DModal @title="My Modal" @closeModal={{fn (mut this.modalIsVisible) false}}>
Hello world, this is some content in a modal
</DModal>
{{/if}}
mutest utilisée ici comme moyen de définir une valeur uniquement en hbs. Vous pourriez également définirmodalIsVisibleen utilisant n’importe quelle autre méthode Ember standard.
Cet exemple créera une modale simple comme celle-ci :
Enveloppement dans un composant
Avant d’introduire plus de complexité, il est généralement préférable d’envelopper votre nouvelle Modale dans sa propre définition de Composant. Déplaçons les éléments <DModal> à l’intérieur d’un nouveau composant <MyModal />
{{! components/my-modal.hbs }}
<DModal @title="My Modal" @closeModal={{@closeModal}}>
Hello world, this is some content in a modal
</DModal>
L’introduction d’un fichier de composant .js compagnon vous permettra d’introduire une logique et un état plus complexes.
Pour utiliser le nouveau composant, mettez à jour le site d’appel pour qu’il y fasse référence, en vous assurant de lui passer un argument @closeModal.
<DButton
@translatedLabel="Show Modal"
@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 ont une sorte d’appel à l’action. Dans Discourse, ceux-ci ont tendance à être situés au bas de la modale. Pour rendre cela possible, DModal dispose d’un certain nombre de « 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="My Modal" @closeModal={{@closeModal}}>
<:body>
Hello world, this is some content in a modal
</:body>
<:footer>
<DButton class="btn-primary" @translatedLabel="Submit" />
<DModalCancel @close={{@closeModal}} />
</:footer>
</DModal>
Rendu d’une modale à partir d’un contexte non-hbs
Idéalement, les instances de <DModal> devraient être rendues à partir d’un template Ember handlebars en utilisant la technique déclarative démontrée ci-dessus. Si cela n’est pas réalisable pour votre cas d’utilisation (par exemple, vous avez besoin de déclencher une modale à partir des systèmes de rendu « raw-hbs » ou « widget » hérités de Discourse), cela peut être fait en injectant le service modal et en appelant modal.show().
Assurez-vous d’avoir enveloppé 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";
// (injecter le service modal à l'endroit pertinent)
// Ajoutez cet appel chaque fois que vous souhaitez ouvrir la modale.
// Un argument `@closeModal` sera passé automatiquement à votre composant.
this.modal.show(MyModal);
// Facultatif, passez un paramètre '`model`'. Passé comme `@model` à votre composant.
// Ceci peut inclure des données, ainsi que des actions/callbacks à utiliser par votre Modale.
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> possède un certain nombre de blocs nommés et d’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 contrôlé par version - suggérez des modifications sur github.