10. Nov

FAQ zum Ionic Framework

Anbei stellen wir Ihnen häufig benötigte Codeschnipsel oder gestellte Fragen zur App-Entwicklung mit dem Ionic Framework zur Verfügung.

Übersicht

Ionic Framework Developer FAQ

Wie erstelle ich automatische Buildnummern?

Siehe /blog/automatische-buildnummern-version-codes-mit-dem-ionic-framework

Wie ändere ich den Titel des Back-Buttons in der Navigation-Bar?

Passen Sie die app/app.module.ts wie folgt an:

@NgModule({
  ...
  imports: [
    ...
    IonicModule.forRoot(MyApp, {backButtonText: 'zurück'}),
    ...
  ]

Wie füge ich in der Navigation-Bar einen Button auf der rechten Seite ein?

Passen Sie das entprechende Seitentemplate wie folgt an:

<ion-header>
  <ion-navbar>
    <ion-title>TITLE</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="doSomething()">
        <ion-icon name="heart"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Wie zeige ich unter Android Pfeile für detail-push dar?

Unter Android werden im Ionic Framework die Pfeile für das Attribut detail-push bei Listenelementen standardmäßig nicht dargestellt. Um dieses Verhalten zu ändern, fügen Sie in der theme/variables.scss folgende Zeilen ein:

$item-md-detail-push-color: #666666;
$item-md-detail-push-show: true;

Wie kann ich den Titel in der Navigation-Bar unter Android zentrieren?

Folgenden Code angelehnt aus ionic/src/components/toolbar/toolbar.ios.scss in die app.scss kopieren:


.toolbar-title-md {
   text-align: center;

}

.toolbar-md ion-title {
  position: absolute;
  top: 0;
  left: 0;
   padding: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.toolbar-title-wp {
  text-align: center;
}

.toolbar-wp ion-title {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu.