Ein Leitfaden für Anfänger zum Gestalten einer Ionic 2 Mobile-App

Hallo Leute! In diesem Beitrag werde ich Sie Schritt für Schritt durch die extremen Grundlagen des Stils einer Ionic 2-Anwendung mit SCSS führen.

Um diese exemplarische Vorgehensweise optimal nutzen zu können, sollten Sie über Vorkenntnisse in CSS und Ionic verfügen, dies ist jedoch nicht erforderlich. Wenn Sie mit dem Ionic 2-Framework nicht vertraut sind, empfehlen wir Ihnen, die Ionic 2-Dokumentation zu lesen.

Die Komplettlösung

Ionic 2 bringt viele Dinge auf den Tisch (wenn Sie nicht von einem völlig leeren Gerüst ausgehen). Du bekommst eine App und sie ist so ziemlich schon gestylt. Aber wenn Sie Änderungen daran vornehmen möchten, wird es für Anfänger etwas schwierig.

Um die notwendigen Plugins zu installieren, müssen wir NodeJS herunterladen und installieren. Danach können Sie Cordova und Ionic von Ihrem Terminal aus installieren, indem Sie diesen Befehl ausführen:

$ npm install -g ionisches Cordova

Wir müssen auch Typescript installieren, die Sprache, mit der Ionic 2 erstellt wurde. Führen Sie diesen Befehl aus:

$ npm install -g typescript

Damit sich diese exemplarische Vorgehensweise hauptsächlich auf das Styling konzentriert, verwenden wir eine vorgefertigte Anwendung mit einem grundlegenden Design.

Scaffold eine Ionic 2-Tabs-Anwendung, indem Sie diesen Befehl in Ihrem Terminal ausführen:

$ ionic myTabs-Registerkarten starten --v2

Sie erhalten eine Anwendung mit Registerkarten, mit denen Sie zwischen verschiedenen Ansichten navigieren können. Sie können es im Browser testen, indem Sie dies in Ihr Terminal eingeben!

$ ionic dienen
Wie Sie sehen, passt Ionic die verschiedenen Komponenten für jede Plattform an. Ich werde im Folgenden mehr darüber berichten, wie plattformspezifisches Design funktioniert. Sie erhalten auch eine Reihe von Standard-Themenfarben und es sieht ziemlich allgemein aus.

Ändern Sie das Farbschema mit $ colors

Öffne die App in einem Texteditor. (Ich benutze WebStorm IDE von Jetbrains übrigens)

Navigieren Sie zunächst zu dieser Datei:

src / theme / variables.scss

Hier können Sie sehen, dass das Farbschema der App in einer Variablen namens $ colors festgelegt ist. Diese Schlüssel / Werte können Sie beliebig bearbeiten und sogar neue hinzufügen.

Um Ihnen zu zeigen, wie es funktioniert, ersetzen Sie einfach die hexadezimale Farbe auf der Primärseite durch beispielsweise "rot".

Es wird dazu führen, dass:

Alle Komponenten, die die Primärfarbe verwenden, sind jetzt auf die Primärfarbe Rot eingestellt.

Sie können diese Farben problemlos in jeder Komponente verwenden. Ich werde Ihnen jetzt zeigen, wie Sie das tun können!

Navigieren Sie zu dieser Datei:

src / pages / home / home.scss

In dieser Datei fügen wir seitenabhängiges SCSS hinzu. Das bedeutet, dass die hier hinzugefügten Stile nur auf die Homepage angewendet werden.

Wir werden die Farbe des h2-Textes "Welcome to Ionic!" Auf die Grundfarbe (rot) ändern. Dazu müssen wir das h2-Tag zu page-home hinzufügen und die Farbe zu map-get überschreiben ($ colors, primary). Dadurch werden die Variablen $ colors und der Wert des Schlüssels "primary" abgerufen.

Dies ist das Ergebnis davon:

Die Farbe h2 ist jetzt auch rot! Mission erfolgreich!

Wie Sie jetzt vielleicht herausgefunden haben, können Sie auch einen der Schlüssel in Ihrer Variablen $ colors verwenden. Versuchen Sie, ein wenig damit herumzuspielen, und fügen Sie sogar einige neue hinzu!

Mit $ colors können Sie alle Farben in der App nachverfolgen. Sie können die Farben eines großen Teils der Elemente gleichzeitig auf einfache Weise ändern. Anstatt in alle verschiedenen Komponenten hineinzuzoomen und die Farben manuell zu ändern, wie Sie es tun müssten, wenn Sie SCSS nicht verwenden.

Überschreiben ionischer Variablen

