Ionic 2モバイルアプリのスタイル設定に関する初心者向けガイド

やあみんな!この投稿では、SCSSを使用してIonic 2アプリケーションのスタイルを設定する方法に関する極端な基本事項を順を追って説明します。

このチュートリアルを最大限に活用するには、CSSとIonicの予備知識が必要ですが、必須ではありません。 Ionic 2フレームワークに慣れていない場合は、Ionic 2のドキュメントを確認することをお勧めします。

ウォークスルー

Ionic 2はテーブルに多くのものをもたらします(完全に空白の足場から始めていない場合)。あなたはアプリを手に入れ、それはほとんど既にスタイル設定されています。ただし、変更を加えたい場合、初心者の場合は少し注意が必要です。

必要なプラグインをインストールするには、Ionicで作業を開始する必要があり、NodeJSをダウンロードしてインストールする必要があります。その後、次のコマンドを実行して、ターミナルからCordovaとIonicをインストールできます。

$ npm install -g ionic cordova

また、Ionic 2が組み込まれている言語であるTypescriptをインストールする必要があります。次のコマンドを実行します:

$ npm install -g typescript

このチュートリアルで主にスタイリングに焦点を当てるには、基本設計の既製のアプリケーションを使用します。

端末で次のコマンドを実行して、Ionic 2タブアプリケーションをスキャフォールドします。

$イオン開始myTabsタブ--v2

異なるビュー間を移動できるように、タブ付きのアプリケーションを取得します。端末でこれを入力することで、ブラウザでテストできます!

$イオンサーブ
ご覧のとおり、Ionicはプラットフォームごとに異なるコンポーネントをカスタマイズしています。プラットフォーム固有の設計を行う方法については、以下で詳しく説明します。また、標準のテーマの色のセットを取得し、かなり一般的に見えます。

$ colorsでカラーテーマを変更する

テキストエディターでアプリを開きます。 (Jetbrains btwのWebStorm IDEを使用しています)

次に、このファイルに移動することから始めます。

src / theme / variables.scss

ここで、アプリのカラーテーマが$ colorsという変数に設定されていることがわかります。これらのキー/値は好きなだけ編集でき、新しいものを追加することもできます。

どのように機能するかを示すには、プライマリの16進数の色を、たとえば「赤」に置き換えるだけです。

次のようになります。

原色を使用しているすべてのコンポーネントは、原色である赤に設定されています。

これらの色は、どのコンポーネントでも簡単に使用できます。どうすればそれができるかをお見せします!

このファイルに移動します。

src / pages / home / home.scss

このファイルでは、ページ固有のSCSSを追加します。つまり、ここで追加するスタイルはホームページにのみ適用されます。

h2テキスト「Welcome to Ionic!」の色を原色(赤)に変更します。そのためには、h2タグをpage-homeに追加し、色をmap-get($ colors、primary)にオーバーライドする必要があります。これにより、変数$ colorsとキー「primary」の値が取得されます。

これは次の結果です。

h2色も赤になりました!ミッション成功!

これでわかったかもしれませんが、$ colors変数で任意のキーを使用することもできます。少し遊んでみて、新しいものを追加してください!

アプリ内のすべての色を追跡するには、$ colorsを使用するのが良い方法です。大量の要素の色を簡単に同時に変更できます。 SCSSを使用しない場合のように、すべての異なるコンポーネントにズームインして手動で色を変更する代わりに。

イオン変数のオーバーライド

「src / theme / variables.scss」では、多くのIonicsの既製のデザインを変更できます。たとえば、ionicが設計したツールバーの色を変更します。 Ionic 2のドキュメントに移動して、「ツールバー」を検索できます。少し下にスクロールして「ツールバーの背景」を見つけた場合、これが必要です。ここで、デフォルトのテーマの色が「#f8f8f8」に設定されていることがわかります。

このツールバーの色を原色に変更します。 「variables.scss」ファイルに移動して、これを追加します。

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

そして出来上がり、アプリ内のすべてのツールバーの背景は、以前赤に設定したプライマリカラーになります!

でも、ツールバーが小さすぎると思ったらどうしますか?そして、それの高さを増やしたいですか?非常によく似た方法でそれを行うことができます!

Ionic 2ドキュメントの[変数のオーバーライド]ページに移動し、ツールバーの高さを検索します。

下部には、$ toolbar-ios-height、$ toolbar-md-height、および$ toolbar-wp-heightがあります。これらは、開発対象の3つのプラットフォームすべての異なるツールバーです。 ios = Iphone、md = Android、およびwp = Windows Phone。テストするには、iOSツールバーを選択して「variable.scss」に配置し、次のように新しい値を設定します。

その結果、次のようになります。

ご覧のとおり、iOSのツールバーは巨大になりました。これを自由に試してみて、スタイルをオーバーライドできるコンポーネントを見つけてください。探しているコンポーネントの名前がわからない場合は、ブラウザでコンポーネントを右クリックしてコンポーネントのクラス名を探し、それを使用してIonic 2のドキュメントで検索できます!

また、Ionic 2のgithubリポジトリでさまざまなコンポーネントを調べて、どの変数があるかを確認することもできます。

プラットフォーム固有のカスタム設計を利用する

3つのプラットフォーム用のアプリケーションを同時に開発しているため、コンポーネントごとにコンポーネントを個別にカスタマイズできることが重要です。つまり、マテリアルデザインはiOSではうまく機能しません。

これを実証するために、iOSプラットフォームで

テキストの色を変更します。

このファイルに移動します。

src / app / app.scss

ここで、グローバルSCSS変数を追加できます。ここに配置したスタイルがアプリ全体に適用されることを意味します。

iOSで「

」テキストを緑色にするには、このSCSSをそのファイルに追加します。

.ios {
  p {
    色:緑;
  }
}

これはこれになります! :)

これは、Ionic 2がもたらす最も価値のあるスタイル機能の1つであると思います。

これは、これを行う方法の非常に簡単な例です。しかし、可能性を想像するなら!基本的に1つのアプリケーションをビルドし、プラットフォームごとにスーパーネイティブで異なるように表示できます。ボタンアニメーションは、おそらくプラットフォームごとに異なり、ネイティブアニメーションと一致するはずです。 3つの異なるネイティブアプリケーションを開発する代わりに、これを行うことでどれだけの時間を節約できるかを理解してください。

ここでウォークスルーを終了し、あなたに任せます!できる限りいろいろ試してみてください。Ionic2についてさらに学ぶことがたくさんあります。スタイリングの基本を説明しました。

しかし、このすべてを行う方法を理解すると、すべてを組み合わせて、本当に見栄えの良いアプリケーションを作成できるようになることを忘れないでください!

今後、Apiの使用方法、E2Eテスト、その他の楽しいものなど、Ionic 2フレームワークの他の側面についても同様の投稿を行います。

ご覧になりたい場合は、このチュートリアルの結果をGithubにプッシュしました!

また近いうちにお会いしましょう!