Discourse 3.1.0.beta6 est livré avec une toute nouvelle API basée sur le composant \u003cDModal\u003e.
Cela remplace l’ancienne API basée sur le contrôleur, 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 \u003cDModal\u003e 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 :
\u003cDButton
@translatedLabel="Afficher la Modale"
@action={{fn (mut this.modalIsVisible) true}}
/\u003e
{{#if this.modalIsVisible}}
\u003cDModal @title="Ma Modale" @closeModal={{fn (mut this.modalIsVisible) false}}\u003e
Bonjour le monde, voici un contenu dans une modale
\u003c/DModal\u003e
{{/if}}
mutest utilisé ici comme une manière réservée à hbs de définir une valeur. Vous pourriez également définirmodalIsVisibleen utilisant n’importe quelle autre méthode Ember standard.
Cet exemple créera 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 \u003cDModal\u003e à l’intérieur d’un nouveau composant \u003cMyModal /\u003e
{{! components/my-modal.hbs }}
\u003cDModal @title="Ma Modale" @closeModal={{@closeModal}}\u003e
Bonjour le monde, voici un contenu dans une modale
\u003c/DModal\u003e
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 veillant à passer un argument @closeModal.
\u003cDButton
@translatedLabel="Afficher la Modale"
@action={{fn (mut this.modalIsVisible) true}}
/\u003e
{{#if this.modalIsVisible}}
\u003cMyModal @closeModal={{fn (mut this.modalIsVisible) false}} /\u003e
{{/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
\u003cDModal @title="Ma Modale" @closeModal={{@closeModal}}\u003e
\u003c:body\u003e
Bonjour le monde, voici un contenu dans une modale
\u003c/:body\u003e
\u003c:footer\u003e
\u003cDButton class="btn-primary" @translatedLabel="Soumettre" /\u003e
\u003cDModalCancel @close={{@closeModal}} /\u003e
\u003c/:footer\u003e
\u003c/DModal\u003e
Rendu d’une modale à partir d’un contexte non-hbs
Idéalement, les instances \u003cDModal\u003e devraient être rendues depuis un template handlebars Ember en utilisant la technique déclarative démontrée ci-dessus. Si ce n’est pas faisable pour votre cas d’utilisation (par exemple, vous devez 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 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";
// (injecter le service modal à l'endroit pertinent)
// 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é comme `@model` à votre composant.
// Ceci peut inclure des données, ainsi que des actions/callbacks pour que votre Modale les utilise.
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 se résoudra avec les données passées à l'action `@closeModal`
const result = await this.modal.show(MyModal);
Plus de personnalisation !
\u003cDModal\u003e 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.
\u003csmall\u003eCe document est contrôlé par version - suggérez des modifications sur github.\u003c/small\u003e
\u003c!-- START DOCS ASSET MAP
[
{
"local_path": "/assets/dmodal-api-1.png",
"local_sha1": "8dfd8ffa18409fdcac56e95e0f37e3b2c81af61e",
"remote_short_url": "upload://9eKVimqNmM9Q4apSPWsWrImfmQt.png"
},
{
"local_path": "/assets/dmodal-api-2.png",
"local_sha1": "9e6b3ae3a40c9934fa89cea18d42a1138e9248d3",
"remote_short_url": "upload://yp2hfxwO9dNjAJtUnGU89azmz63.png"
}
]
END DOCS ASSET MAP –\u003e