In „src / theme / variables.scss“ können Sie viele vorgefertigte Ionics-Designs ändern. Zum Beispiel möchten wir die Farbe der Symbolleiste ändern, die ionic für uns entworfen hat. Wir können zur Ionic 2-Dokumentation navigieren und nach "Symbolleiste" suchen. Wenn Sie ein wenig nach unten scrollen, finden Sie "Symbolleisten-Hintergrund", das ist, was wir brauchen. Hier können Sie sehen, dass die Standard-Designfarbe auf "# f8f8f8" eingestellt ist.

Wir werden die Farbe dieser Symbolleiste in unsere Primärfarbe ändern. Navigieren Sie zu Ihrer Datei "variables.scss" und fügen Sie Folgendes hinzu:

$ toolbar-background: map-get ($ colors, primary);

und voila, all deine Symbolleistenhintergründe in deiner App werden zu unserer Primärfarbe, die wir zuvor auf rot gesetzt haben!

Hm, aber was ist, wenn Sie denken, dass die Symbolleiste zu klein ist? Und möchten Sie die Höhe erhöhen? Sie können das auf sehr ähnliche Weise tun!

Wechseln Sie in der Dokumentation zu Ionic 2 zur Seite Overriding Variables und suchen Sie nach der Höhe der Symbolleiste.

Unten sehen Sie $ toolbar-ios-height, $ toolbar-md-height und $ toolbar-wp-height. Dies sind die verschiedenen Symbolleisten für alle drei Plattformen, für die Sie entwickeln! ios = iPhone, md = Android und wp = Windows Phone. Wählen Sie zum Testen die iOS-Symbolleiste aus und platzieren Sie sie in "variable.scss". Legen Sie einfach einen neuen Wert fest, wie folgt:

Das wird dazu führen:

Wie Sie sehen, ist die Symbolleiste unter iOS jetzt riesig. Probieren Sie es einfach aus und versuchen Sie, weitere Komponenten zu finden, bei denen Sie den Stil überschreiben können. Wenn Sie den Namen der gesuchten Komponente nicht kennen, können Sie mit der rechten Maustaste auf die Komponente im Browser klicken, nach dem Klassennamen der Komponente suchen und diesen dann für die Suche in der Ionic 2-Dokumentation verwenden!

Sie können auch im Github-Repo von Ionic 2 nach den verschiedenen Komponenten suchen und sehen, welche Variablen sie haben.

Nutzen Sie das plattformspezifische Design

Da Sie gleichzeitig eine Anwendung für drei Plattformen entwickeln, ist es wichtig, dass Sie Ihre Komponenten für jede einzelne separat anpassen können. Ich meine, Materialdesign funktioniert unter iOS nicht wirklich gut.

Um dies zu demonstrieren, werden wir die Farbe des

-Texts auf der iOS-Plattform ändern.

Navigieren Sie zu dieser Datei:

src / app / app.scss

Hier können Sie globale SCSS-Variablen hinzufügen. Das bedeutet, dass die hier eingegebenen Stile auf die gesamte App angewendet werden.

Um den Text "

" unter iOS grün zu machen, fügen Sie einfach diesen SCSS zu dieser Datei hinzu:

.ios {
  p {
    Farbe grün;
  }
}

Das wird dazu führen! :)

Ich denke, dies ist leicht eines der wertvollsten Stilmerkmale, das Ionic 2 bietet.

Dies ist ein sehr einfaches Beispiel dafür, wie Sie dies tun. Aber wenn Sie sich die Möglichkeiten vorstellen! Sie können im Grunde eine Anwendung erstellen und sie auf jeder Plattform super nativ und anders aussehen lassen. Tastenanimationen sollten wahrscheinlich für jede Plattform unterschiedlich sein, damit sie mit den nativen Animationen übereinstimmen, oder? Ich hoffe, Sie verstehen, wie viel Zeit Sie auf diese Weise sparen, anstatt drei verschiedene native Anwendungen zu entwickeln.

Ich beende meinen Rundgang hier und überlasse es Ihnen! Versuchen Sie, so viel wie möglich herumzuspielen, und Sie können noch viel mehr über Ionic 2 lernen. Ich habe gerade die Grundlagen des Stylings behandelt.

Aber denken Sie daran, wenn Sie verstehen, wie das alles funktioniert, können Sie alle Dinge kombinieren, um wirklich gut aussehende Anwendungen zu erstellen!

Ich werde in Zukunft ähnliche Posts zu anderen Aspekten des Ionic 2-Frameworks verfassen, z. B. zur Verwendung von APIs, E2E-Tests und anderen unterhaltsamen Dingen.

Ich habe das Ergebnis dieser exemplarischen Vorgehensweise an meinen Github weitergeleitet, wenn Sie es überprüfen möchten!

Bis bald!