web-dev-qa-db-fra.com

comment agrandir les icônes et les boutons dans ionic 2

Comment rendre button et icon plus gros dans le code suivant:

<ion-card>
  <ion-card-header>
    Explore Nearby
  </ion-card-header>

  <ion-list>
    <button ion-item>
      <ion-icon name="cart" item-left></ion-icon>
      Shopping
    </button>

    <button ion-item>
      <ion-icon name="medical" item-left></ion-icon>
      Hospital
    </button>

    <button ion-item>
      <ion-icon name="cafe" item-left></ion-icon>
      Cafe
    </button>
  </ion-list>
</ion-card>
cordovatypescripticonsionic2
17
RSA

Les icônes

ion-icons sont des icônes de police, ils peuvent donc être édités comme suit: ils sont essentiellement du texte:

    ion-icon {
        font-size: 20px; //Preferred size here
    }

Boutons

Comme pour le button ionic a des classes incorporées pour affecter la taille. Par exemple:

   <button ion-button large>Large</button>

   <button ion-button>Default</button>

   <button ion-button small>Small</button>

Vous pouvez également mettre à jour la variable Sass par défaut de $button-round-padding dans votre src/theme/variables.scss fichier, à la taille souhaitée. Plus sur les boutons peuvent être trouvés ici

55
Deanmv

Même pour Icon, nous pouvons utiliser grand et petit pour la balise ion-icon. Voici comment j'avais utilisé

<ion-icon name="arrow-forward" item-end small></ion-icon>

5
Prashant

Dans mes Ionic 4 applications, j'ai adopté l'approche suivante. Dans le fichier * .scss:

ion-icon { zoom: 1.5 }

Bien sûr, la valeur du zoom dépend de vos besoins.
J'espère que cela aidera quelqu'un. o /

2
Nowdeen