web-dev-qa-db-fra.com

Moyen d'ajouter une classe personnalisée lors de l'utilisation de ngx-bootstrap modalService

En regardant le ngx-bootstrap code source ici:

modal-options.class.ts

Il y a une option class property défini comme class?: string;.

Quelle est la façon de l'utiliser?

Est-il possible d'ajouter une classe personnalisée comme:

this.modalService.config.class = 'myClass';

Avant d'utiliser le servive comme par exemple:

this.modalRef = this.modalService.show(template, {
  animated: false
});

De cette façon, je pense que nous pouvons ajouter du CSS personnalisé au modal affiché

J'ai essayé d'ajouter une classe personnalisée sans succès.

Cette propriété de classe n'est pas un tableau, le cas échéant, cela signifie-t-il que nous ne pouvons ajouter qu'une seule classe personnalisée?

Démo: en ajoutant et en remplaçant la classe modal, le modal n'est pas affiché

https://stackblitz.com/edit/ngx-bootstrap-3auk5l?file=app%2Fapp.component.ts

L'ajout de la classe modal de cette façon n'aide pas:

this.modalRef = this.modalService.show(template, Object.assign({},
                this.config, { class: 'gray modal-lg modal' }));

https://stackblitz.com/edit/ngx-bootstrap-awmkrc?file=app%2Fapp.component.ts

cssangularngx-bootstrapngx-bootstrap-modal
11
HDJEMAI

Selon le ngx-bootstrap documentation sur le composant Modal (voir l'onglet composant), vous pouvez ajouter un membre class à l'objet config.

Important : Étant donné que l'élément modal est en dehors de l'élément de composant dans le code HTML rendu, l'encapsulation CSS doit être désactivée pour le composant ou les attributs de style pour la classe doit être spécifié dans un autre fichier, pour vous assurer que les styles sont appliqués à l'élément modal.

L'extrait de code ci-dessous peut être exécuté dans ce stackblitz .

import { Component, TemplateRef, ViewEncapsulation } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent {
  modalRef: BsModalRef;
  config = {
    animated: true,
    keyboard: true,
    backdrop: true,
    ignoreBackdropClick: false,
    class: "my-modal"
  };

  constructor(private modalService: BsModalService) { }

  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
  }
}

avec un fichier CSS comme celui-ci:

.my-modal {
  border: solid 4px blue;
}

.my-modal .modal-header {
  background-color: Lime;
}

.my-modal .modal-body {
  background-color: orange;
}

Mise à jour : Cette autre stackblitz montre un exemple de styles CSS importés d'un fichier externe dans styles.css, permettant de conserver l'encapsulation CSS dans le composant.

10
ConnorsFan