Changer le CSS rond dans IONIC 4
J'ai un bouton de forme ronde comme suit:
<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>
La classe rouge-ombre est:
.shadow-red{
box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
border-radius: 5px;
}
Et le résultat est:
J'ai donc essayé de nombreuses façons de changer la forme ronde, mais comme ce n'est pas une classe CSS, les opérations suivantes n'ont pas fonctionné.
.round{
border-radius:5px!important;
}
J'ai essayé d'ajouter border-radius:5px!important; à ion-button classe, button, .btn, et de nombreuses autres combinaisons, mais aucune ne fonctionnait.
J'ai également essayé d'ajouter à variables.css les lignes suivantes et aucune d'entre elles n'a fonctionné:
--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....
N'utilisez pas l'attribut shape, vous pouvez maintenant changer l'apparence du bouton selon vos souhaits. Une chose à changer est l'attribut expand. Si vous le définissez sur complet , vous supprimez les bordures gauche et droite (voir dans la documentation). Et vous ne pouvez donc pas définir ou modifier le rayon de la bordure. Réglez-le sur bloc et vous aurez toujours un bouton pleine largeur.
<ion-button expand="block" class="shadow-red">Signup with</ion-button>
Utilisez les propriétés personnalisées CSS suivantes comme décrit dans le Ionic 4 docs .
.shadow-red{
--border-radius: 5px;
--box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}
Résultat:
