2
votes

Ionic 4: Problème css de feuille d'action

Le contrôleur de feuille d'action Ionic4 ne prend pas en charge CSS.

Ceci est mon code ts

.match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.red{
    color:red;
}

Et voici ma classe CSS

 const actionSheet = await this.actionSheetController.create({
      mode: 'md',
      cssClass: 'match-item-action-sheet red',
      buttons: [{ ...
      }]
    });

angular css ionic-framework ionic4

4 commentaires

pouvez-vous saisir votre code pertinent dans stackblitz fork et nous montrer le lien: stackblitz.com/edit/ionic-v4 < / a>

Avez-vous vérifié que votre classe donnée ajoute ou non au html?

@ לבנימלכה J'ai édité ma question et ajouté le lien en bas de la question

@SagarKodte non, il n'est pas ajouté

4 Réponses :

-1
votes

const actionSheet = await this.actionSheetController.create({
  mode: 'md',
  css-class: 'match-item-action-sheet red',
  }]
});
Try above code. Used css-class instead of cssClass.Refer this for above issue.

1 commentaires

@SagarKodte Oui, j'ai déjà essayé cela selon la documentation avant de poster la question mais cela n'a pas fonctionné

1
votes

Utilisez :: ng-deep en css

Voir le code de travail

::ng-deep .match-item-action-sheet .action-sheet-group.sc-ion-action-sheet-md{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

::ng-deep .red .action-sheet-group.sc-ion-action-sheet-md{
    color:red!important;
}

Modifier! Selon l'image que vous attachez à la question

Définissez le style sur .action-sheet-group.sc-ion-action-sheet-md

En css:

::ng-deep .match-item-action-sheet{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

::ng-deep .red{
    color:red;
}

2 commentaires

border-radius ne fonctionnait pas, essayez d'utiliser mode = md pour obtenir une meilleure vue

Jetez un œil à l'image ajoutée dans la question, c'est ce que je veux

0
votes

Écrivez ce qui suit dans votre variable.scss:

.action-sheet-group {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

Et ce qui suit dans le scss de votre composant:

.red {
  --color: red;
}

0 commentaires

0
votes

La couleur des boutons de la feuille d'action est contrôlée par la classe ci-dessous .action-sheet-button.sc-ion-action-sheet-ios ou vous pouvez la vérifier dans l'inspecteur du navigateur.

Si vous avez seulement besoin de modifier la section de suppression, utilisez cette classe .action-sheet-destructive.sc-ion-action-sheet-ios .

Ajoutez vos styles qui doivent être modifiés et placez-les dans le variables.scss comme je l'ai fait ci-dessous.

.action-sheet-destructive.sc-ion-action-sheet-ios { La couleur rouge; }

En outre, vous devez changer de manière similaire à la classe appropriée dans Android.

0 commentaires