Ionique 2: Comment faire pour remplacer le style de composant ionique

Je suis nouveau sur Ionique 2, je voudrais vous demander comment faire pour modifier le style des ions composant?

J'ai rencontré un problème comme indiqué ci-dessous:

<form action="">
    <ion-list>
        <ion-item>
            <ion-label fixed>Username</ion-label>
            <ion-input type="text" value="" clearInput></ion-input>
        </ion-item>

        <ion-item>
            <ion-label fixed>Password</ion-label>
            <ion-input type="password" clearInput></ion-input>
        </ion-item>
    </ion-list>
</form>

La mise en page sera traduit comme:
Ionique 2: Comment faire pour remplacer le style de composant ionique

Il y a 3 lignes grises entre chacun de ces éléments, le long de l'une est due à l'ion-la liste et le court est due à l'ion-élément.

J'ai essayé de remplacer le style de thème/les variables.scss, mais il semble que il n'y a pas de réglage pour elle.

J'ai vu profondément dans google Chrome, et trouvé le html comme ceci
Ionique 2: Comment faire pour remplacer le style de composant ionique

Je ne pense pas que remplacer le style de ".liste-ios .l'élément de bloc .l'élément intérieur" est une bonne idée, est-il un autre moyen pour résoudre ce problème?

Grâce.

OriginalL'auteur user2504831 | 2017-03-23

3

Vous avez juste besoin de donner no-lines sur cet élément <ion-list>.Doc à ce sujet.

Comme ceci: Travail Plunker
```
<ion-list no-lines>

  <ion-item>
    <ion-label fixed>Username</ion-label>
    <ion-input type="text"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label fixed>Password</ion-label>
    <ion-input type="password"></ion-input>
  </ion-item>

</ion-list>
```
Si vous avez besoin d'apprendre comment modifier la valeur par défaut sur Ionic2, je vous recommande fortement de lire cet article.Un Guide pour un Style Ionique 2 Application

Vous n'avez pas besoin d'utiliser !import hack si vous utilisez des styles comme indiqué ci-dessous à l'intérieur de la page du composant. Utilisation .ios,.md comme ceci:

de connexion.scss
```
 .ios,
    .md {
        page-login {
            .margin-top-35 {
                margin-top: 35px;
            }
         }
 }
```
aucune des lignes n'est pas la supprimer totalement les lignes pour moi

OriginalL'auteur Sampath
2

Pour la suppression des lignes il y a un attribut pour ion-item: no-lines
```
<ion-item no-lines>
            <ion-label fixed>Username</ion-label>
            <ion-input type="text" value="" clearInput></ion-input>
        </ion-item>
```
Il y a aussi des utilitaire attributs qui peuvent être utilisés.

!important n'est pas un moyen d'aller dans n'importe quelle situation donnée. Il serait bon de respecter la bibliothèque qui est utilisé et suivent le même modèle et de changer votre Conception ou de n'utiliser que l'fonctions.
vrai.. c'est pourquoi je l'avais mentionné en dernier recours.. retiré de toute façon..

OriginalL'auteur Suraj Rao
-2

Juste après votre CSS propriété ajoutez !important.

pour exemple:
```
    .ion-nav-button-right {
         margin-top: -7px !important;
         margin-right: 0 !important;
    }
```
Pour votre problème , il suffit de retirer l'étiquette comme:
```
<ion-item style="background: #f3f3f3 !important">
          <ion-input  type="text" placeholder="Write Your Comments"></ion-input>
        </ion-item>
```
!important n'est pas une réponse acceptable si nous voulons garder un projet maintenable et réutilisables. Aussi inline styles est aussi quelque chose qui détruit la spécificité dans le css et rend le projet non maintenable. C'est la raison pour laquelle j'bas voté.
accepté, vos suggestions , c'est la raison pour laquelle je upvoted
Antonakos je me sens Ionique, quand la plupart de l'élément de style qui se passe pendant le temps d'exécution. Vous ne serez pas conscience de classe qui se sont ajoutés à l'élément. puisque vous ne pouvez pas voir ces classes directement dans le code. Vous devrez peut-être ajouter !important certains moments.
Je suis d'accord avec vous. Aussi, lorsque vous avez un composant personnalisé et que vous voulez un style particulier, il est très sale, la solution d'écrire la même structure pour chaque plate-forme (md, ios, etc) pour modifier une ou plusieurs propriétés. !important, dans ce cas, est une bonne solution et n'est pas toujours si mauvais.

OriginalL'auteur Devansh sadhotra

Vous devez vous connecter pour publier un commentaire.