it-swarm.com.de

wie man Icons und Buttons in ionic 2

Wie kann man button und icon in folgendem Code vergrößern:

<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>
17
RSA

Icons

ion-icon S sind Schriftsymbole, sodass sie wie folgt in Sass/CSS bearbeitet werden können, da es sich im Wesentlichen um Text handelt:

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

Tasten

Wie für die button ionic hat einige eingebaute Klassen, um die Größe zu beeinflussen. Zum Beispiel:

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

   <button ion-button>Default</button>

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

Sie können auch die Standard-Sass-Variable $button-round-padding In Ihrer src/theme/variables.scss - Datei auf die gewünschte Größe aktualisieren. Weitere Schaltflächen finden Sie hier

55
Deanmv

Sogar für Icon können wir groß und klein für das ion-icon-Tag verwenden. So hatte ich es benutzt

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

5
Prashant

In meinen Ionic 4 Apps habe ich den folgenden Ansatz gewählt. In der * .scss-Datei:

ion-icon { zoom: 1.5 }

Natürlich hängt der Zoomwert von Ihren Bedürfnissen ab.
Hoffe das hilft jemandem. O/

2
Nowdeen