1
votes

Comment ajouter un CSS personnalisé unique à ngx-smart-modals

Je suis en train de créer une application dans Angular 6.
J'utilise ngx-smart-modal pour gérer tous mes modaux.
J'ai plus de 20 modaux dans mon application.
Comment appliquer le CSS à chacun de manière unique.

J'ai essayé d'utiliser le paramètre [customClass] dans leur documentation, mais je suis relativement nouveau dans Angular / HTML / CSS / etc, et je n'ai pas pu le faire fonctionner.

Je peux changer les tailles de mes modaux dans le monde utilisant

.nsm-dialog.modal {
  width: 50vw;
  height: 50vh;
}

Mais impossible de répliquer pour des modaux individuels

HTML

<ngx-smart-modal #Create identifier="Create" customClass="'modal'">

/deep/ .nsm-dialog{ -insert style- }

Je voudrais avoir chaque modal avec un CSS unique.

Ex.
* La taille Modal1 est 50vw x 50vh
* La taille Modal2 est 20vw x 40vh * etc.

angular html css angular6 parameters

0 commentaires

3 Réponses :

2
votes

Pour utiliser la directive customClass avec des crochets, comme [customClass], vous devez passer une chaîne à la directive, comme:

<ngx-smart-modal [customClass]="'my-custom-class'"></ngx-smart-modal>

Enfin, vous pouvez styliser ceci et seulement ce modal avec my- classe personnalisée.

0 commentaires

0
votes

J'avais le même problème.

Ma résolution consistait à créer un fichier ngx-modal.scss et à l'inclure dans style.scss après @ import "~ ngx-smart-modal / ngx-smart-modal";

J'ai dû ajouter ! important à quelques styles. Je n'ai pas aimé ça mais ça a marché.

HTML - dans le composant

.confirmation-modal {
  background-color: black !important;
  border: 1px solid grey;

  .modal-body {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-top: 1px solid transparent;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    top: 60px;
    position: relative;
  }
}

scss - ngx-modal.scss

<ngx-smart-modal #modalName 
  identifier="modalName"
  [customClass]="'confirmation-modal'">
</ngx-smart-modal>

0 commentaires

0
votes

Pour la manière normale, les exemples indiqués ci-dessus fonctionneront, mais si vous créez des modaux de manière dynamique, vous devez faire

const optionModel: INgxSmartModalOptions = {
  closable: true,
  escapable: false,
  dismissable: false,
  customClass: "signSowClass" };
 let modal;
  modal = this.ngxSmartModalService.create('signSow', SignSowComponent, optionModel).open()

Vous pouvez passer la classe personnalisée à travers les options mentionnées ci-dessus

0 commentaires