Ionic-クイックガイド

Ionic 上に構築されたフロントエンドHTMLフレームワークです AngularJS そして Cordova。彼らの公式文書によると、このIonicオープンソースフレームワークの定義は次のとおりです。

イオンは HTML5 Mobile App Development Frameworkハイブリッドモバイルアプリの構築を対象としています。Ionicは、アプリが魅力的であるために必要なすべてのルックアンドフィールとUIインタラクションを処理するフロントエンドUIフレームワークと考えてください。「BootstrapforNative」のようなものですが、幅広い一般的なネイティブモバイルコンポーネント、洗練されたアニメーション、美しいデザインをサポートしています。

Ionicフレームワークの機能

以下はIonicの最も重要な機能です-

• AngularJS − Ionicは、モバイルデバイス用に最適化されたリッチなシングルページアプリケーションを構築するためにAngularJSMVCアーキテクチャを使用しています。

• CSS components−ネイティブのルックアンドフィールを備えたこれらのコンポーネントは、モバイルアプリケーションが必要とするほぼすべての要素を提供します。コンポーネントのデフォルトのスタイルは、独自のデザインに合わせて簡単に上書きできます。

• JavaScript components −これらのコンポーネントは、JavaScript機能を使用してCSSコンポーネントを拡張し、HTMLとCSSだけでは実行できないすべてのモバイル要素をカバーしています。

• Cordova Plugins − Apache Cordovaプラグインは、JavaScriptコードでネイティブデバイス関数を使用するために必要なAPIを提供します。

• Ionic CLI −これは、Ionicアプリケーションを起動、構築、実行、およびエミュレートするためのコマンドを備えたNodeJSユーティリティです。

• Ionic View −ネイティブデバイスでアプリケーションをアップロード、共有、テストするための非常に便利なプラットフォーム。

• Licence −IonicはMITライセンスの下でリリースされています。

IonicFrameworkの利点

以下は、最も一般的に知られているIonicFrameworkの利点の一部です-

• Ionicはハイブリッドアプリ開発に使用されます。これは、IOS、Android、Windows Phone、Firefox OS用にアプリケーションをパッケージ化できることを意味します。これにより、作業時間を大幅に節約できます。

• Ionicは、シンプルなレイアウトで便利な事前生成されたアプリセットアップを提供するため、アプリの起動は非常に簡単です。

• アプリは非常にクリーンでモジュール式の方法で構築されているため、保守が容易で更新も簡単です。

• Ionic DevelopersTeamはGoogleDevelopers Teamと非常に良好な関係を築いており、フレームワークを改善するために協力しています。更新は定期的に行われ、Ionicサポートグループは必要に応じていつでも喜んでお手伝いします。

Ionicフレームワークの制限

以下は、最も重要なIonicFrameworkの制限の一部です-

• ブラウザが電話環境に関する正しい情報を常に提供するとは限らないため、テストは難しい場合があります。プラットフォームだけでなく非常に多くの異なるデバイスがあり、通常はそれらのほとんどをカバーする必要があります。

• 異なるネイティブ機能を組み合わせるのは難しい場合があります。プラグインの互換性の問題が発生し、デバッグが困難なビルドエラーが発生する場合が多くあります。

• ハイブリッドアプリは、ネイティブアプリよりも遅くなる傾向があります。ただし、モバイルテクノロジーは急速に進歩しているため、これは将来的には問題になりません。

次の章では、Ionic Open SourceFrameworkの環境設定について理解します。

この章では、IonicFrameworkの使用を開始する方法を説明します。次の表に、Ionicを開始するために必要なコンポーネントのリストを示します。

シニア番号	ソフトウェアと説明
1	NodeJS これは、Ionicを使用してモバイルアプリを作成するために必要な基本プラットフォームです。NodeJSのインストールの詳細については、NodeJS環境のセットアップをご覧ください。NodeJSのインストール中にnpmもインストールするようにしてください。
2	Android SDK Windowsプラットフォームで作業し、Androidプラットフォーム用のアプリを開発する場合は、マシンにAndroidSDKをセットアップする必要があります。次のリンクには、Android環境のセットアップに関する詳細情報があります。
3	XCode Macプラットフォームで作業し、iOSプラットフォーム用のアプリを開発する場合は、マシンにXCodeをセットアップする必要があります。次のリンクには、iOS環境のセットアップに関する詳細情報があります。
4	cordova and Ionic これらは、Ionicの使用を開始するために必要な主要なSDKです。この章では、上記の表で説明されているように、必要なセットアップがすでに完了していることを前提として、簡単な手順でIonicをセットアップする方法について説明します。

CordovaとIonicのインストール

このチュートリアルでは、Windowsコマンドプロンプトを使用します。同じ手順をOSX端末に適用できます。コマンドウィンドウを開いて、CordovaとIonicをインストールします-

C:\Users\Username> npm install -g cordova ionic

アプリの作成

Ionicでアプリを作成する際、次の3つのオプションから選択できます。

• タブアプリ
• 空白のアプリ
• サイドメニューアプリ

コマンドウィンドウで、アプリを作成するフォルダーを開き、以下のオプションのいずれかを試してください。

タブアプリ

Ionicタブテンプレートを使用する場合、アプリはタブメニュー、ヘッダー、およびいくつかの便利な画面と機能を使用して構築されます。これはデフォルトのIonicテンプレートです。コマンドウィンドウを開き、アプリを作成する場所を選択します。

C:\Users\Username> cd Desktop

このコマンドは、作業ディレクトリを変更します。アプリはデスクトップ上に作成されます。

C:\Users\Username\Desktop> ionic start myApp tabs

イオン Start コマンドはという名前のフォルダを作成します myApp Ionicファイルとフォルダを設定します。

C:\Users\Username\Desktop> cd myApp

今、私たちはアクセスしたい myApp作成したフォルダ。これがルートフォルダです。

Androidプラットフォーム用のCordovaプロジェクトを追加し、基本的なCordovaプラグインもインストールしましょう。次のコードを使用すると、Androidエミュレーターまたはデバイスでアプリを実行できます。

C:\Users\Username\Desktop\myApp> ionic platform add android

次のステップは、アプリをビルドすることです。次のコマンドを実行した後にビルドエラーが発生した場合は、AndroidSDKとその依存関係をインストールしていない可能性があります。

C:\Users\Username\Desktop\myApp> ionic build android

インストールプロセスの最後のステップは、アプリを実行することです。これにより、接続されている場合はモバイルデバイスが起動し、接続されているデバイスがない場合はデフォルトのエミュレーターが起動します。Android Default Emulatorは遅いので、Genymotionまたは他の人気のあるAndroidEmulatorをインストールすることをお勧めします。

C:\Users\Username\Desktop\myApp> ionic run android

これにより、以下の結果が生成されます。これはIonicTabsアプリです。

空白のアプリ

ゼロから始めたい場合は、Ionicブランクテンプレートをインストールできます。上で説明したのと同じ手順を使用しますが、ionic start myApp blank の代わりに ionic start myApp tabs 次のように。

C:\Users\Username\Desktop> ionic start myApp blank

イオン Start コマンドはという名前のフォルダを作成します myApp Ionicファイルとフォルダを設定します。

C:\Users\Username\Desktop> cd myApp

Androidプラットフォーム用のCordovaプロジェクトを追加し、上記で説明したように基本的なCordovaプラグインをインストールしましょう。

C:\Users\Username\Desktop\myApp>ionic platform add android

次のステップは、アプリを構築することです-

C:\Users\Username\Desktop\myApp> ionic build android

最後に、次のコードのようにアプリを起動します-

C:\Users\Username\Desktop\myApp> ionic run android

これにより、次の結果が生成されます。これはIonic BlankAppです。

サイドメニューアプリ

使用できる3番目のテンプレートは、サイドメニューテンプレートです。手順は前の2つのテンプレートと同じです。追加するだけですsidemenu 以下のコードに示すように、アプリを起動するとき。

C:\Users\Username\Desktop> ionic start myApp sidemenu

イオン Start コマンドはという名前のフォルダを作成します myApp Ionicファイルとフォルダを設定します。

C:\Users\Username\Desktop> cd myApp

Androidプラットフォーム用のCordovaプロジェクトを追加し、以下のコードを使用して基本的なCordovaプラグインをインストールしましょう。

C:\Users\Username\Desktop\myApp> ionic platform add android

次のステップは、次のコードを使用してアプリをビルドすることです。

C:\Users\Username\Desktop\myApp> ionic build android

最後に、以下のコードでアプリを起動します。

C:\Users\Username\Desktop\myApp> ionic run android

これにより、Ionic SideMenuアプリである次の結果が生成されます。

ブラウザでアプリをテストする

JavaScriptを使用しているため、どのWebブラウザーでもアプリを提供できます。これにより構築プロセスがスピードアップしますが、ネイティブエミュレーターとデバイスでアプリを常にテストする必要があります。次のコードを入力して、Webブラウザーでアプリを提供します。

C:\Users\Username\Desktop\myApp> ionic serve

上記のコマンドは、Webブラウザーでアプリを開きます。Google Chromeは、モバイル開発テスト用のデバイスモード機能を提供します。押すF12 開発者コンソールにアクセスします。

コンソールウィンドウのクリックの左上隅には、「デバイスモードの切り替え」アイコンがあります。次のステップは、右上隅にある「DocktoRight」アイコンをクリックすることです。ページが更新されると、Webブラウザでテストする準備が整います。

プロジェクトフォルダ構造

Ionicは、すべてのタイプのアプリに対して次のディレクトリ構造を作成します。これは、Ionic開発者が、以下に説明するすべてのディレクトリとファイルの目的を理解するために重要です。

上の画像に示されているプロジェクトのフォルダー構造で使用可能なすべてのフォルダーとファイルについて簡単に理解しましょう。

• Hooks−フックは、ビルドプロセス中にトリガーできるスクリプトです。これらは通常、Cordovaコマンドのカスタマイズおよび自動化されたプロセスの構築に使用されます。このチュートリアルでは、このフォルダーは使用しません。

• Platforms−これはAndroidおよびIOSプロジェクトが作成されるフォルダーです。開発中にこれらのファイルを必要とするプラットフォーム固有の問題が発生する可能性がありますが、ほとんどの場合、そのままにしておく必要があります。

• Plugins−このフォルダーにはCordovaプラグインが含まれています。最初にIonicアプリを作成すると、いくつかのプラグインがインストールされます。以降の章では、Cordovaプラグインをインストールする方法を説明します。

• Resources −このフォルダは、アイコンやスプラッシュ画面などのリソースをプロジェクトに追加するために使用されます。

• Scss− IonicコアはSassで構築されているため、これはSassファイルが配置されているフォルダーです。プロセスを簡素化するために、このチュートリアルではSassを使用しません。スタイリングはCSSを使用して行われます。

• www− wwwは、Ionic開発者のメインの作業フォルダーです。彼らはほとんどの時間をここで過ごします。Ionicは、「www」内にデフォルトのフォルダー構造を提供しますが、開発者はいつでも自分のニーズに合わせて変更できます。このフォルダを開くと、次のサブフォルダがあります-

  • ザ・ css CSSスタイリングを書き込むフォルダー。

  • ザ・ img 画像を保存するためのフォルダ。

  • ザ・ jsアプリのメイン構成ファイル（app.js）とAngularJSコンポーネント（コントローラー、サービス、ディレクティブ）を含むフォルダー。すべてのJavaScriptコードはこれらのフォルダー内にあります。

  • ザ・ libs ライブラリが配置されるフォルダ。

  • ザ・ templates HTMLファイル用のフォルダ。

  • Index.html アプリの出発点として。

• Other Files −これは初心者向けのチュートリアルなので、他の重要なファイルとその目的についても説明します。

  • .bowerrc バウアー構成ファイルです。

  • .editorconfig エディター構成ファイルです。

  • .gitignore アプリをGitリポジトリにプッシュするときに、アプリのどの部分を無視するかを指示するために使用されます。

  • bower.json Bowerパッケージマネージャーを使用することを選択した場合、bowerコンポーネントと依存関係が含まれます。

  • gulpfile.js gulpタスクマネージャーを使用して自動化されたタスクを作成するために使用されます。

  • config.xml Cordova構成ファイルです。

  • package.json NPMパッケージマネージャーを使用してインストールされるアプリ、それらの依存関係、およびプラグインに関する情報が含まれています。

次の章では、Ionicオープンソースフレームワークで使用できるさまざまな色について説明します。

Ionicフレームワークで使用可能な実際の要素から始める前に、Ionicがさまざまな要素の色をどのように使用するかについて少し理解しましょう。

イオンカラークラス

Ionicフレームワークは私たちに一連の nine predefined color classes。これらの色を使用することも、独自のスタイルで上書きすることもできます。

次の表は、Ionicが提供する9色のデフォルトセットを示しています。このチュートリアルでは、さまざまなイオン要素のスタイリングにこれらの色を使用します。今のところ、以下のようにすべての色を確認できます-

クラス	説明	結果
光	白色に使用する
安定	ライトグレーに使用します
ポジティブ	青色に使用する
落ち着いて	水色に使用する
バランスの取れた	緑色に使用します
エネルギーを与えられた	黄色に使用します
断定的	赤色に使用する
王立	バイオレットカラーに使用します
闇	黒色に使用する

イオンカラーの使用法

Ionicは、要素ごとに異なるクラスを使用します。たとえば、ヘッダー要素にはbar クラスとボタンには buttonクラス。使用法を単純化するために、色名の前に要素クラスを付けることにより、さまざまな色を使用します。

たとえば、青色のヘッダーを作成するには、 bar-calm 次のように-

<div class = "bar bar-header bar-calm">
   ...
</div>

同様に、灰色のボタンを作成するには、 button-stable 次のようにクラス。

<div class = "button button-stable">
   ...
</div>

他のCSSクラスと同じようにIonicカラークラスを使用することもできます。次に、バランスの取れた（緑）色とエネルギーを与えられた（黄色）色で2つの段落のスタイルを設定します。

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

上記のコードは次の画面を生成します-

さまざまなクラスを使用してさまざまな要素を作成する場合は、以降の章で詳しく説明します。

CSSを使用した色のカスタマイズ

CSSを使用してIonicのデフォルトの色の一部を変更したい場合は、 lib/css/ionic.cssファイル。場合によっては、すべての要素（ヘッダー、ボタン、フッターなど）がスタイル設定に独自のクラスを使用するため、このアプローチはあまり生産的ではありません。

したがって、「light」クラスの色をオレンジ色に変更する場合は、このクラスを使用するすべての要素を検索して変更する必要があります。これは、単一の要素の色を変更したい場合に便利ですが、時間がかかりすぎるため、すべての要素の色を変更するのにはあまり実用的ではありません。

SASSを使用した色のカスタマイズ

SASS（これは–の短縮形です Syntactically Awesome Style Sheet）すべての要素の色を一度に変更する簡単な方法を提供します。SASSを使用する場合は、コマンドウィンドウでプロジェクトを開き、「-」と入力します。

C:\Users\Username\Desktop\tutorialApp> ionic setup sass

これにより、プロジェクトにSASSがセットアップされます。これで、を開いてデフォルトの色を変更できますscss/ionic.app.scss ファイルを作成し、この行の前に次のコードを入力します– @import "www/lib/ionic/scss/ionic";

バランスカラーをダークブルーに、エナジーカラーをオレンジに変更します。上で使用した2つの段落は、濃い青とオレンジになりました。

$balanced: #000066 !default; $energized: #FFA500 !default;

ここで、次の例を使用すると-

<p class = "balanced">Paragraph 1...</p>
<p class = "energized">Paragraph 2...</p>

上記のコードは次の画面を生成します-

これらのクラスを使用しているすべてのイオン要素は、濃い青とオレンジに変わります。Ionicのデフォルトのカラークラスを使用する必要がないことを考慮してください。要素はいつでも好きなようにスタイル設定できます。

重要な注意点

ザ・ www/css/style.cssSASSをインストールすると、ファイルはindex.htmlのヘッダーから削除されます。それでも使用する場合は、手動でリンクする必要があります。index.htmlを開き、ヘッダー内に次のコードを追加します。

<link href = "css/style.css" rel = "stylesheet">

ほとんどすべてのモバイルアプリには、いくつかの基本的な要素が含まれています。通常、これらの要素には、画面の上部と下部をカバーするヘッダーとフッターが含まれます。他のすべての要素は、これら2つの間に配置されます。Ionicは提供しますion-content 作成する他のすべての要素をラップするコンテナーとして機能する要素。

このコンテナにはいくつかの固有の特性がありますが、これはJavaScriptベースのコンポーネントであるため、このチュートリアルの後半で説明します。

<div class = "bar bar-header"> 
   <h1 class = "title">Header</h1> 
</div>
 
<div class = "list"> 
   <label class = "item item-input"> 
      <input type = "text" placeholder = "Placeholder 1" /> 
   </label>
   
   <label class = "item item-input"> 
      <input type = "text" placeholder = "Placeholder 2" /> 
   </label> 
</div>

<div class = "bar bar-footer"> 
   <h1 class = "title">Footer</h1> 
</div>

ザ・ Ionic header bar画面の上部にあります。タイトル、アイコン、ボタン、またはその他の要素をその上に含めることができます。使用できるヘッダーの定義済みクラスがあります。このチュートリアルですべてを確認できます。

ヘッダーの追加

アプリで使用する可能性のあるすべてのバーのメインクラスは bar。このクラスは、アプリ内のすべてのバーに常に適用されます。すべてbar subclasses プレフィックスを使用します– bar。

ヘッダーを作成する場合は、追加する必要があります bar-header あなたのメインの後 barクラス。あなたのwww/index.html ファイルを作成し、ヘッダークラ​​スを body鬼ごっこ。にヘッダーを追加していますindex.html body アプリのすべての画面で利用できるようにしたいからです。

以来 bar-header クラスにはデフォルト（白）のスタイルが適用されています。その上にタイトルを追加して、画面の他の部分と区別できるようにします。

<div class = "bar bar-header">
   <h1 class = "title">Header</h1>
</div>

上記のコードは次の画面を生成します-

ヘッダーの色

ヘッダーのスタイルを設定する場合は、適切なカラークラスをヘッダーに追加するだけです。要素のスタイルを設定するときは、メイン要素クラスをプレフィックスとしてカラークラスに追加する必要があります。ヘッダーバーのスタイルを設定しているため、プレフィックスクラスは次のようになります。bar この例で使用するカラークラスは次のとおりです。 positive （青い）。

<div class = "bar bar-header bar-positive">
   <h1 class = "title">Header</h1>
</div>

上記のコードは次の画面を生成します-

次の9つのクラスのいずれかを使用して、アプリのヘッダーに任意の色を付けることができます-

カラークラス	説明	結果
バーライト	白色に使用する
バー安定	ライトグレーに使用します
バーポジティブ	青色に使用する
バー-落ち着いて	水色に使用する
バーバランス	緑色に使用します
バー-通電	黄色に使用します
バー-主張	赤色に使用する
バーロイヤル	バイオレットカラーに使用します
バーダーク	黒色に使用する

ヘッダー要素

ヘッダー内に他の要素を追加できます。次のコードは、を追加する例です。menu ボタンと homeヘッダー内のボタン。また、ヘッダーボタンの上にアイコンを追加します。

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

上記のコードは次の画面を生成します-

サブヘッダー

ヘッダーバーのすぐ下に配置されるサブヘッダーを作成できます。次の例は、アプリにヘッダーとサブヘッダーを追加する方法を示しています。ここでは、サブヘッダーを「アサーティブ」（赤）カラークラスでスタイル設定しました。

<div class = "bar bar-header bar-positive">
   <button class = "button icon ion-navicon"></button>
   <h1 class = "title">Header Buttons</h1>
   <button class = "button icon ion-home"></button>
</div>

<div class = "bar bar-subheader bar-assertive">
   <h2 class = "title">Sub Header</h2>
</div>

上記のコードは次の画面を生成します-

ルートがアプリ画面のいずれかに変更されると、以下のスクリーンショットに示すように、ヘッダーとサブヘッダーが一部のコンテンツをカバーしていることがわかります。

これを修正するには、を追加する必要があります ‘has-header’ または ‘has-subheader’ クラスへ ion-content画面のタグ。からHTMLファイルの1つを開きますwww/templates を追加します has-subheader クラスへ ion-content。アプリでヘッダーのみを使用する場合は、ヘッダーを追加する必要がありますhas-header 代わりにクラス。

<ion-content class = "padding has-subheader">

上記のコードは次の画面を生成します-

Ionic footerアプリ画面の下部に配置されます。フッターの操作は、ヘッダーの操作とほとんど同じです。

フッターの追加

Ionicフッターのメインクラスは bar（ヘッダーと同じ）。画面にフッターを追加する場合は、追加する必要がありますbar-footer メインの後の要素へのクラス barクラス。アプリのすべての画面でフッターを使用したいので、フッターをに追加しますbody の index.htmlファイル。フッターのタイトルも追加します。

<div class = "bar bar-footer">
   <h1 class = "title">Footer</h1>
</div>

上記のコードは次の画面を生成します-

フッターカラー

フッターのスタイルを設定する場合は、適切なカラークラスを追加するだけです。要素のスタイルを設定するときは、メイン要素クラスをプレフィックスとしてカラークラスに追加する必要があります。フッターバーをスタイリングしているので、プレフィックスクラスはbar この例で使用するカラークラスは次のとおりです。 assertive （赤）。

<div class = "bar bar-footer bar-assertive">
   <h1 class = "title">Footer</h1>
</div>

上記のコードは次の画面を生成します-

次の9つのクラスのいずれかを使用して、アプリのフッターに選択した色を付けることができます-

カラークラス	説明	結果
バーライト	白色に使用する
バー安定	ライトグレーに使用します
バーポジティブ	青色に使用する
バー-落ち着いて	水色に使用する
バーバランス	緑色に使用します
バー-通電	黄色に使用します
バー-主張	赤色に使用する
バーロイヤル	バイオレットカラーに使用します
バーダーク	黒色に使用する

フッター要素

フッターには、その中に要素を含めることができます。ほとんどの場合、フッター内にアイコン付きのボタンを追加する必要があります。

追加された最初のボタンは常に左隅にあります。最後のものは右側に配置されます。間にあるボタンは、フッターの左側にある最初のボタンの横にグループ化されます。次の例では、icon ボタンの上にアイコンを追加するクラス。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon"></button>
   <button class = "button icon ion-home"></button>
   <button class = "button icon ion-star"></button>
   <button class = "button icon ion-checkmark-round"></button>
</div>

上記のコードは次の画面を生成します-

ボタンを右に移動したい場合は、追加できます pull-right クラス。

<div class = "bar bar-footer bar-assertive">
   <button class = "button icon ion-navicon pull-right"></button>
</div>

上記のコードは次の画面を生成します-

Ionic Frameworkにはいくつかの種類のボタンがあり、これらのボタンは微妙にアニメーション化されているため、アプリを使用する際のユーザーエクスペリエンスがさらに向上します。すべてのボタンタイプのメインクラスはbutton。このクラスは常にボタンに適用され、サブクラスを操作するときのプレフィックスとして使用します。

ブロックボタン

ブロックボタンは、常に親コンテナの幅が100％になります。また、小さなパディングが適用されます。使用しますbutton-blockブロックボタンを追加するためのクラス。パディングを削除して全幅を維持したい場合は、button-full クラス。

以下は、両方のクラスの使用法を示す例です-

<button class = "button button-block">
   button-block
</button>

<button class = "button button-full">
   button-full
</button>

上記のコードは次の画面を生成します-

ボタンのサイズ

ボタンサイズを変更するための2つのIonicクラスがあります-

• button-small そして

• button-large.

以下はそれらの使用法を示す例です-

<button class = "button button-small">
   button-small
</button>

<button class = "button button-large">
   button-large
</button>

上記のコードは次の画面を生成します-

ボタンの色

ボタンのスタイルを設定する場合は、適切なカラークラスをボタンに追加するだけです。要素のスタイルを設定するときは、メイン要素クラスをプレフィックスとしてカラークラスに追加する必要があります。フッターバーのスタイルを設定しているため、プレフィックスクラスはbar この例で使用するカラークラスは次のとおりです。 assertive （赤）。

<button class = "button button-assertive">
   button-assertive
</button>

上記のコードは次の画面を生成します-

次の9つのクラスのいずれかを使用して、アプリのボタンに選択した色を付けることができます-

カラークラス	説明	結果
ボタンライト	白色に使用する
ボタン安定	ライトグレーに使用します
ボタンポジティブ	青色に使用する
ボタン-落ち着いて	水色に使用する
ボタンバランス	緑色に使用します
ボタンで作動	黄色に使用します
ボタン-主張	赤色に使用する
ボタンロイヤル	バイオレットカラーに使用します
ボタン-暗い	黒色に使用する

ボタンの概要

ボタンを透明にしたい場合は、適用できます button-outlineクラス。このクラスのボタンには、アウトラインの境界線と透明な背景があります。

ボタンから境界線を削除するには、 button-clearクラス。次の例は、これら2つのクラスの使用方法を示しています。

<button class = "button button-assertive button-outline">
   button-outline
</button>

<button class = "button button-assertive button-clear">
   button-clear
</button>

上記のコードは次の画面を生成します-

アイコンの追加

ボタンにアイコンを追加する場合、最良の方法は iconクラス。ボタンの片側にアイコンを配置するには、icon-left または icon-right。以下で説明するように、ボタンの上にテキストがある場合は、通常、アイコンを片側に移動する必要があります。

<button class = "button icon ion-home">
</button>

<button class = "button icon icon-left ion-home">
   Home
</button>

<button class = "button icon icon-right ion-home">
   Home
</button>

上記のコードは次の画面を生成します-

ボタンバー

いくつかのボタンをグループ化したい場合は、 button-barクラス。ボタンのサイズはデフォルトで同じになります。

<div class = "button-bar">
   <a class = "button button-positive">1</a>
   <a class = "button button-assertive">2</a>
   <a class = "button button-energized">3</a>
   <a class = "button">4</a>
</div>

上記のコードは次の画面を生成します-

ListsWebまたはモバイルアプリケーションで最も人気のある要素の1つです。これらは通常、さまざまな情報を表示するために使用されます。これらを他のHTML要素と組み合わせて、さまざまなメニューやタブを作成したり、純粋なテキストファイルの単調さを解消したりできます。Ionicフレームワークは、使用を簡単にするためにさまざまなリストタイプを提供します。

イオンリストの作成

すべてのリストは2つの要素で作成されます。基本的なリストを作成したいとき<ul> タグには list 割り当てられたクラス、および <li> タグはを使用します itemクラス。もう一つの興味深いことは、あなたが使う必要さえないということです<ul>、 <ol> そして <li>リストのタグ。他の要素を使用することもできますが、重要なことは追加することですlist そして item 適切にクラス。

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

上記のコードは次の画面を生成します-

はめ込みリスト

独自のコンテナを埋めるためにリストが必要な場合は、 list-insets あなたの後 listクラス。これにより、マージンが追加され、コンテナのリストサイズが調整されます。

<div class = "list list-inset">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
</div>

上記のコードは次の画面を生成します-

アイテムディバイダー

仕切りは、いくつかの要素を論理グループに編成するために使用されます。Ionicは私たちにitem-dividerこのためのクラス。繰り返しますが、他のすべてのイオン要素と同様に、追加する必要がありますitem-divider 後のクラス itemクラス。アイテムの仕切りは、デフォルトで他のリストアイテムよりもスタイルが強いため、リストヘッダーとして役立ちます。

<div class = "list">
   <div class = "item item-divider">Item Divider 1</div>
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>

   <div class = "item item-divider">Item Divider 2</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
</div>

上記のコードは次の画面を生成します-

アイコンの追加

ボタンにアイコンを追加する方法については、すでに説明しました。リストアイテムにアイコンを追加するときは、アイコンを配置する側を選択する必要があります。があるitem-icon-left そして item-icon-rightこのためのクラス。アイコンを両側に配置したい場合は、これら2つのクラスを組み合わせることもできます。最後に、item-note アイテムにテキストメモを追加するクラス。

<div class = "list">
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      Left side Icon
   </div>

   <div class = "item item-icon-right">
      <i class = "icon ion-star"></i>
      Right side Icon
   </div>

   <div class = "item item-icon-left item-icon-right">
      <i class = "icon ion-home"></i>
      <i class = "icon ion-star"></i>
      Both sides Icons
   </div>
   
   <div class = "item item-icon-left">
      <i class = "icon ion-home"></i>
      <span class = "text-note">Text note</span>
   </div>
</div>

上記のコードは次の画面を生成します-

アバターとサムネイルの追加

アバターとサムネイルは似ています。主な違いは、アバターがサムネイルよりも小さいことです。これらのサムネイルはリストアイテムの全高の大部分をカバーしていますが、アバターは中型の円の画像です。使用されるクラスはitem-avatar そして item-thumbnail。以下のサムネイルコード例に示すように、アバターとサムネイルを配置する側を選択することもできます。

<div class = "list">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h3>Avatar</h3>
   </div>

   <div class = "item item-thumbnail-left">
      <img src = "my-image.png">
      <h3>Thumbnail</h3>
   </div>
</div>

上記のコードは次の画面を生成します-

モバイルデバイスは画面サイズが小さいため、カードはユーザーフレンドリーな情報を表示するための最良の要素の1つです。前の章では、リストを挿入する方法について説明しました。カードは挿入リストに非常に似ていますが、より大きなリストのパフォーマンスに影響を与える可能性のある追加のシャドウイングを提供します。

カードの追加

デフォルトのカードは、を追加することで作成できます cardあなたの要素へのクラス。カードは通常、リストとして形成されます。itemクラス。最も便利なクラスの1つはitem-text-wrap。これは、テキストが多すぎる場合に役立ちます。そのため、テキストをカード内にラップする必要があります。次の例の最初のカードには、item-text-wrap クラスが割り当てられましたが、2番目はそれを使用しています。

<div class = "card">
   <div class = "item">
      This is a Ionic card without item-text-wrap class.
   </div>
   
   <div class = "item item-text-wrap">
      This is a Ionic card with item-text-wrap class.
   </div>
</div>

上記のコードは次の画面を生成します-

カードヘッダーとフッター

前の章では、の使用方法についてすでに説明しました。 item-dividerリストをグループ化するためのクラス。このクラスは、カードを操作してカードヘッダーを作成するときに非常に役立ちます。次のコードに示すように、同じクラスをフッターに使用できます。

<div class = "card list">
   <div class = "item item-divider">
      Card header
   </div>
   
   <div class = "item item-text-wrap">
      Card text...
   </div>
   
   <div class = "item item-divider">
      Card Footer
   </div>
</div>

上記のコードは次の画面を生成します-

完全なカード

カードの上に任意の要素を追加できます。次の例では、の使用方法を示します。full-image 一緒にクラス item-body カード内に見栄えの良いウィンドウ画像を取得します。

<div class = "card">
   <div class = "item item-avatar">
      <img src = "my-image.png">
      <h2>Card Name</h2>
   </div>

   <div class = "item item-body">
      <img class = "full-image" src = "my-image.png">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget 
      pharetra tortor. Proin quis eros imperdiet, facilisis nisi in, tincidunt orci. 
      Nam tristique elit massa, quis faucibus augue finibus ac.
   </div>
</div>

上記のコードは次の画面を生成します-

Ionic forms主にユーザーとのやり取りや必要な情報の収集に使用されます。この章では、さまざまなテキスト入力フォームについて説明し、後続の章では、Ionicフレームワークを使用して他のフォーム要素を使用する方法について説明します。

入力フォームの使用

フォームを使用する最良の方法は、 list そして itemあなたのメインクラスとして。通常、アプリは複数のフォーム要素で構成されるため、リストとして整理するのが理にかなっています。次の例では、item要素がlabel 鬼ごっこ。

他の要素を使用することもできますが、ラベルを使用すると、要素の任意の部分をタップしてテキスト入力に焦点を合わせることができます。あなたは設定することができますplaceholder入力テキストとは異なって見え、入力を開始するとすぐに非表示になります。これは、以下の例で確認できます。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

上記のコードは次の画面を生成します-

イオンラベル

Ionicは、ラベルに他のいくつかのオプションを提供しています。あなたは使用することができますinput-label クラス。テキストを入力するときにプレースホルダーを左側にしたい場合。

<div class = "list">
   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input">
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

上記のコードは次の画面を生成します-

積み上げラベル

Stacked label入力の上または下にラベルを移動できるようにするもう1つのオプションです。これを実現するために、item-stacked-label クラスをlabel要素に割り当て、新しい要素を作成してを割り当てる必要があります input-labelそれにクラス。一番上にしたい場合は、この要素を前に追加するだけです。input鬼ごっこ。これを次の例に示します。

に注意してください span タグは前にあります input鬼ごっこ。場所を変更すると、画面の下に表示されます。

<div class = "list">
   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-stacked-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

上記のコードは次の画面を生成します-

フローティングラベル

Floating labels使用できる3番目のオプションです。これらのラベルは、入力を開始する前に非表示になります。タイピングが始まるとすぐに、要素の上に浮かぶアニメーションで表示されます。スタックラベルを使用したのと同じ方法でフローティングラベルを使用できます。唯一の違いは、今回は使用することですitem-floating-label クラス。

<div class = "list">
   <label class = "item item-input item-floating-label">
      <span class = "input-label"t>Label 1</span>
      <input type = "text" placeholder = "Placeholder 1" />
   </label>

   <label class = "item item-input item-floating-label">
      <span class = "input-label">Label 2</span>
      <input type = "text" placeholder = "Placeholder 2" />
   </label>
</div>

上記のコードは次の画面を生成します-

はめ込み入力

前の章では、イオン要素を挿入する方法について説明しました。を追加して入力を挿入することもできますitem-input-inset あなたのアイテムへのクラスと item-input-wrapperあなたのレーベルに。ラッパーは、ラベルにスタイルを追加します。

ラベルの横に他の要素を追加すると、ラベルのサイズは新しい要素に合わせて調整されます。ラベル内に要素（通常はアイコン）を追加することもできます。

次の例は、2つの挿入入力を示しています。1つ目はラベルの横にボタンがあり、2つ目はその中にアイコンがあります。使用しましたplaceholder-iconプレースホルダーテキストと同じ色のアイコンを作成するクラス。これがないと、アイコンはラベルの色を使用します。

<div class = "list">
   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">		
         <input type = "text" placeholder = "Placeholder 1" />
      </label>
      <button class = "button">button</button>
   </div>

   <div class = "item item-input-inset">
      <label class = "item item-input-wrapper">
         <i class = "icon ion-edit placeholder-icon"></i>
         <input type = "text" placeholder = "Placeholder 2" />
      </label>
   </div>
</div>

上記のコードは次の画面を生成します-

ユーザーが利用できるオプションが2つある場合があります。この状況を処理する最も効率的な方法は、トグルフォームを使用することです。Ionicは、アニメーション化されて実装が簡単なトグル要素のクラスを提供します。

トグルの使用

Toggleは、2つのIonicクラスを使用して実装できます。まず、作成する必要がありますlabel 前の章で説明したのと同じ理由で、 toggle それにクラス。

私たちのラベルの中に作成されます 。次の例では、さらに2つのイオンクラスが使用されています。ザ・trackトグルがタップされると、クラスはチェックボックスとカラーアニメーションに背景スタイルを追加します。ザ・handle クラスは、それに円ボタンを追加するために使用されます。

次の例は、2つのトグルフォームを示しています。最初のものはチェックされ、2番目のものはチェックされません。

<label class = "toggle">
   <input type = "checkbox" />
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

<br>

<label class = "toggle">
   <input type = "checkbox" />
   <div class = "track">
      <div class = "handle"></div>
   </div>
</label>

上記のコードは次の画面を生成します-

複数のトグル

Ionicで同じ種類の要素を複数追加する場合、ほとんどの場合、リストアイテムを使用するのが最善の方法です。複数のトグルに使用されるクラスはitem-toggle。次の例は、トグルのリストを作成する方法を示しています。最初のものと2番目のものがチェックされます。

<ul class = "list">
   <li class = "item item-toggle">
      Toggle 1
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 2
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 3
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle 4
      <label class = "toggle">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

上記のコードは次の画面を生成します-

スタイリングトグル

すべてのイオンカラークラスをトグル要素に適用できます。プレフィックスはtoggle。これをに適用しますlabel素子。次の例は、適用されるすべての色を示しています。

<ul class = "list">
   <li class = "item item-toggle">
      Toggle Light
      <label class = "toggle  toggle-light">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Stable
      <label class = "toggle toggle-stable">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Positive
      <label class = "toggle toggle-positive">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Calm
      <label class = "toggle toggle-calm">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Balanced
      <label class = "toggle toggle-balanced">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Energized
      <label class = "toggle toggle-energized">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Assertive
      <label class = "toggle toggle-assertive">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Royal
      <label class = "toggle  toggle-royal">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>

   <li class = "item item-toggle">
      Toggle Dark
      <label class = "toggle toggle-dark">
         <input type = "checkbox" />
         <div class = "track">
            <div class = "handle"></div>
         </div>
      </label>
   </li>
</ul>

上記のコードは次の画面を生成します-

Ionic checkboxトグルとほぼ同じです。これら2つのスタイルは異なりますが、同じ目的で使用されます。

チェックボックスの追加

チェックボックスフォームを作成するときは、を追加する必要があります checkboxラベルと入力要素の両方のクラス名。次の例は、2つの簡単なチェックボックスを示しています。1つはチェックされており、もう1つはチェックされていません。

<label class = "checkbox">
   <input type = "checkbox">
</label>

<label class = "checkbox">
   <input type = "checkbox">
</label>

上記のコードは次の画面を生成します-

複数のチェックボックス

すでに示したように、リストは複数の要素に使用されます。今、私たちは使用しますitem-checkbox 各リストアイテムのクラス。

<ul class = "list">
   <li class = "item item-checkbox">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox e
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>
</ul>

上記のコードは次の画面を生成します-

スタイリングチェックボックス

チェックボックスのスタイルを設定する場合は、Ionicカラークラスを適用する必要があります。 checkboxプレフィックス。次の例をチェックして、どのように見えるかを確認してください。この例では、チェックボックスのリストを使用します。

<ul class = "list">
   <li class = "item item-checkbox checkbox-light">
      Checkbox 1
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox checkbox-stable">
      Checkbox 2
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-positive">
      Checkbox 3
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-calm">
      Checkbox 4
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-balanced">
      Checkbox 5
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-energized">
      Checkbox 6
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-assertive">
      Checkbox 7
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-royal">
      Checkbox 8
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>

   <li class = "item item-checkbox  checkbox-dark">
      Checkbox 9
      <label class = "checkbox">
         <input type = "checkbox" />
      </label>
   </li>
</ul>

上記のコードは次の画面を生成します-

Radio buttonsこれは、この章で説明する要素の別の形式です。トグルフォームとチェックボックスフォームのラジオボタンの違いは、前者を使用する場合、リストからラジオボタンを1つだけ選択することです。後者では、複数を選択できます。

ラジオボタンの追加

選択できるラジオボタンは常に複数あるため、リストを作成するのが最善の方法です。複数の要素が必要なときはいつでもこれを行いました。リストアイテムクラスはitem-radio。繰り返しますが、labelこれは、他のすべてのフォームで使用したためです。入力にはname属性。この属性は、可能な選択肢として使用するすべてのボタンをグループ化します。ザ・item-contentクラスは、オプションを明確に表示するために使用されます。最後に、radio-icon ユーザーが選択したオプションをマークするために使用されるチェックマークアイコンを追加するクラス。

次の例では、4つのラジオボタンがあり、2番目のボタンが選択されています。

<div class = "list">
   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

上記のコードは次の画面を生成します-

複数のラジオボタングループ

複数のグループを作成したい場合があります。これは何ですかname属性は;のために作られています。次の例では、最初の2つのボタンと最後の2つのボタンを2つのオプショングループとしてグループ化します。

を使用します item-divider2つのグループを分離するクラス。最初のグループにはname 等しい属性 group1 そして2番目のものは使用します group2。

<div class = "list">
   <div class = " item item-divider">
      Group1
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 1
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group1" />
      <div class = "item-content">
         Choice 2
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <div class = "item item-divider">
      Group2
   </div>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 3
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>

   <label class = "item item-radio">
      <input type = "radio" name = "group2" />
      <div class = "item-content">
         Choice 4
      </div>
      <i class = "radio-icon ion-checkmark"></i>
   </label>
</div>

上記のコードは次の画面を生成します-

イオン範囲は、何かのレベルを選択して表示するために使用されます。これは、最大値と最小値との相関関係で実際の値を表します。Ionicは、Rangeを操作する簡単な方法を提供します。

範囲の使用

範囲は、内部アイテム要素として使用されます。使用されるクラスはrange。このクラスは、itemクラス。これにより、範囲が配置されるコンテナが準備されます。コンテナを作成したら、追加する必要がありますinput を割り当てます range それに入力し、 name 属性も。

<div class = "item range">
   <input type = "range" name = "range1">
</div>

上記のコードは次の画面を生成します-

アイコンの追加

範囲には通常、データを明確に表示するためのアイコンが必要です。範囲要素の両側に配置するには、範囲入力の前後にアイコンを追加する必要があります。

<div class = "item range">
   <i class = "icon ion-volume-low"></i>
   <input type = "range" name = "volume">
   <i class = "icon ion-volume-high"></i>
</div>

上記のコードは次の画面を生成します-

スタイリング範囲

次の例では、範囲をイオン色でスタイル設定する方法を示します。カラークラスはrangeプレフィックス。9つの範囲でリストを作成し、スタイルを変えます。

<div class = "list">
   <div class = "item range range-light">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-stable">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-positive">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-calm">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-balanced">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-energized">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-assertive">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-royal">
      <input type = "range" name = "volume">
   </div>
	
   <div class = "item range range-dark">
      <input type = "range" name = "volume">
   </div>
</div>

上記のコードは次の画面を生成します-

Ionic Selectユーザーが選択できる選択オプションを備えたシンプルなメニューを作成します。この選択メニューは、スタイルがブラウザによって処理されるため、プラットフォームによって外観が異なります。

Selectの使用

まず、作成します label を追加します item-input そしてその item-selectクラス。2番目のクラスでは、選択フォームにスタイルを追加してから、input-labelその中のクラスは、select要素に名前を追加するために使用されます。また、追加しますselect と option内部。これは通常のHTML5選択要素です。次の例は、3つのオプションを備えたIonicSelectを示しています。

<label class = "item item-input item-select">
   <div class = "input-label">
      Select
   </div>
	
   <select>
      <option>Option 1</option>
      <option selected>Option 2</option>
      <option>Option 3</option>
   </select>
</label>

上記のコードは次の画面を生成します-

スタイリングセレクト

次の例は、スタイルを適用して選択する方法を示しています。イオンカラーを使用して、9つの異なるスタイルの選択要素を含むリストを作成しています。アイテム付きのリストを使用しているので、item カラークラスのプレフィックスになります。

<div class = "list">
   <label class = "item item-input item-select item-light">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-stable">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-positive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-calm">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-balanced">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-energized">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-assertive">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-royal">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>

   <label class = "item item-input item-select item-dark">
      <div class = "input-label">
         Select
      </div>
		
      <select>
         <option>Option 1</option>
         <option selected>Option 2</option>
         <option>Option 3</option>
      </select>
   </label>
</div>

上記のコードは次の画面を生成します-

Ionic tabsほとんどの場合、モバイルナビゲーションに使用されます。スタイリングは、さまざまなプラットフォーム向けに最適化されています。これは、Androidデバイスではタブが画面の上部に配置され、IOSではタブが下部に配置されることを意味します。タブを作成するにはさまざまな方法があります。この章では、タブの作成方法について詳しく説明します。

シンプルなタブ

シンプルなタブメニューは、 tabsクラス。このクラスを使用している内部要素については、追加する必要がありますtab-item要素。通常、タブはナビゲーションに使用されるため、<a>タブアイテムのタグ。次の例は、4つのタブがあるメニューを示しています。

<div class = "tabs">
   <a class = "tab-item">
      Tab 1
   </a>
	
   <a class = "tab-item">
      Tab 2
   </a>

   <a class = "tab-item">
      Tab 3
   </a>
</div>

上記のコードは次の画面を生成します-

アイコンの追加

Ionicは、タブにアイコンを追加するためのクラスを提供します。タブにテキストなしのアイコンを表示する場合は、tabs-icon-only クラスは、の後に追加する必要があります tabsクラス。もちろん、表示したいアイコンを追加する必要があります。

<div class = "tabs tabs-icon-only">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
   </a>
</div>

上記のコードは次の画面を生成します-

アイコンとテキストを一緒に追加することもできます。ザ・tabs-icon-top そして tabs-icon-leftアイコンをそれぞれ上または左側に配置するクラスです。実装は上記の例と同じですが、使用する新しいクラスとテキストを追加するだけです。次の例は、テキストの上に配置されたアイコンを示しています。

<div class = "tabs tabs-icon-top">
   <a class = "tab-item">
      <i class = "icon ion-home"></i>
      Tab 1
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-star"></i>
      Tab 2
   </a>
	
   <a class = "tab-item">
      <i class = "icon ion-planet"></i>
      Tab 3
   </a>
</div>

上記のコードは次の画面を生成します-

縞模様のタブ

ストライプタブは、タブの周りにコンテナを追加することで作成できます。 tabs-stripedクラス。このクラスでは、tabs-background そしてその tabs-color タブメニューにいくつかのイオン色を追加するための接頭辞。

次の例では、 tabs-background-positive （青）メニューの背景をスタイルするクラス、および tabs-color-light（白）タブアイコンのスタイルを設定するクラス。アクティブな2番目のタブとアクティブでない他の2つのタブの違いに注意してください。

<div class = "tabs-striped tabs-background-positive tabs-color-light">
   <div class = "tabs">
      <a class = "tab-item">
         <i class = "icon ion-home"></i>
      </a>
		
      <a class = "tab-item active">
         <i class = "icon ion-star"></i>
      </a>
		
      <a class = "tab-item">
         <i class = "icon ion-planet"></i>
      </a>
   </div>
</div>

上記のコードは次の画面を生成します-

での作業 Ionic Grid System簡単です。2つの主要なクラスがあります–row 行を操作するため col 列用。

必要な数の列または行を選択できます。必要に応じてこの動作を変更できますが、それらはすべて、使用可能なスペースに合わせてサイズを調整します。

NOTE −このチュートリアルのすべての例では、グリッドに境界線を適用して、わかりやすい方法でグリッドを表示できるようにします。

シンプルグリッド

次の例は、の使用方法を示しています。 col そしてその rowクラス。2つの行を作成します。最初の行には5つの列があり、2番目の行には3つしかありません。1行目と2行目で列の幅がどのように異なるかに注目してください。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

上記のコードは次の画面を生成します-

列サイズ

列サイズを自動的に割り当てたままにしたくない場合があります。この場合、あなたは選択することができますcol 接頭辞の後に、パーセンテージを表す数字が続きます row幅。これは、特定のサイズが適用されている列にのみ適用されます。他の列は、残っている使用可能なスペースに合わせて調整されます。

次の例では、最初の列は全幅の50％を使用し、他の列はそれに応じて調整されます。

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-50">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

上記のコードは次の画面を生成します-

次の表は、イオングリッドシステムが提供する利用可能なパーセンテージオプションを示しています-

列のパーセンテージクラス名

クラス名	使用率
col-10	10％
col-20	20％
col-25	25％
col-33	33.3333％
col-50	50％
col-67	66.6666％
col-75	75％
col-80	80％
col-90	90％

水平および垂直配置

列は左からオフセットできます。これは、列の特定のサイズに対して同じように機能します。今回のプレフィックスはcol-offset次に、上の表に示されているのと同じパーセンテージの数値を使用します。次の例は、両方の行の2番目の列を25パーセントオフセットする方法を示しています。

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col">col 1</div>
   <div class = "col col-offset-25">col 2</div>
   <div class = "col">col 3</div>
</div>

上記のコードは次の画面を生成します-

行内の列を垂直方向に揃えることもできます。使用できるクラスは3つあります。つまり–top、 center そしてその bottom とのクラス colプレフィックス。次のコードは、両方の行の最初の3列を垂直に配置する方法を示しています。

NOTE −次の例では、 “.col {height: 120px}” 私たちのCSSに、列の垂直配置を表示します。

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row">
   <div class = "col col-top">col 1</div>
   <div class = "col col-center">col 2</div>
   <div class = "col col-bottom">col 3</div>
</div>

上記のコードは次の画面を生成します-

レスポンシブグリッド

Ionic Gridは、レスポンシブレイアウトにも使用できます。利用可能な3つのクラスがあります。ザ・responsive-smビューポートが横向きの電話よりも小さい場合、クラスは列を1つの行に折りたたみます。ザ・responsive-mdビューポートがポートレートタブレットよりも小さい場合、クラスが適用されます。ザ・responsive-lg ビューポートが横向きのタブレットよりも小さい場合、クラスが適用されます。

次の例の後の最初の画像は、 responsive-sm クラスはモバイルデバイスで表示され、2番目のクラスは同じレスポンシブグリッドがタブレットデバイスでどのように異なるかを示します。

<div class = "row responsive-sm">
   <div class = "col col-25">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
   <div class = "col">col 4</div>
   <div class = "col">col 5</div>
</div>

<div class = "row responsive-sm">
   <div class = "col">col 1</div>
   <div class = "col">col 2</div>
   <div class = "col">col 3</div>
</div>

モバイルグリッドビュー

タブレットグリッドビュー

以上のものがあります 700 premium iconsIonicによって提供されます。AndroidとIOS用に提供されているアイコンの異なるセットもあります。必要なものはほとんど何でも見つけることができますが、使用したくない場合は、それらを使用する必要はありません。代わりに、独自のカスタムアイコンまたはその他のアイコンセットを使用できます。ここですべてのイオンアイコンを確認できます。

アイコンの使い方は？

Ionicアイコンを使用する場合は、ページで必要なアイコンを見つけてください（https://ionicons.com/）。Ionic要素を追加するときは、常に最初にメインクラスを追加してから、必要なサブクラスを追加します。すべてのアイコンのメインクラスはicon。サブクラスは、必要なアイコンの名前です。以下に示す例では、6つのアイコンを追加します-

<i class = "icon icon ion-happy-outline"></i>
<i class = "icon icon ion-star"></i>
<i class = "icon icon ion-compass"></i>
<i class = "icon icon ion-planet"></i>
<i class = "icon icon ion-ios-analytics"></i>
<i class = "icon icon ion-ios-eye"></i>

上記のコードは次の画面を生成します-

これらのアイコンのサイズは、 font-size IonicCSSファイルのプロパティ。

.icon {
   font-size: 50px;
}

アイコンサイズを設定すると、同じコードで次のスクリーンショットが出力として生成されます-

デフォルトのアイコン

コード	結果
<i class = "icon ion-ionic"> </ i>
<i class = "icon ion-arrow-up-a"> </ i>
<i class = "icon ion-arrow-right-a"> </ i>
<i class = "icon ion-arrow-down-a"> </ i>
<i class = "icon ion-arrow-left-a"> </ i>
<i class = "icon ion-arrow-up-b"> </ i>
<i class = "icon ion-arrow-right-b"> </ i>
<i class = "icon ion-arrow-down-b"> </ i>
<i class = "icon ion-arrow-left-b"> </ i>
<i class = "icon ion-arrow-up-c"> </ i>
<i class = "icon ion-arrow-right-c"> </ i>
<i class = "icon ion-arrow-down-c"> </ i>
<i class = "icon ion-arrow-left-c"> </ i>
<i class = "iconion-arrow-return-right"> </ i>
<i class = "iconion-arrow-return-left"> </ i>
<i class = "icon ion-arrow-swap"> </ i>
<i class = "icon ion-arrow-shrink"> </ i>
<i class = "icon ion-arrow-expand"> </ i>
<i class = "icon ion-arrow-move"> </ i>
<i class = "icon ion-arrow-resize"> </ i>
<i class = "icon ion-chevron-up"> </ i>
<i class = "icon ion-chevron-right"> </ i>
<i class = "icon ion-chevron-down"> </ i>
<i class = "icon ion-chevron-left"> </ i>
<i class = "icon ion-navicon-round">​​ </ i>
<i class = "icon ion-navicon"> </ i>
<i class = "icon ion-drag"> </ i>
<i class = "icon ion-log-in"> </ i>
<i class = "icon ion-log-out"> </ i>
<i class = "icon ion-checkmark-round">​​ </ i>
<i class = "icon ion-checkmark"> </ i>
<i class = "icon ion-checkmark-circled"> </ i>
<i class = "icon ion-close-round">​​ </ i>
<i class = "icon ion-close"> </ i>
<i class = "icon ion-close-circled"> </ i>
<i class = "icon ion-plus-round">​​ </ i>
<i class = "icon ion-plus"> </ i>
<i class = "icon ion-plus-circled"> </ i>
<i class = "icon ion-minus-round">​​ </ i>
<i class = "icon ion-minus"> </ i>
<i class = "icon ion-minus-circled"> </ i>
<i class = "icon ion-information"> </ i>
<i class = "icon ion-informaticon ion-circled"> </ i>
<i class = "icon ion-help"> </ i>
<i class = "icon ion-help-circled"> </ i>
<i class = "icon ion-backspace-outline"> </ i>
<i class = "icon ion-backspace"> </ i>
<i class = "icon ion-help-buoy"> </ i>
<i class = "icon ion-asterisk"> </ i>
<i class = "icon ion-alert"> </ i>
<i class = "icon ion-alert-circled"> </ i>
<i class = "icon ion-refresh"> </ i>
<i class = "icon ion-loop"> </ i>
<i class = "icon ion-shuffle"> </ i>
<i class = "icon ion-home"> </ i>
<i class = "icon ion-search"> </ i>
<i class = "icon ion-flag"> </ i>
<i class = "icon ion-star"> </ i>
<i class = "icon ion-heart"> </ i>
<i class = "icon ion-heart-broken"> </ i>
<i class = "icon ion-gear-a"> </ i>
<i class = "icon ion-gear-b"> </ i>
<i class = "icon ion-toggle-filled"> </ i>
<i class = "icon ion-toggle"> </ i>
<i class = "icon ion-settings"> </ i>
<i class = "iconion-wrench"> </ i>
<i class = "icon ion-hammer"> </ i>
<i class = "icon ion-edit"> </ i>
<i class = "icon ion-trash-a"> </ i>
<i class = "icon ion-trash-b"> </ i>
<i class = "icon ion-document"> </ i>
<i class = "icon ion-document-text"> </ i>
<i class = "icon ion-clipboard"> </ i>
<i class = "icon ion-scissors"> </ i>
<i class = "icon ion-funnel"> </ i>
<i class = "icon ion-bookmark"> </ i>
<i class = "icon ion-email"> </ i>
<i class = "icon ion-email-unread"> </ i>
<i class = "icon ion-folder"> </ i>
<i class = "icon ion-filing"> </ i>
<i class = "icon ion-archive"> </ i>
<i class = "icon ion-reply"> </ i>
<i class = "icon ion-reply-all"> </ i>
<i class = "icon ion-forward"> </ i>
<i class = "icon ion-share"> </ i>
<i class = "icon ion-paper-airplane"> </ i>
<i class = "icon ion-link"> </ i>
<i class = "icon ion-paperclip"> </ i>
<i class = "icon ion-compose"> </ i>
<i class = "icon ion-briefcase"> </ i>
<i class = "icon ion-medkit"> </ i>
<i class = "icon ion-at"> </ i>
<i class = "icon ion-pound">​​ </ i>
<i class = "icon ion-quote"> </ i>
<i class = "icon ion-cloud"> </ i>
<i class = "icon ion-upload"> </ i>
<i class = "icon ion-more"> </ i>
<i class = "icon ion-grid"> </ i>
<i class = "icon ion-calendar"> </ i>
<i class = "icon ion-clock"> </ i>
<i class = "icon ion-compass"> </ i>
<i class = "icon ion-pinpoint"> </ i>
<i class = "icon ion-pin"> </ i>
<i class = "icon ion-navigate"> </ i>
<i class = "icon ion-location"> </ i>
<i class = "icon ion-map"> </ i>
<i class = "icon ion-lock-combination"> </ i>
<i class = "icon ion-locked"> </ i>
<i class = "icon ion-unlocked"> </ i>
<i class = "iconion-key"> </ i>
<i class = "iconion-arrow-graph-up​​-right"> </ i>
<i class = "iconion-arrow-graph-down-right"> </ i>
<i class = "iconion-arrow-graph-up​​-left"> </ i>
<i class = "iconion-arrow-graph-down-left"> </ i>
<i class = "icon ion-stats-bars"> </ i>
<i class = "icon ion-connecticonion-bars"> </ i>
<i class = "icon ion-pie-graph"> </ i>
<i class = "icon ion-chatbubble"> </ i>
<i class = "icon ion-chatbubble-working"> </ i>
<i class = "icon ion-chatbubbles"> </ i>
<i class = "icon ion-chatbox"> </ i>
<i class = "icon ion-chatbox-working"> </ i>
<i class = "icon ion-chatboxes"> </ i>
<i class = "icon ion-person"> </ i>
<i class = "icon ion-person-add"> </ i>
<i class = "icon ion-person-stalker"> </ i>
<i class = "icon ion-woman"> </ i>
<i class = "icon ion-man"> </ i>
<i class = "icon ion-female"> </ i>
<i class = "icon ion-male"> </ i>
<i class = "icon ion-transgender"> </ i>
<i class = "icon ion-fork"> </ i>
<i class = "icon ion-knife"> </ i>
<i class = "icon ion-spoon"> </ i>
<i class = "icon ion-soup-can-outline"> </ i>
<i class = "icon ion-soup-can"> </ i>
<i class = "icon ion-beer"> </ i>
<i class = "icon ion-wineglass"> </ i>
<i class = "iconion-coffee"> </ i>
<i class = "iconion-icecream"> </ i>
<i class = "iconion-pizza"> </ i>
<i class = "icon ion-power"> </ i>
<i class = "icon ion-mouse"> </ i>
<i class = "icon ion-battery-full"> </ i>
<i class = "icon ion-battery-half"> </ i>
<i class = "icon ion-battery-low"> </ i>
<i class = "icon ion-battery-empty"> </ i>
<i class = "icon ion-battery-chargeing"> </ i>
<i class = "icon ion-wifi"> </ i>
<i class = "icon ion-bluetooth"> </ i>
<i class = "icon ion-calculator"> </ i>
<i class = "icon ion-camera"> </ i>
<i class = "icon ion-eye"> </ i>
<i class = "icon ion-eye-disabled"> </ i>
<i class = "icon ion-flash"> </ i>
<i class = "icon ion-flash-off"> </ i>
<i class = "icon ion-qr-scanner"> </ i>
<i class = "icon ion-image"> </ i>
<i class = "icon ion-images"> </ i>
<i class = "icon ion-wand"> </ i>
<i class = "icon ion-contrast"> </ i>
<i class = "icon ion-aperture"> </ i>
<i class = "icon ion-crop"> </ i>
<i class = "icon ion-easel"> </ i>
<i class = "icon ion-paintbrush"> </ i>
<i class = "icon ion-paintbucket"> </ i>
<i class = "icon ion-monitor"> </ i>
<i class = "icon ion-laptop"> </ i>
<i class = "icon ion-ipad"> </ i>
<i class = "icon ion-iphone"> </ i>
<i class = "icon ion-ipod"> </ i>
<i class = "icon ion-printer"> </ i>
<i class = "icon ion-usb"> </ i>
<i class = "icon ion-outlet"> </ i>
<i class = "icon ion-bug"> </ i>
<i class = "icon ion-code"> </ i>
<i class = "icon ion-code-working"> </ i>
<i class = "icon ion-code-download"> </ i>
<i class = "icon ion-fork-repo"> </ i>
<i class = "icon ion-network"> </ i>
<i class = "icon ion-pull-request"> </ i>
<i class = "icon ion-merge"> </ i>
<i class = "icon ion-xbox"> </ i>
<i class = "icon ion-playstation"> </ i>
<i class = "icon ion-steam"> </ i>
<i class = "icon ion-closed-captioning"> </ i>
<i class = "icon ion-videocamera"> </ i>
<i class = "icon ion-film-marker"> </ i>
<i class = "icon ion-disc"> </ i>
<i class = "icon ion-headphone"> </ i>
<i class = "icon ion-music-note"> </ i>
<i class = "icon ion-radio-waves"> </ i>
<i class = "icon ion-speakerphone"> </ i>
<i class = "icon ion-mic-a"> </ i>
<i class = "icon ion-mic-b"> </ i>
<i class = "icon ion-mic-c"> </ i>
<i class = "icon ion-volume-high"> </ i>
<i class = "icon ion-volume-medium"> </ i>
<i class = "icon ion-volume-low"> </ i>
<i class = "icon ion-volume-mute"> </ i>
<i class = "icon ion-levels"> </ i>
<i class = "icon ion-play"> </ i>
<i class = "icon ion-pause"> </ i>
<i class = "icon ion-stop"> </ i>
<i class = "icon ion-record"> </ i>
<i class = "icon ion-skip-forward"> </ i>
<i class = "icon ion-skip-backward"> </ i>
<i class = "icon ion-eject"> </ i>
<i class = "icon ion-bag"> </ i>
<i class = "iconion-card"> </ i>
<i class = "icon ion-cash"> </ i>
<i class = "icon ion-pricetag"> </ i>
<i class = "icon ion-pricetags"> </ i>
<i class = "icon ion-thumbsup"> </ i>
<i class = "icon ion-thumbsdown"> </ i>
<i class = "icon ion-happy-outline"> </ i>
<i class = "icon ion-happy"> </ i>
<i class = "icon ion-sad-outline"> </ i>
<i class = "icon ion-sad"> </ i>
<i class = "icon ion-bowtie"> </ i>
<i class = "iconion-tshirt-outline"> </ i>
<i class = "iconion-tshirt"> </ i>
<i class = "icon ion-trophy"> </ i>
<i class = "icon ion-podium"> </ i>
<i class = "icon ion-ribbon-a"> </ i>
<i class = "icon ion-ribbon-b"> </ i>
<i class = "icon ion-university"> </ i>
<i class = "icon ion-magnet"> </ i>
<i class = "icon ion-beaker"> </ i>
<i class = "iconion-erlenmeyer-flask"> </ i>
<i class = "icon ion-egg"> </ i>
<i class = "icon ion-earth"> </ i>
<i class = "icon ion-planet"> </ i>
<i class = "icon ion-lightbulb"> </ i>
<i class = "icon ion-cube"> </ i>
<i class = "icon ion-leaf"> </ i>
<i class = "icon ion-waterdrop"> </ i>
<i class = "icon ion-flame"> </ i>
<i class = "icon ion-fireball"> </ i>
<i class = "icon ion-bonfire"> </ i>
<i class = "icon ion-umbrella"> </ i>
<i class = "icon ion-nuclear"> </ i>
<i class = "iconion-no-smoking"> </ i>
<i class = "icon ion-thermometer"> </ i>
<i class = "icon ion-speedometer"> </ i>
<i class = "icon ion-model-s"> </ i>
<i class = "icon ion-plane"> </ i>
<i class = "iconion-jet"> </ i>
<i class = "icon ion-load-a"> </ i>
<i class = "icon ion-load-b"> </ i>
<i class = "icon ion-load-c"> </ i>
<i class = "icon ion-load-d"> </ i>

iOSスタイルのアイコン

コード	結果
<i class = "icon ion-ios-ionic-outline"> </ i>
<i class = "icon ion-ios-arrow-back"> </ i>
<i class = "icon ion-ios-arrow-forward"> </ i>
<i class = "icon ion-ios-arrow-up"> </ i>
<i class = "iconion-ios-arrow-right"> </ i>
<i class = "icon ion-ios-arrow-down"> </ i>
<i class = "iconion-ios-arrow-left"> </ i>
<i class = "icon ion-ios-arrow-thin-up"> </ i>
<i class = "iconion-ios-arrow-thin-right"> </ i>
<i class = "icon ion-ios-arrow-thin-down"> </ i>
<i class = "iconion-ios-arrow-thin-left"> </ i>
<i class = "icon ion-ios-circle-filled"> </ i>
<i class = "icon ion-ios-circle-outline"> </ i>
<i class = "iconion-ios-checkmark-empty"> </ i>
<i class = "icon ion-ios-checkmark-outline"> </ i>
<i class = "icon ion-ios-checkmark"> </ i>
<i class = "iconion-ios-plus-empty"> </ i>
<i class = "icon ion-ios-plus-outline"> </ i>
<i class = "icon ion-ios-plus"> </ i>
<i class = "iconion-ios-close-empty"> </ i>
<i class = "icon ion-ios-close-outline"> </ i>
<i class = "icon ion-ios-close"> </ i>
<i class = "iconion-ios-minus-empty"> </ i>
<i class = "icon ion-ios-minus-outline"> </ i>
<i class = "icon ion-ios-minus"> </ i>
<i class = "icon ion-ios-informaticonion-empty"> </ i>
<i class = "icon ion-ios-informaticonion-outline"> </ i>
<i class = "icon ion-ios-information"> </ i>
<i class = "iconion-ios-help-empty"> </ i>
<i class = "icon ion-ios-help-outline"> </ i>
<i class = "icon ion-ios-help"> </ i>
<i class = "icon ion-ios-search"> </ i>
<i class = "icon ion-ios-search-strong"> </ i>
<i class = "icon ion-ios-star"> </ i>
<i class = "icon ion-ios-star-half"> </ i>
<i class = "icon ion-ios-star-outline"> </ i>
<i class = "icon ion-ios-heart"> </ i>
<i class = "icon ion-ios-heart-outline"> </ i>
<i class = "icon ion-ios-more"> </ i>
<i class = "icon ion-ios-more-outline"> </ i>
<i class = "icon ion-ios-home"> </ i>
<i class = "icon ion-ios-home-outline"> </ i>
<i class = "icon ion-ios-cloud"> </ i>
<i class = "icon ion-ios-cloud-outline"> </ i>
<i class = "icon ion-ios-cloud-upload"> </ i>
<i class = "iconion-ios-cloud-upload-outline"> </ i>
<i class = "iconion-ios-cloud-download"> </ i>
<i class = "iconion-ios-cloud-download-outline"> </ i>
<i class = "icon ion-ios-upload"> </ i>
<i class = "icon ion-ios-upload-outline"> </ i>
<i class = "icon ion-ios-download"> </ i>
<i class = "iconion-ios-download-outline"> </ i>
<i class = "icon ion-ios-refresh"> </ i>
<i class = "icon ion-ios-refresh-outline"> </ i>
<i class = "iconion-ios-refresh-empty"> </ i>
<i class = "icon ion-ios-reload"> </ i>
<i class = "icon ion-ios-loop-strong"> </ i>
<i class = "icon ion-ios-loop"> </ i>
<i class = "icon ion-ios-bookmarks"> </ i>
<i class = "icon ion-ios-bookmarks-outline"> </ i>
<i class = "icon ion-ios-book"> </ i>
<i class = "icon ion-ios-book-outline"> </ i>
<i class = "icon ion-ios-flag"> </ i>
<i class = "icon ion-ios-flag-outline"> </ i>
<i class = "icon ion-ios-glasses"> </ i>
<i class = "icon ion-ios-glasses-outline"> </ i>
<i class = "icon ion-ios-browsers"> </ i>
<i class = "icon ion-ios-browsers-outline"> </ i>
<i class = "icon ion-ios-at"> </ i>
<i class = "icon ion-ios-at-outline"> </ i>
<i class = "icon ion-ios-pricetag"> </ i>
<i class = "iconion-ios-pricetag-outline"> </ i>
<i class = "icon ion-ios-pricetags"> </ i>
<i class = "iconion-ios-pricetags-outline"> </ i>
<i class = "icon ion-ios-cart"> </ i>
<i class = "icon ion-ios-cart-outline"> </ i>
<i class = "icon ion-ios-chatboxes"> </ i>
<i class = "icon ion-ios-chatboxes-outline"> </ i>
<i class = "iconion-ios-chatbubble"> </ i>
<i class = "iconion-ios-chatbubble-outline"> </ i>
<i class = "icon ion-ios-cog"> </ i>
<i class = "icon ion-ios-cog-outline"> </ i>
<i class = "icon ion-ios-gear"> </ i>
<i class = "icon ion-ios-gear-outline"> </ i>
<i class = "icon ion-ios-settings"> </ i>
<i class = "icon ion-ios-settings-strong"> </ i>
<i class = "icon ion-ios-toggle"> </ i>
<i class = "icon ion-ios-toggle-outline"> </ i>
<i class = "icon ion-ios-analytics"> </ i>
<i class = "icon ion-ios-analytics-outline"> </ i>
<i class = "icon ion-ios-pie"> </ i>
<i class = "icon ion-ios-pie-outline"> </ i>
<i class = "icon ion-ios-pulse"> </ i>
<i class = "icon ion-ios-pulse-strong"> </ i>
<i class = "icon ion-ios-filing"> </ i>
<i class = "icon ion-ios-filing-outline"> </ i>
<i class = "icon ion-ios-box"> </ i>
<i class = "icon ion-ios-box-outline"> </ i>
<i class = "icon ion-ios-compose"> </ i>
<i class = "icon ion-ios-compose-outline"> </ i>
<i class = "icon ion-ios-trash"> </ i>
<i class = "icon ion-ios-trash-outline"> </ i>
<i class = "icon ion-ios-copy"> </ i>
<i class = "icon ion-ios-copy-outline"> </ i>
<i class = "icon ion-ios-email"> </ i>
<i class = "icon ion-ios-email-outline"> </ i>
<i class = "icon ion-ios-undo"> </ i>
<i class = "iconion-ios-undo-outline"> </ i>
<i class = "icon ion-ios-redo"> </ i>
<i class = "icon ion-ios-redo-outline"> </ i>
<i class = "icon ion-ios-paperplane"> </ i>
<i class = "iconion-ios-paperplane-outline"> </ i>
<i class = "icon ion-ios-folder"> </ i>
<i class = "icon ion-ios-folder-outline"> </ i>
<i class = "icon ion-ios-paper"> </ i>
<i class = "icon ion-ios-paper-outline"> </ i>
<i class = "icon ion-ios-list"> </ i>
<i class = "icon ion-ios-list-outline"> </ i>
<i class = "icon ion-ios-world"> </ i>
<i class = "icon ion-ios-world-outline"> </ i>
<i class = "icon ion-ios-alarm"> </ i>
<i class = "icon ion-ios-alarm-outline"> </ i>
<i class = "icon ion-ios-speedometer"> </ i>
<i class = "iconion-ios-speedometer-outline"> </ i>
<i class = "icon ion-ios-stopwatch"> </ i>
<i class = "iconion-ios-stopwatch-outline"> </ i>
<i class = "icon ion-ios-timer"> </ i>
<i class = "icon ion-ios-timer-outline"> </ i>
<i class = "icon ion-ios-clock"> </ i>
<i class = "icon ion-ios-clock-outline"> </ i>
<i class = "icon ion-ios-time"> </ i>
<i class = "icon ion-ios-time-outline"> </ i>
<i class = "icon ion-ios-calendar"> </ i>
<i class = "icon ion-ios-calendar-outline"> </ i>
<i class = "icon ion-ios-photos"> </ i>
<i class = "iconion-ios-photos-outline"> </ i>
<i class = "icon ion-ios-albums"> </ i>
<i class = "icon ion-ios-albums-outline"> </ i>
<i class = "icon ion-ios-camera"> </ i>
<i class = "icon ion-ios-camera-outline"> </ i>
<i class = "iconion-ios-reverse-camera"> </ i>
<i class = "iconion-ios-reverse-camera-outline"> </ i>
<i class = "icon ion-ios-eye"> </ i>
<i class = "icon ion-ios-eye-outline"> </ i>
<i class = "icon ion-ios-bolt"> </ i>
<i class = "icon ion-ios-bolt-outline"> </ i>
<i class = "icon ion-ios-color-wand"> </ i>
<i class = "iconion-ios-color-wand-outline"> </ i>
<i class = "iconion-ios-color-filter"> </ i>
<i class = "iconion-ios-color-filter-outline"> </ i>
<i class = "iconion-ios-grid-view"> </ i>
<i class = "iconion-ios-grid-view-outline"> </ i>
<i class = "icon ion-ios-crop-strong"> </ i>
<i class = "icon ion-ios-crop"> </ i>
<i class = "icon ion-ios-barcode"> </ i>
<i class = "icon ion-ios-barcode-outline"> </ i>
<i class = "iconion-ios-briefcase"> </ i>
<i class = "iconion-ios-briefcase-outline"> </ i>
<i class = "icon ion-ios-medkit"> </ i>
<i class = "icon ion-ios-medkit-outline"> </ i>
<i class = "icon ion-ios-medical"> </ i>
<i class = "icon ion-ios-medical-outline"> </ i>
<i class = "icon ion-ios-infinite"> </ i>
<i class = "icon ion-ios-infinite-outline"> </ i>
<i class = "icon ion-ios-calculator"> </ i>
<i class = "icon ion-ios-calculator-outline"> </ i>
<i class = "icon ion-ios-keypad"> </ i>
<i class = "icon ion-ios-keypad-outline"> </ i>
<i class = "icon ion-ios-telephone"> </ i>
<i class = "iconion-ios-telephone-outline"> </ i>
<i class = "icon ion-ios-drag"> </ i>
<i class = "icon ion-ios-location"> </ i>
<i class = "icon ion-ios-locaticon ion-outline"> </ i>
<i class = "icon ion-ios-navigate"> </ i>
<i class = "icon ion-ios-navigate-outline"> </ i>
<i class = "icon ion-ios-locked"> </ i>
<i class = "icon ion-ios-locked-outline"> </ i>
<i class = "icon ion-ios-unlocked"> </ i>
<i class = "icon ion-ios-unlocked-outline"> </ i>
<i class = "icon ion-ios-monitor"> </ i>
<i class = "icon ion-ios-monitor-outline"> </ i>
<i class = "icon ion-ios-printer"> </ i>
<i class = "icon ion-ios-printer-outline"> </ i>
<i class = "iconion-ios-game-controller-a"> </ i>
<i class = "iconion-ios-game-controller-a-outline"> </ i>
<i class = "icon ion-ios-game-controller-b"> </ i>
<i class = "iconion-ios-game-controller-b-outline"> </ i>
<i class = "iconion-ios-americanfootball"> </ i>
<i class = "iconion-ios-americanfootball-outline"> </ i>
<i class = "icon ion-ios-baseball"> </ i>
<i class = "icon ion-ios-baseball-outline"> </ i>
<i class = "icon ion-ios-basketball"> </ i>
<i class = "icon ion-ios-basketball-outline"> </ i＆gtgt;
<i class = "icon ion-ios-tennisball"> </ i>
<i class = "icon ion-ios-tennisball-outline"> </ i>
<i class = "icon ion-ios-football"> </ i>
<i class = "icon ion-ios-football-outline"> </ i>
<i class = "icon ion-ios-body"> </ i>
<i class = "icon ion-ios-body-outline"> </ i>
<i class = "icon ion-ios-person"> </ i>
<i class = "icon ion-ios-person-outline"> </ i>
<i class = "icon ion-ios-personadd"> </ i>
<i class = "icon ion-ios-personadd-outline"> </ i>
<i class = "icon ion-ios-people"> </ i>
<i class = "icon ion-ios-people-outline"> </ i>
<i class = "icon ion-ios-musical-notes"> </ i>
<i class = "icon ion-ios-musical-note"> </ i>
<i class = "icon ion-ios-bell"> </ i>
<i class = "icon ion-ios-bell-outline"> </ i>
<i class = "icon ion-ios-mic"> </ i>
<i class = "icon ion-ios-mic-outline"> </ i>
<i class = "icon ion-ios-mic-off"> </ i>
<i class = "icon ion-ios-volume-high"> </ i>
<i class = "icon ion-ios-volume-low"> </ i>
<i class = "icon ion-ios-play"> </ i>
<i class = "icon ion-ios-play-outline"> </ i>
<i class = "icon ion-ios-pause"> </ i>
<i class = "icon ion-ios-pause-outline"> </ i>
<i class = "icon ion-ios-recording"> </ i>
<i class = "icon ion-ios-recording-outline"> </ i>
<i class = "icon ion-ios-fastforward"> </ i>
<i class = "icon ion-ios-fastforward-outline"> </ i>
<i class = "icon ion-ios-rewind"> </ i>
<i class = "icon ion-ios-rewind-outline"> </ i>
<i class = "icon ion-ios-skipbackward"> </ i>
<i class = "icon ion-ios-skipbackward-outline"> </ i>
<i class = "icon ion-ios-skipforward"> </ i>
<i class = "icon ion-ios-skipforward-outline"> </ i>
<i class = "icon ion-ios-shuffle-strong"> </ i>
<i class = "icon ion-ios-shuffle"> </ i>
<i class = "icon ion-ios-videocam"> </ i>
<i class = "iconion-ios-videocam-outline"> </ i>
<i class = "icon ion-ios-film"> </ i>
<i class = "icon ion-ios-film-outline"> </ i>
<i class = "icon ion-ios-flask"> </ i>
<i class = "icon ion-ios-flask-outline"> </ i>
<i class = "icon ion-ios-lightbulb"> </ i>
<i class = "icon ion-ios-lightbulb-outline"> </ i>
<i class = "iconion-ios-wineglass"> </ i>
<i class = "iconion-ios-wineglass-outline"> </ i>
<i class = "icon ion-ios-pint"> </ i>
<i class = "icon ion-ios-pint-outline"> </ i>
<i class = "icon ion-ios-nutrition"> </ i>
<i class = "icon ion-ios-nutriticonion-outline"> </ i>
<i class = "icon ion-ios-flower"> </ i>
<i class = "icon ion-ios-flower-outline"> </ i>
<i class = "icon ion-ios-rose"> </ i>
<i class = "icon ion-ios-rose-outline"> </ i>
<i class = "icon ion-ios-paw"> </ i>
<i class = "icon ion-ios-paw-outline"> </ i>
<i class = "icon ion-ios-flame"> </ i>
<i class = "icon ion-ios-flame-outline"> </ i>
<i class = "icon ion-ios-sunny"> </ i>
<i class = "icon ion-ios-sunny-outline"> </ i>
<i class = "icon ion-ios-partlysunny"> </ i>
<i class = "icon ion-ios-partlysunny-outline"> </ i>
<i class = "icon ion-ios-cloudy"> </ i>
<i class = "icon ion-ios-cloudy-outline"> </ i>
<i class = "icon ion-ios-rainy"> </ i>
<i class = "icon ion-ios-rainy-outline"> </ i>
<i class = "icon ion-ios-thunderstorm"> </ i>
<i class = "icon ion-ios-thunderstorm-outline"> </ i>
<i class = "icon ion-ios-snowy"> </ i>
<i class = "icon ion-ios-moon"> </ i>
<i class = "icon ion-ios-moon-outline"> </ i>
<i class = "icon ion-ios-cloudy-night"> </ i>
<i class = "iconion-ios-cloudy-night-outline"> </ i>

Androidスタイルのアイコン

コード	結果
<i class = "icon ion-android-arrow-up"> </ i>
<i class = "icon ion-android-arrow-forward"> </ i>
<i class = "icon ion-android-arrow-down"> </ i>
<i class = "icon ion-android-arrow-back"> </ i>
<i class = "icon ion-android-arrow-dropup"> </ i>
<i class = "iconion-android-arrow-dropup-circle"> </ i>
<i class = "icon ion-android-arrow-dropright"> </ i>
<i class = "iconion-android-arrow-dropright-circle"> </ i>
<i class = "icon ion-android-arrow-dropdown"> </ i>
<i class = "iconion-android-arrow-dropdown-circle"> </ i>
<i class = "icon ion-android-arrow-dropleft"> </ i>
<i class = "iconion-android-arrow-dropleft-circle"> </ i>
<i class = "icon ion-android-add"> </ i>
<i class = "icon ion-android-add-circle"> </ i>
<i class = "icon ion-android-remove"> </ i>
<i class = "icon ion-android-remove-circle"> </ i>
<i class = "icon ion-android-close"> </ i>
<i class = "icon ion-android-cancel"> </ i>
<i class = "icon ion-android-radio-button-off"> </ i>
<i class = "icon ion-android-radio-button-on"> </ i>
<i class = "icon ion-android-checkmark-circle"> </ i>
<i class = "icon ion-android-checkbox-outline-blank"> </ i>
<i class = "icon ion-android-checkbox-outline"> </ i>
<i class = "icon ion-android-checkbox-blank"> </ i>
<i class = "icon ion-android-checkbox"> </ i>
<i class = "icon ion-android-done"> </ i>
<i class = "icon ion-android-done-all"> </ i>
<i class = "icon ion-android-menu"> </ i>
<i class = "icon ion-android-more-horizo​​ntal"> </ i>
<i class = "icon ion-android-more-vertical"> </ i>
<i class = "icon ion-android-refresh"> </ i>
<i class = "icon ion-android-sync"> </ i>
<i class = "icon ion-android-wifi"> </ i>
<i class = "icon ion-android-call"> </ i>
<i class = "icon ion-android-apps"> </ i>
<i class = "icon ion-android-settings"> </ i>
<i class = "icon ion-android-options"> </ i>
<i class = "icon ion-android-funnel"> </ i>
<i class = "icon ion-android-search"> </ i>
<i class = "icon ion-android-home"> </ i>
<i class = "icon ion-android-cloud-outline"> </ i>
<i class = "icon ion-android-cloud"> </ i>
<i class = "icon ion-android-download"> </ i>
<i class = "icon ion-android-upload"> </ i>
<i class = "icon ion-android-cloud-done"> </ i>
<i class = "icon ion-android-cloud-circle"> </ i>
<i class = "icon ion-android-favorite-outline"> </ i>
<i class = "icon ion-android-favorite"> </ i>
<i class = "icon ion-android-star-outline"> </ i>
<i class = "icon ion-android-star-half"> </ i>
<i class = "icon ion-android-star"> </ i>
<i class = "icon ion-android-calendar"> </ i>
<i class = "icon ion-android-alarm-clock"> </ i>
<i class = "icon ion-android-time"> </ i>
<i class = "icon ion-android-stopwatch"> </ i>
<i class = "icon ion-android-watch"> </ i>
<i class = "icon ion-android-locate"> </ i>
<i class = "icon ion-android-navigate"> </ i>
<i class = "icon ion-android-pin"> </ i>
<i class = "icon ion-android-compass"> </ i>
<i class = "icon ion-android-map"> </ i>
<i class = "icon ion-android-walk"> </ i>
<i class = "icon ion-android-bicycle"> </ i>
<i class = "icon ion-android-car"> </ i>
<i class = "icon ion-android-bus"> </ i>
<i class = "icon ion-android-subway"> </ i>
<i class = "icon ion-android-train"> </ i>
<i class = "icon ion-android-boat"> </ i>
<i class = "icon ion-android-plane"> </ i>
<i class = "icon ion-android-restaurant"> </ i>
<i class = "icon ion-android-bar"> </ i>
<i class = "icon ion-android-cart"> </ i>
<i class = "icon ion-android-camera"> </ i>
<i class = "icon ion-android-image"> </ i>
<i class = "icon ion-android-film"> </ i>
<i class = "icon ion-android-color-palette"> </ i>
<i class = "icon ion-android-create"> </ i>
<i class = "icon ion-android-mail"> </ i>
<i class = "icon ion-android-drafts"> </ i>
<i class = "icon ion-android-send"> </ i>
<i class = "icon ion-android-archive"> </ i>
<i class = "icon ion-android-delete"> </ i>
<i class = "icon ion-android-attach"> </ i>
<i class = "icon ion-android-share"> </ i>
<i class = "icon ion-android-share-alt"> </ i>
<i class = "icon ion-android-bookmark"> </ i>
<i class = "icon ion-android-document"> </ i>
<i class = "icon ion-android-clipboard"> </ i>
<i class = "icon ion-android-list"> </ i>
<i class = "icon ion-android-folder-open"> </ i>
<i class = "icon ion-android-folder"> </ i>
<i class = "icon ion-android-print"> </ i>
<i class = "icon ion-android-open"> </ i>
<i class = "icon ion-android-exit"> </ i>
<i class = "icon ion-android-contract"> </ i>
<i class = "icon ion-android-expand"> </ i>
<i class = "icon ion-android-globe"> </ i>
<i class = "icon ion-android-chat"> </ i>
<i class = "icon ion-android-textsms"> </ i>
<i class = "icon ion-android-hangout"> </ i>
<i class = "icon ion-android-happy"> </ i>
<i class = "icon ion-android-sad"> </ i>
<i class = "icon ion-android-person"> </ i>
<i class = "icon ion-android-people"> </ i>
<i class = "icon ion-android-person-add"> </ i>
<i class = "icon ion-android-contact"> </ i>
<i class = "icon ion-android-contacts"> </ i>
<i class = "icon ion-android-playstore"> </ i>
<i class = "icon ion-android-lock"> </ i>
<i class = "icon ion-android-unlock"> </ i>
<i class = "icon ion-android-microphone"> </ i>
<i class = "icon ion-android-microphone-off"> </ i>
<i class = "icon ion-android-notifications-none"> </ i>
<i class = "icon ion-android-notifications"> </ i>
<i class = "icon ion-android-notifications-off"> </ i>
<i class = "icon ion-android-volume-mute"> </ i>
<i class = "icon ion-android-volume-down"> </ i>
<i class = "icon ion-android-volume-up"> </ i>
<i class = "icon ion-android-volume-off"> </ i>
<i class = "icon ion-android-hand"> </ i>
<i class = "icon ion-android-desktop"> </ i>
<i class = "icon ion-android-laptop"> </ i>
<i class = "icon ion-android-phone-portrait"> </ i>
<i class = "icon ion-android-phone-landscape"> </ i>
<i class = "icon ion-android-bulb"> </ i>
<i class = "icon ion-android-sunny"> </ i>
<i class = "icon ion-android-alert"> </ i>
<i class = "icon ion-android-warning"> </ i>

ソーシャルアイコン

コード	結果
<i class = "icon ion-social-twitter"> </ i>
<i class = "icon ion-social-twitter-outline"> </ i>
<i class = "icon ion-social-facebook"> </ i>
<i class = "icon ion-social-facebook-outline"> </ i>
<i class = "icon ion-social-googleplus"> </ i>
<i class = "icon ion-social-googleplus-outline"> </ i>
<i class = "icon ion-social-google"> </ i>
<i class = "icon ion-social-google-outline"> </ i>
<i class = "icon ion-social-dribbble"> </ i>
<i class = "icon ion-social-dribbble-outline"> </ i>
<i class = "icon ion-social-octocat"> </ i>
<i class = "icon ion-social-github"> </ i>
<i class = "icon ion-social-github-outline"> </ i>
<i class = "icon ion-social-instagram"> </ i>
<i class = "icon ion-social-instagram-outline"> </ i>
<i class = "icon ion-social-whatsapp"> </ i>
<i class = "icon ion-social-whatsapp-outline"> </ i>
<i class = "icon ion-social-snapchat"> </ i>
<i class = "icon ion-social-snapchat-outline"> </ i>
<i class = "icon ion-social-foursquare"> </ i>
<i class = "icon ion-social-foursquare-outline"> </ i>
<i class = "icon ion-social-pinterest"> </ i>
<i class = "icon ion-social-pinterest-outline"> </ i>
<i class = "icon ion-social-rss"> </ i>
<i class = "icon ion-social-rss-outline"> </ i>
<i class = "icon ion-social-tumblr"> </ i>
<i class = "icon ion-social-tumblr-outline"> </ i>
<i class = "icon ion-social-wordpress"> </ i>
<i class = "icon ion-social-wordpress-outline"> </ i>
<i class = "icon ion-social-reddit"> </ i>
<i class = "icon ion-social-reddit-outline"> </ i>
<i class = "icon ion-social-hackernews"> </ i>
<i class = "icon ion-social-hackernews-outline"> </ i>
<i class = "icon ion-social-designernews"> </ i>
<i class = "icon ion-social-designernews-outline"> </ i>
<i class = "icon ion-social-yahoo"> </ i>
<i class = "icon ion-social-yahoo-outline"> </ i>
<i class = "icon ion-social-buffer"> </ i>
<i class = "icon ion-social-buffer-outline"> </ i>
<i class = "icon ion-social-skype"> </ i>
<i class = "icon ion-social-skype-outline"> </ i>
<i class = "icon ion-social-linkedin"> </ i>
<i class = "icon ion-social-linkedin-outline"> </ i>
<i class = "icon ion-social-vimeo"> </ i>
<i class = "icon ion-social-vimeo-outline"> </ i>
<i class = "icon ion-social-twitch"> </ i>
<i class = "icon ion-social-twitch-outline"> </ i>
<i class = "icon ion-social-youtube"> </ i>
<i class = "icon ion-social-youtube-outline"> </ i>
<i class = "icon ion-social-dropbox"> </ i>
<i class = "icon ion-social-dropbox-outline"> </ i>
<i class = "icon ion-social-apple"> </ i>
<i class = "icon ion-social-apple-outline"> </ i>
<i class = "icon ion-social-android"> </ i>
<i class = "icon ion-social-android-outline"> </ i>
<i class = "icon ion-social-windows"> </ i>
<i class = "icon ion-social-windows-outline"> </ i>
<i class = "icon ion-social-html5"> </ i>
<i class = "icon ion-social-html5-outline"> </ i>
<i class = "icon ion-social-css3"> </ i>
<i class = "icon ion-social-css3-outline"> </ i>
<i class = "icon ion-social-javascript"> </ i>
<i class = "icon ion-social-javascript-outline"> </ i>
<i class = "icon ion-social-angular"> </ i>
<i class = "icon ion-social-angular-outline"> </ i>
<i class = "icon ion-social-nodejs"> </ i>
<i class = "icon ion-social-sass"> </ i>
<i class = "icon ion-social-python"> </ i>
<i class = "icon ion-social-chrome"> </ i>
<i class = "icon ion-social-chrome-outline"> </ i>
<i class = "icon ion-social-codepen"> </ i>
<i class = "icon ion-social-codepen-outline"> </ i>
<i class = "icon ion-social-markdown"> </ i>
<i class = "icon ion-social-tux"> </ i>
<i class = "iconion-social-freebsd-devil"> </ i>
<i class = "icon ion-social-usd"> </ i>
<i class = "icon ion-social-usd-outline"> </ i>
<i class = "iconion-social-bitcoin"> </ i>
<i class = "iconion-social-bitcoin-outline"> </ i>
<i class = "iconion-social-yen"> </ i>
<i class = "icon ion-social-yen-outline"> </ i>
<i class = "icon ion-social-euro"> </ i>
<i class = "icon ion-social-euro-outline"> </ i>

Ionicは、要素にパディングを追加する簡単な方法を提供します。使用できるクラスがいくつかあり、それらすべてが追加されます10px要素の境界とそのコンテンツの間。次の表に、使用可能なすべてのパディングクラスを示します。

パディングクラス

クラス名	クラス情報
パディング	四方にパディングを追加します。
パディング-垂直	上部と下部にパディングを追加します。
パディング-水平	左右にパディングを追加します。
パディングトップ	上部にパディングを追加します。
パディング-右	右側にパディングを追加します。
パディングボトム	下部にパディングを追加します。
パディング-左	左側にパディングを追加します。

パディングの使用

要素にパディングを適用する場合は、上の表のクラスの1つを割り当てる必要があります。次の例は、2つのブロックボタンを示しています。最初のものは使用していますpaddingクラスと2番目のものはしません。最初のボタンは大きいので、10px パディングが適用されました。

<div class = "button button-block padding">Padding</div>
<div class = "button button-block">No padding</div>

上記のコードは次の画面を生成します-

ザ・ Action Sheet は、画面下部のスライドアップペインをトリガーするIonicサービスであり、さまざまな目的に使用できます。

アクションシートの使用

次の例では、Ionicアクションシートの使用方法を示します。まず注入します$ionicActionSheet コントローラへの依存関係としてのサービス、次に作成します $scope.showActionSheet() 関数、そして最後に、作成した関数を呼び出すためのボタンをHTMLテンプレートに作成します。

コントローラコード

.controller('myCtrl', function($scope, $ionicActionSheet) {
   $scope.triggerActionSheet = function() { // Show the action sheet var showActionSheet = $ionicActionSheet.show({
         buttons: [
            { text: 'Edit 1' },
            { text: 'Edit 2' }
         ],
			
         destructiveText: 'Delete',
         titleText: 'Action Sheet',
         cancelText: 'Cancel',
			
         cancel: function() {
            // add cancel code...
         },
			
         buttonClicked: function(index) {
            if(index === 0) {
               // add edit 1 code
            }
				
            if(index === 1) {
               // add edit 2 code
            }
         },
			
         destructiveButtonClicked: function() {
            // add delete code..
         }
      });
   };
})

HTMLコード

<button class = "button">Action Sheet Button</button>

コードの説明

ボタンをタップすると、 $ionicActionSheet.show機能とアクションシートが表示されます。オプションの1つがテープに記録されたときに呼び出される独自の関数を作成できます。ザ・cancel 関数はペインを閉じますが、ペインを閉じる前にキャンセルオプションをタップすると呼び出される、他の動作を追加できます。

ザ・ buttonClicked関数は、編集オプションの1つがタップされたときに呼び出されるコードを記述できる場所です。を使用して複数のボタンを追跡できますindexパラメータ。ザ・destructiveButtonCLicked削除オプションをタップするとトリガーされる機能です。このオプションはred by default。

ザ・ $ionicActionSheet.show()メソッドには他にもいくつかの便利なパラメータがあります。次の表でそれらすべてを確認できます。

メソッドオプションの表示

プロパティ	タイプ	詳細
ボタン	オブジェクト	テキストフィールドを持つボタンオブジェクトを作成します。
titleText	ストリング	アクションシートのタイトル。
cancelText	ストリング	キャンセルボタンのテキスト。
destructiveText	ストリング	破壊的なボタンのテキスト。
キャンセル	関数	キャンセルボタン、背景、またはハードウェアの戻るボタンが押されたときに呼び出されます。
buttonClicked	関数	ボタンの1つがタップされたときに呼び出されます。インデックスは、どのボタンがタップされたかを追跡するために使用されます。trueを返すと、アクションシートが閉じます。
destructiveButtonClicked	関数	破壊的なボタンがクリックされたときに呼び出されます。trueを返すと、アクションシートが閉じます。
cancelOnStateChange	ブール値	true（デフォルト）の場合、ナビゲーション状態が変更されるとアクションシートがキャンセルされます。

ザ・ Ionic Backdrop適用すると、画面のコンテンツがオーバーレイされます。他のオーバーレイ（ポップアップ、読み込みなど）の下に表示されます。背景サービスの管理に使用できる方法は2つあります。ザ・$ionicBackdrop.retain() コンポーネントに背景を適用し、 $ionicBackdrop.release() それを削除します。

背景の使用

次の例は、背景の使用方法を示しています。追加します$ionicBackdrop コントローラへの依存関係として、次に作成します $scope.showBackdrop() を呼び出す関数 retain methodすぐに。次に、3秒後、release method。使用しています$timeout releaseメソッドの場合は、コントローラーの依存関係としても追加する必要があります。

.controller('myCtrl', function($scope, $ionicBackdrop, $timeout) {
   $scope.showBackdrop = function() { $ionicBackdrop.retain();
		
      $timeout(function() { $ionicBackdrop.release();
      }, 3000);
   };
})

次の画像では、背景が適用されているため、画面がどのように暗くなっているかがわかります。

ほとんどすべてのモバイルアプリには、いくつかの基本的な要素が含まれています。通常、これらの要素には、画面の上部と下部をカバーするヘッダーとフッターが含まれます。他のすべての要素は、これら2つの間に配置されます。Ionicは、コンテナとして機能するイオンコンテンツ要素を提供します。これは、作成する他のすべての要素をラップします。

次の例を考えてみましょう-

<div class = "bar bar-header"> 
   <h1 class = "title">Header</h1> 
</div>

<div class = "list"> 
   <label class = "item item-input"> 
      <input type = "text" placeholder = "Placeholder 1" /> 
   </label>
   
   <label class = "item item-input"> 
      <input type = "text" placeholder = "Placeholder 2" /> 
   </label> 
</div>

<div class = "bar bar-footer"> 
   <h1 class = "title">Footer</h1> 
</div>

この章では、JavaScriptフォームとは何かを理解し、JavaScriptチェックボックス、ラジオボタン、およびトグルとは何かを学習します。

イオンチェックボックスの使用

IonicJavaScriptチェックボックスの使用方法を見てみましょう。まず、作成する必要がありますion-checkboxHTMLファイルの要素。この中で、ng-model 角度に接続される属性 $scope。あなたは私たちが使用していることに気付くでしょうdotモデルがなくても機能する場合でも、モデルの値を定義するとき。これにより、子スコープと親スコープの間のリンクを常に維持できます。

これは、将来発生する可能性のあるいくつかの問題を回避するのに役立つため、非常に重要です。要素を作成した後、角度式を使用してその値をバインドします。

<ion-checkbox ng-model = "checkboxModel.value1">Checkbox 1</ion-checkbox>
<ion-checkbox ng-model = "checkboxModel.value2">Checkbox 2</ion-checkbox>

<p>Checkbox 1 value is: <b>{{checkboxModel.value1}}</b></p>
<p>Checkbox 2 value is: <b>{{checkboxModel.value2}}</b></p>

次に、コントローラー内のモデルに値を割り当てる必要があります。使用する値は次のとおりです。false、チェックボックスをオフにして始めたいので。

$scope.checkboxModel = {
   value1 : false,
   value2 : false
};

上記のコードは次の画面を生成します-

これで、チェックボックス要素をタップすると、モデル値が自動的に次のように変更されます。 “true” 次のスクリーンショットに示すように。

イオンラジオの使用

まず、3つ作成する必要があります ion-radio HTMLの要素を割り当て、 ng-model そしてその ng-valueそれに。その後、選択した値を角度式で表示します。3つの放射性元素すべてのチェックを外すことから始めます。そのため、値は画面に割り当てられません。

<ion-radio ng-model = "radioModel.value" ng-value = "1">Radio 1</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "2">Radio 2</ion-radio>
<ion-radio ng-model = "radioModel.value" ng-value = "3">Radio 3</ion-radio>

<p>Radio value is: <b>{{radioModel.value}}</b></p>

上記のコードは次の画面を生成します-

2番目のチェックボックス要素をタップすると、それに応じて値が変化します。

イオントグルの使用

トグルがチェックボックスに似ていることに気付くでしょう。チェックボックスで行ったのと同じ手順に従います。HTMLファイルでは、最初に作成しますion-toggle 要素を割り当て、 ng-model valueを実行してから、の式の値をビューにバインドします。

<ion-toggle ng-model = "toggleModel.value1">Toggle 1</ion-toggle>
<ion-toggle ng-model = "toggleModel.value2">Toggle 2</ion-toggle>
<ion-toggle ng-model = "toggleModel.value3">Toggle 3</ion-toggle>

<p>Toggle value 1 is: <b>{{toggleModel.value1}}</b></p>
<p>Toggle value 2 is: <b>{{toggleModel.value2}}</b></p>
<p>Toggle value 3 is: <b>{{toggleModel.value3}}</b></p>

次に、に値を割り当てます $scope.toggleModel私たちのコントローラーで。トグルはブール値を使用するため、割り当てますtrue 最初の要素に false 他の2つに。

$scope.toggleModel = {
   value1 : true,
   value2 : false,
   value3 : false
};

上記のコードは次の画面を生成します-

次に、2番目と3番目のトグルをタップして、値がfalseからtrueにどのように変化するかを示します。

さまざまなIonicイベントを使用して、ユーザーとの対話性を追加できます。次の表は、すべてのイオンイベントを説明しています。

イベント名	イベントの詳細
保留	タッチ時間が500ms以上の場合に呼び出されます。
オンタップ	タッチ時間が250ms未満の場合に呼び出されます。
オンダブルタップ	ダブルタップタッチがあるときに呼び出されます。
オンタッチ	タッチが始まるとすぐに呼び出されます。
オンリリース	タッチが終了すると呼び出されます。
オンドラッグ	ページの周りをどの方向にも離さずにタッチを動かしたときに呼び出されます。
オンドラッグアップ	要素が上にドラッグされたときに呼び出されます。
右にドラッグ	要素が右にドラッグされたときに呼び出されます。
オン-ドラッグ-左	要素が左にドラッグされたときに呼び出されます。
オンドラッグダウン	要素が下にドラッグされたときに呼び出されます。
スワイプ	ドラッグの速度が任意の方向に移動する場合に呼び出されます。
スワイプアップ	ドラッグの速度が上に移動するときに呼び出されます。
右にスワイプ	ドラッグの速度が右に移動するときに呼び出されます。
左にスワイプ	ドラッグの速度が左に移動するときに呼び出されます。
スワイプダウン	ドラッグの速度が下に移動するときに呼び出されます。

イベントの使用

すべてのIonicイベントは同じように使用できるため、使用方法を説明します。 on-touchイベントとあなたは他のイベントに同じ原則を適用することができます。まず、ボタンを作成して割り当てますon-touch イベント、呼び出します onTouchFunction()。

<button on-touch = "onTouchFunction()" class="button">Test</button>

次に、コントローラースコープでその関数を作成します。

$scope.onTouchFunction = function() {
   // Do something...
}

さて、タッチイベントが発生すると onTouchFunction() と呼ばれます。

これは、ヘッダーバーを追加するIonicディレクティブです。

JavaScriptヘッダーの使用

JavaScriptヘッダーバーを作成するには、を適用する必要があります ion-header-barHTMLファイルのディレクティブ。デフォルトのヘッダーは白なので、追加しますtitle、白い背景に表示されます。追加しますindex.html ファイル。

<ion-header-bar>
   <h1 class = "title">Title!</h1>
</ion-header-bar>

上記のコードは次の画面を生成します-

スタイリングヘッダー

CSSヘッダーバーと同様に、JavaScriptの対応するものも同様の方法でスタイルを設定できます。色を適用するには、色クラスを追加する必要があります。barプレフィックス。したがって、青いヘッダーを使用する場合は、bar-positiveクラス。を追加して、タイトルを画面の片側に移動することもできますalign-title属性。この属性の値は次のようになります。center、 left または right。

<ion-header-bar align-title = "left" class = "bar-positive">
   <h1 class = "title">Title!</h1>
</ion-header-bar>

上記のコードは次の画面を生成します-

要素の追加

通常、ヘッダーにいくつかの要素を追加する必要があります。次の例は、を配置する方法を示していますbutton 左側と iconイオンヘッダーバーの右側にあります。ヘッダーに他の要素を追加することもできます。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

上記のコードは次の画面を生成します-

サブヘッダーの追加

サブヘッダーは、 bar-subheader クラスがに追加されます ion-header-bar。追加しますbar-assertive サブヘッダーに赤色を適用するクラス。

<ion-header-bar class = "bar-positive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
   
   <h1 class = "title">Title!</h1>
   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-header-bar>

<ion-header-bar class = "bar-subheader bar-assertive">
   <h1 class = "title">Subheader</h1>
</ion-header-bar>

上記のコードは次の画面を生成します-

このディレクティブは、画面の下部にフッターバーを追加します。

フッターの使用

イオンフッターは、 ion-footer-barクラス。それを操作することは、ヘッダーを操作することと同じです。タイトルを追加して、画面の左側、中央、または右側に配置するには、align-title属性。プレフィックス付きbar、イオンカラーを使用できます。タイトルを中央にした赤いフッターを作成しましょう。

<ion-footer-bar align-title = "center" class = "bar-assertive">
   <h1 class = "title">Title!</h1>
</ion-footer-bar>

上記のコードは次の画面を生成します-

要素の追加

ボタンアイコンやその他の要素をに追加できます ion-footer-barそしてそれらのスタイリングが適用されます。フッターにボタンとアイコンを追加しましょう。

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

上記のコードは次の画面を生成します-

サブフッターの追加

サブヘッダーの使い方を紹介しました。サブフッターを作成するのと同じ方法です。フッターバーの上に配置されます。私たちがする必要があるのは追加することだけですbar-subfooter 私たちのクラス ion-footer-bar 素子。

次の例では、以前に作成したフッターバーの上にサブフッターを追加します。

<ion-footer-bar class = "bar-subfooter bar-positive">
   <h1 class = "title">Sub Footer</h1>
</ion-footer-bar>

<ion-footer-bar class = "bar-assertive">
   <div class = "buttons">
      <button class = "button">Button</button>
   </div>
  
   <h1 class = "title">Footer</h1>

   <div class = "buttons" ng-click = "doSomething()">
      <button class = "button icon ion-home"></button>
   </div>
</ion-footer-bar>

上記のコードは次の画面を生成します-

キーボードは、Ionicの自動化された機能の1つです。これは、Ionicがキーボードを開く必要があるときを認識できることを意味します。

キーボードの使用

開発者がIonicキーボードを操作しながら調整できる機能がいくつかあります。キーボードが開いているときに一部の要素を非表示にする場合は、hide-on-keyboard-openクラス。これがどのように機能するかを示すために、キーボードが開いているときに非表示にする必要がある入力とボタンを作成しました。

<label class = "item item-input">
   <input type = "text" placeholder = "Input 1">
</label>

<button class = "button button-block hide-on-keyboard-open">
   button
</button>

上記のコードは次の画面を生成します-

これで、入力フィールドをタップすると、キーボードが自動的に開き、ボタンが非表示になります。

Ionicの優れた機能は、画面上の要素を調整するため、キーボードが開いているときにフォーカスされた要素が常に表示されることです。次の画像は10個の入力フォームを示しており、最後のフォームは青色です。

青いフォームをタップすると、Ionicが画面を調整するため、青いフォームが常に表示されます。

Note −これは、画面が次のようなディレクティブ内にある場合にのみ機能します。 Scroll View。Ionicテンプレートのいずれかから始めると、すべてのテンプレートがion-content 他の画面要素へのコンテナとしてのディレクティブ。したがって、スクロールビューは常に適用されます。

Ionic CSSリスト要素については、前の章ですでに説明しました。この章では、JavaScriptリストを紹介します。彼らは私たちがのようないくつかの新機能を使用することを可能にしますswipe、 drag そして remove。

リストの使用

リストとアイテムを表示するために使用されるディレクティブは次のとおりです。 ion-list そして ion-item 以下に示すように。

<ion-list>
   <ion-item>
      Item 1 
   </ion-item>
	
   <ion-item>
      Item 2 
   </ion-item>
	
   <ion-item>
      Item 3  
   </ion-item>
</ion-list>

上記のコードは次の画面を生成します-

削除ボタン

このボタンは、を使用して追加できます。 ion-delete-button指令。任意のアイコンクラスを使用できます。削除ボタンを常に表示する必要はないため、ユーザーが誤ってボタンをタップして削除プロセスをトリガーする可能性があるため、削除ボタンを追加できます。show-delete に属性 ion-list と接続します ng-model。

次の例では、 ion-toggleモデルとして。トグルが削除時にある場合、ボタンはリストアイテムに表示されます。

<ion-list show-delete = "showDelete1">
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 1
   </ion-item>
	
   <ion-item>
      <ion-delete-button class = "ion-minus-circled"></ion-delete-button>
      Item 2
   </ion-item>
</ion-list>

<ion-toggle ng-model = "showDelete2">
   Show Delete 2
</ion-toggle>

上記のコードは次の画面を生成します-

再注文ボタン

再注文ボタンのIonicディレクティブは ion-reorder-button。作成した要素にはon-reorder ユーザーがこの要素をドラッグしているときはいつでも、コントローラーから関数をトリガーする属性。

<ion-list show-reorder = "true">
   <ion-item ng-repeat = "item in items">
      Item {{item.id}}
      <ion-reorder-button class = "ion-navicon" 
         on-reorder = "moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button> </ion-item> </ion-list> $scope.items = [
   {id: 1},
   {id: 2},
   {id: 3},
   {id: 4}
];

$scope.moveItem = function(item, fromIndex, toIndex) { $scope.items.splice(fromIndex, 1);
   $scope.items.splice(toIndex, 0, item);
};

上記のコードは次の画面を生成します-

右側のアイコンをクリックすると、要素をドラッグしてリスト内の別の場所に移動できます。

オプションボタン

オプションボタンは、 ion-option-button指令。これらのボタンは、リストアイテムを左にスワイプすると表示され、アイテム要素を右にスワイプすると再び非表示にできます。

次の例では、非表示になっている2つのボタンがあることがわかります。

<ion-list>
   <ion-item>
      Item with two buttons...
      <ion-option-button class = "button-positive">Button 1</ion-option-button>
      <ion-option-button class = "button-assertive">Button 2</ion-option-button>
   </ion-item>
</ion-list>

上記のコードは次の画面を生成します-

item要素を左にスワイプすると、テキストが左に移動し、ボタンが右側に表示されます。

その他の機能

ザ・ collection-repeat 関数はの更新バージョンです AngularJS ng-repeat directive。画面に表示されている要素のみがレンダリングされ、残りはスクロールすると更新されます。これは、大きなリストで作業している場合の重要なパフォーマンスの向上です。このディレクティブは、item-width そして item-height リストアイテムをさらに最適化するための属性。

リスト内の画像を操作するためのその他の便利な属性がいくつかあります。ザ・item-render-buffer関数は、表示されているアイテムの後にロードされるアイテムの数を表します。この値が高いほど、より多くのアイテムがプリロードされます。ザ・force-refresh-images関数は、スクロール中の画像のソースに関する問題を修正します。これらのクラスは両方とも、パフォーマンスに悪影響を及ぼします。

イオンローディングは、表示されたときにユーザーとの対話を無効にし、必要に応じて再度有効にします。

読み込みの使用

読み込みはコントローラー内でトリガーされます。まず、注入する必要があります$ionicLoading依存関係としてコントローラーで。その後、電話する必要があります$ionicLoading.show()メソッドとロードが表示されます。それを無効にするために、$ionicLoading.hide() 方法。

コントローラ

.controller('myCtrl', function($scope, $ionicLoading) {
   $scope.showLoading = function() { $ionicLoading.show({
         template: 'Loading...'
      });
   };

   $scope.hideLoading = function(){ $ionicLoading.hide();
   };
});

HTMLコード

<button class = "button button-block" ng-click = "showLoading()"></button>

ユーザーがボタンをタップすると、読み込みが表示されます。通常、時間のかかる機能が終了した後は、読み込みを非表示にする必要があります。

ロードを操作するときは、他のいくつかのオプションパラメータを使用できます。説明を下表に示します。

オプションパラメータの読み込み

オプション	タイプ	詳細
templateUrl	ストリング	読み込みインジケーターとしてHTMLテンプレートを読み込むために使用されます。
範囲	オブジェクト	カスタムスコープをロードに渡すために使用されます。デフォルトは$ rootScopeです。
noBackdrop	ブール値	背景を非表示にするために使用されます。
hideOnStateChange	ブール値	状態が変更されたときにロードを非表示にするために使用されます。
ディレイ	数	インジケーターの表示をミリ秒単位で遅らせるために使用されます。
デュレーション	数	ミリ秒単位でしばらくするとインジケーターを非表示にするために使用されます。代わりに使用できますhide() 方法。

構成の読み込み

Ionic configは、すべてので使用するオプションを構成するために使用されます。 $ionicLoading アプリ全体のサービス。

これは、を使用して行うことができます $ionicLoadingConfig。定数をメインアプリモジュールに追加する必要があるため、app.js ファイルを作成し、モジュール宣言の後に定数を追加します。

.constant('$ionicLoadingConfig', {
   template: 'Default Loading Template...'
})

上記のコードは次の画面を生成します-

Ionicモーダルがアクティブになると、コンテンツペインが通常のコンテンツの上に表示されます。モーダルは基本的に、より多くの機能を備えたより大きなポップアップです。モーダルはデフォルトで画面全体をカバーしますが、必要に応じて最適化できます。

モーダルの使用

Ionicでモーダルを実装する方法は2つあります。1つの方法は、個別のテンプレートを追加することであり、もう1つの方法は、通常のHTMLファイルの上にテンプレートを追加することです。scriptタグ。最初に行う必要があるのは、角度依存性注入を使用してモーダルをコントローラーに接続することです。次に、モーダルを作成する必要があります。スコープを渡し、モーダルにアニメーションを追加します。

その後、モーダルを開く、閉じる、破棄するための関数を作成します。最後の2つの関数は、モーダルが非表示または削除された場合にトリガーされるコードを記述できる場所に配置されています。機能をトリガーしたくない場合は、モーダルが削除または非表示になっているときに、最後の2つの機能を削除できます。

コントローラコード

.controller('MyController', function($scope, $ionicModal) {
   $ionicModal.fromTemplateUrl('my-modal.html', { scope: $scope,
      animation: 'slide-in-up'
   }).then(function(modal) {
      $scope.modal = modal; }); $scope.openModal = function() {
      $scope.modal.show(); }; $scope.closeModal = function() {
      $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy', function() {
      $scope.modal.remove(); }); // Execute action on hide modal $scope.$on('modal.hidden', function() { // Execute action }); // Execute action on remove modal $scope.$on('modal.removed', function() {
      // Execute action
   });
});

HTMLコード

<script id = "my-modal.html" type = "text/ng-template">
   <ion-modal-view>
      <ion-header-bar>
         <h1 class = "title">Modal Title</h1>
      </ion-header-bar>
		
      <ion-content>
         <button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>
      </ion-content>
   </ion-modal-view>
</script>

最後の例で示した方法は、 script タグは、既存のHTMLファイル内のモーダルへのコンテナとして使用されます。

2番目の方法は、内部に新しいテンプレートファイルを作成することです。 templatesフォルダ。前の例と同じコードを使用しますが、script タグと私たちも変更する必要があります fromTemplateUrl コントローラで、モーダルを新しく作成したテンプレートに接続します。

コントローラコード

.controller('MyController', function($scope, $ionicModal) { $ionicModal.fromTemplateUrl('templates/modal-template.html', {
      scope: $scope, animation: 'slide-in-up', }).then(function(modal) { $scope.modal = modal;
   });
	
   $scope.openModal = function() { $scope.modal.show();
   };
	
   $scope.closeModal = function() { $scope.modal.hide();
   };
	
   //Cleanup the modal when we're done with it!
   $scope.$on('$destroy', function() { $scope.modal.remove();
   });
	
   // Execute action on hide modal
   $scope.$on('modal.hidden', function() {
      // Execute action
   });
	
   // Execute action on remove modal
   $scope.$on('modal.removed', function() {
      // Execute action
   });
});

HTMLコード

<ion-modal-view>
   <ion-header-bar>
      <h1 class = "title">Modal Title</h1>
   </ion-header-bar>
	
   <ion-content>
      <button class = "button icon icon-left ion-ios-close-outline"
         ng-click = "closeModal()">Close Modal</button>
   </ion-content>
</ion-modal-view>

Ionicモーダルを使用する3番目の方法は、HTMLをインラインで挿入することです。を使用しますfromTemplate の代わりに機能 fromTemplateUrl。

コントローラコード

.controller('MyController', function($scope, $ionicModal) {
   $scope.modal = $ionicModal.fromTemplate( '<ion-modal-view>' +
      ' <ion-header-bar>' +
         '<h1 class = "title">Modal Title</h1>' +
      '</ion-header-bar>' +
		
      '<ion-content>'+
         '<button class = "button icon icon-left ion-ios-close-outline"
            ng-click = "closeModal()">Close Modal</button>' +
      '</ion-content>' +
		
   '</ion-modal-view>', {
      scope: $scope, animation: 'slide-in-up' }) $scope.openModal = function() {
      $scope.modal.show(); }; $scope.closeModal = function() {
      $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy', function() {
      $scope.modal.remove(); }); // Execute action on hide modal $scope.$on('modal.hidden', function() { // Execute action }); // Execute action on remove modal $scope.$on('modal.removed', function() {
      // Execute action
   });
});

3つの例はすべて同じ効果があります。トリガーするボタンを作成します$ionicModal.show() モーダルを開きます。

HTMLコード

<button class = "button" ng-click = "openModal()"></button>

モーダルを開くと、閉じるために使用されるボタンが含まれます。このボタンはHTMLテンプレートで作成しました。

モーダル最適化には他のオプションもあります。使い方はすでに示しましたscope そして animation。次の表に、その他のオプションを示します。

オプション	タイプ	詳細
focusFirstInput	ブール値	モーダルの最初の入力にオートフォーカスします。
backdropClickToClose	ブール値	背景をタップするとモーダルを閉じることができます。デフォルト値はtrueです。
hardwareBackButtonClose	ブール値	ハードウェアの戻るボタンがクリックされたときにモーダルを閉じることができます。デフォルト値はtrueです。

ナビゲーションは、すべてのアプリのコアコンポーネントの1つです。Ionicはを使用していますAngularJS UI Router ナビゲーションを処理するため。

ナビゲーションの使用

ナビゲーションはで構成できます app.jsファイル。Ionicテンプレートのいずれかを使用している場合は、$stateProvider アプリに注入されたサービス config。アプリの状態を作成する最も簡単な方法を次の例に示します。

ザ・ $stateProvider サービスはURLをスキャンし、対応する状態を見つけて、で定義したファイルをロードします app.config。

app.jsコード

.config(function($stateProvider) { $stateProvider
   .state('index', { url: '/', templateUrl: 'templates/home.html'})
   .state('state1', {url: '/state1', templateUrl: 'templates/state1.html'})
   .state('state2', {url: '/state2', templateUrl: 'templates/state2.html',});
});

状態はにロードされます ion-nav-view に配置できる要素 index.html 体。

index.htmlコード

<ion-nav-view></ion-nav-view>

上記の例で状態を作成したときは、 templateUrlしたがって、状態がロードされると、一致するテンプレートファイルが検索されます。今、私たちは開きますtemplates フォルダと新しいファイルを作成します state1.html、アプリのURLがに変更されたときに読み込まれます /state1。

state1.html Code

<ion-view>
   <ion-content>
      This is State 1 !!!
   </ion-content>
</ion-view>

ナビゲーションメニューの作成

でアプリにナビゲーションバーを追加できます index.html 追加することによってボディ “ion-nav-bar”素子。ナビゲーションバー内に、ion-nav-back-buttonアイコン付き。これは、前の状態に戻るために使用されます。状態が変わるとボタンが自動的に表示されます。割り当てますgoBack() 関数、を使用します $ionicHistoryこの機能を処理するためのサービス。したがって、ユーザーがホーム状態を離れてstate1、ユーザーがホーム状態に戻りたい場合は、テープで貼り付けることができる戻るボタンが表示されます。

index.htmlコード

<ion-nav-bar class = "bar-positive">
   <ion-nav-back-button class = "button-clear" ng-click = "goBack()">
      <i class = "icon ion-arrow-left-c"></i> Back
   </ion-nav-back-button>
</ion-nav-bar>

コントローラコード

.MyCtrl($scope, $ionicHistory) { $scope.goBack = function() {
      $ionicHistory.goBack();
   };
}

ナビゲーション要素の追加

ボタンは、を使用してナビゲーションバーに追加できます。 ion-nav-buttons。この要素は、内部に配置する必要がありますion-nav-bar または ion-view。を割り当てることができますside4つのオプション値を持つ属性。ザ・primary そして secondary値は、使用されているプラ​​ットフォームに応じてボタンを配置します。IOSでもAndroidでも、片側にボタンが必要な場合があります。その場合は、left または right 代わりに属性。

追加することもできます ion-nav-titleナビゲーションバーに。すべてのコードはに配置されますindex.html ボディなので、どこでも使えます。

<ion-nav-bar class = "bar-positive">
   <ion-nav-title>
      Title
   </ion-nav-title>
	
   <ion-nav-buttons side = "primary">
      <button class = "button">
         Button 1
      </button>
   </ion-nav-buttons>
</ion-nav-bar>

次の画面が表示されます-

その他のナビゲーション属性

次の表は、Ionicナビゲーションで使用できる他のいくつかの機能を示しています。

ナビゲーション属性

属性	オプション	詳細
nav-transition	なし、iOS、Android	遷移が発生したときに適用する必要があるアニメーションを設定するために使用されます。
nav-方向	進む、戻る、入る、出る、交換する	遷移が発生したときのアニメーションの方向を設定するために使用されます。
hardwareBackButtonClose	ブール値	ハードウェアの戻るボタンがクリックされたときにモーダルを閉じることができます。デフォルト値はtrueです。

キャッシング

Ionicには、パフォーマンスを向上させるために最大10個のビューをキャッシュする機能があります。また、キャッシュを手動で処理する方法も提供します。後方ビューのみがキャッシュされ、ユーザーがアクセスするたびに前方ビューが読み込まれるため、コードに従うことで前方ビューをキャッシュするように簡単に設定できます。

$ionicCinfigProvider.views.forwardCache(true);

キャッシュする状態の数を設定することもできます。3つのビューをキャッシュする場合は、次のコードを使用できます。

$ionicConfigProvider.views.maxCache(3);

キャッシュは内部で無効にできます $stateProvider または属性をに設定することによって ion-view。両方の例を以下に示します。

$stateProvider.state('state1', {
   cache: false,
   url : '/state1',
   templateUrl: 'templates/state1.html'
})

<ion-view cache-view = "false"></ion-view>

ナビゲーションバーの制御

を使用してナビゲーションバーの動作を制御できます $ionicNavBarDelegateサービス。このサービスは、コントローラーに注入する必要があります。

HTMLコード

<ion-nav-bar>
   <button ng-click = "setNavTitle('title')">
      Set title to banana!
   </button>
</ion-nav-bar>

コントローラコード

$scope.setNavTitle = function(title) { $ionicNavBarDelegate.title(title);
}

ザ・ $ionicNavBarDelegateサービスには他にも便利な方法があります。これらのメソッドのいくつかを次の表に示します。

$ ionicNavBarDelegateのメソッド

方法	パラメータ	タイプ	詳細
align（パラメータ）	中央、左、右	ストリング	タイトルを揃えるために使用されます。
showBackButton（パラメータ）	公演	ブール値	戻るボタンを表示または非表示にするために使用されます。
タイトル（パラメータ）	題名	ストリング	新しいタイトルを表示するために使用されます。

追跡履歴

を使用して、過去、現在、および将来のビューの履歴を追跡できます。 $ionicHistoryサービス。次の表に、このサービスのすべてのメソッドを示します。

$ ionicHistoryのメソッド

方法	パラメータ	タイプ	詳細
viewHistory	/	オブジェクト	アプリビューの履歴データを返します。
currentView（）	/	オブジェクト	現在のビューを返します。
タイトル（パラメータ）	題名	ストリング	現在のビューの親であるビューのIDを返します。
currentTitle（パラメータ）	val	ストリング	現在のビューのタイトルを返します。新規設定で更新できますval 値。
backView（）	/	ストリング	最後の背面図を返します。
backTitle（）	/	ストリング	最後の背面図のタイトルを返します。
forwardView（）	/	オブジェクト	最後の前方ビューを返します。
currentStateName（）	/	ストリング	現在の状態名を返します。
戻る（）	backCount	数	戻るビューの数を設定するために使用されます。数値は負である必要があります。正またはゼロの場合、効果はありません。
履歴をクリア（）	/	/	ビュー履歴全体をクリアするために使用されます。
キャッシュの消去（）	/	約束する	キャッシュされたすべてのビューをクリアするために使用されます。
nextViewOptions（）	/	オブジェクト	次のビューのオプションを設定します。詳細については、次の例を参照してください。

ザ・ nextViewOptions() メソッドには、次の3つのオプションがあります。

• disableAnimate 次のビュー変更のアニメーションを無効にするために使用されます。

• disableBack 背面図をnullに設定します。

• historyRoot 次のビューをルートビューとして設定します。

$ionicHistory.nextViewOptions({
   disableAnimate: true,
   disableBack: true
});

これは、通常のビューの上に表示されるビューです。

ポップオーバーの使用

ポップオーバーは、を使用して作成できます ion-popover-view素子。この要素は、HTMLテンプレートと$ionicPopover サービスをコントローラーに注入する必要があります。

ポップオーバーを追加する方法は3つあります。最初のものはfromTemplateインラインテンプレートの使用を可能にするメソッド。ポップオーバーを追加する2番目と3番目の方法は、fromTemplateUrl 方法。

理解しましょう fromtemplate 以下に説明する方法。

Fromtemplateメソッドのコントローラーコード

.controller('DashCtrl', function($scope, $ionicLoading, $ionicPopover) { // .fromTemplate() method var template = '<ion-popover-view>' + '<ion-header-bar>' + '<h1 class = "title">Popover Title</h1>' + '</ion-header-bar>'+ '<ion-content>' + 'Popover Content!' + '</ion-content>' + '</ion-popover-view>'; $scope.popover = $ionicPopover.fromTemplate(template, { scope: $scope
   });

   $scope.openPopover = function($event) {
      $scope.popover.show($event);
   };

   $scope.closePopover = function() { $scope.popover.hide();
   };

   //Cleanup the popover when we're done with it!
   $scope.$on('$destroy', function() { $scope.popover.remove();
   });

   // Execute action on hide popover
   $scope.$on('popover.hidden', function() {
      // Execute action
   });

   // Execute action on remove popover
   $scope.$on('popover.removed', function() {
      // Execute action
   });
})

上で説明したように、ポップオーバーを追加する2番目と3番目の方法は fromTemplateUrl方法。コントローラコードは、fromTemplateUrl 値。

HTMLが既存のテンプレートに追加された場合、URLは popover.html。HTMLをテンプレートフォルダに配置する場合、URLは次のように変更されます。templates/popover.html。

両方の例を以下に説明します。

fromTemplateUrlのコントローラーコード

.controller('MyCtrl', function($scope, $ionicPopover) {

   $ionicPopover.fromTemplateUrl('popover.html', { scope: $scope
   }).then(function(popover) {
      $scope.popover = popover; }); $scope.openPopover = function($event) { $scope.popover.show($event); }; $scope.closePopover = function() {
      $scope.popover.hide(); }; //Cleanup the popover when we're done with it! $scope.$on('$destroy', function() {
      $scope.popover.remove(); }); // Execute action on hide popover $scope.$on('popover.hidden', function() { // Execute action }); // Execute action on remove popover $scope.$on('popover.removed', function() {
      // Execute action
   });
})

ここで、を追加します script ポップオーバー関数を呼び出すために使用しているHTMLファイルへのテンプレートを使用します。

既存のHTMLファイルからのHTMLコード

<script id = "popover.html" type = "text/ng-template">
   <ion-popover-view>
	
      <ion-header-bar>
         <h1 class = "title">Popover Title</h1>
      </ion-header-bar>
		
      <ion-content>
         Popover Content!
      </ion-content>
		
   </ion-popover-view>
</script>

HTMLを別のファイルとして作成する場合は、で新しいHTMLファイルを作成できます。 templates フォルダーを作成し、上記の例で使用したものと同じコードを使用します。 script タグ。

新しく作成されたHTMLファイルは次のとおりです。

<ion-popover-view>
   <ion-header-bar>
      <h1 class = "title">Popover Title</h1>
   </ion-header-bar>
	
   <ion-content>
      Popover Content!
   </ion-content>
</ion-popover-view>

最後に必要なのは、クリックしてポップオーバーを表示するボタンを作成することです。

<button class = "button" ng-click = "openPopover($event)">Add Popover</button>

上記の例からどのように選択しても、出力は常に同じになります。

次の表は、 $ionicPopover 使用できるメソッド。

方法	オプション	タイプ	詳細
initialize（options）	scope、focusFirst、backdropClickToClose、hardwareBackButtonClose	オブジェクト、ブール値、ブール値、ブール値	Scopeカスタムスコープをポップオーバーに渡すために使用されます。デフォルトは$ rootScopeです。focusFirstInput ポップオーバーの最初の入力をオートフォーカスするために使用されます。 backdropClickToClose 背景をクリックしたときにポップオーバーを閉じるために使用されます。 hardwareBackButtonClose ハードウェアの戻るボタンが押されたときにポップオーバーを閉じるために使用されます。
show（$ event）	$ event	約束する	ポップオーバーの表示が終了すると解決しました。
隠す（）	/	約束する	ポップオーバーの非表示が終了したときに解決されました。
削除する（）	/	約束する	ポップオーバーの削除が終了したときに解決されました。
示されています（）	/	ブール値	ポップオーバーが表示されている場合はtrueを返し、表示されていない場合はfalseを返します。

このサービスは、通常のビューの上にポップアップウィンドウを作成するために使用され、ユーザーとの対話に使用されます。ポップアップには4つのタイプがあります。show、 confirm、 alert そして prompt。

表示ポップアップの使用

このポップアップは、すべての中で最も複雑です。ポップアップをトリガーするには、を注入する必要があります$ionicPopup コントローラにサービスを提供してから、使用するポップアップをトリガーするメソッドを追加します。この場合は $ionicPopup.show()。ザ・onTap(e) 関数を使用して追加できます e.preventDefault()入力に変更が適用されていない場合、ポップアップを開いたままにするメソッド。ポップアップを閉じると、約束されたオブジェクトが解決されます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showPopup = function() { $scope.data = {}
    
      // Custom popup
      var myPopup = $ionicPopup.show({ template: '<input type = "text" ng-model = "data.model">', title: 'Title', subTitle: 'Subtitle', scope: $scope,
			
         buttons: [
            { text: 'Cancel' }, {
               text: '<b>Save</b>',
               type: 'button-positive',
               onTap: function(e) {
						
                  if (!$scope.data.model) { //don't allow the user to close unless he enters model... e.preventDefault(); } else { return $scope.data.model;
                  }
               }
            }
         ]
      });

      myPopup.then(function(res) {
         console.log('Tapped!', res);
      });    
   };
})

HTMLコード

<button class = "button" ng-click = "showPopup()">Add Popup Show</button>

上記の例で、いくつかの新しいオプションが使用されていることに気付いたと思います。次の表に、これらすべてのオプションとその使用例を示します。

ポップアップオプションを表示する

オプション	タイプ	詳細
テンプレート	ストリング	ポップアップのインラインHTMLテンプレート。
templateUrl	ストリング	HTMLテンプレートのURL。
題名	ストリング	ポップアップのタイトル。
字幕	ストリング	ポップアップのサブタイトル。
cssClass	ストリング	ポップアップのCSSクラス名。
範囲	範囲	ポップアップのスコープ。
ボタン	配列[オブジェクト]	ポップアップのフッターに配置されるボタン。彼らは独自のプロパティとメソッドを使用できます。text ボタンの上に表示され、 type ボタンに使用されるIonicクラスです。 onTapボタンをタップするとトリガーされる機能です。値を返すと、Promiseは指定された値で解決されます。

確認ポップアップの使用

確認ポップアップは、Ionicポップアップのより単純なバージョンです。これには、ユーザーが対応する機能をトリガーするために押すことができる[キャンセル]ボタンと[OK]ボタンが含まれています。ボタンの1つが押されたときに解決される約束されたオブジェクトを返します。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   // When button is clicked, the popup will be shown...
   $scope.showConfirm = function() { var confirmPopup = $ionicPopup.confirm({
         title: 'Title',
         template: 'Are you sure?'
      });

      confirmPopup.then(function(res) {
         if(res) {
            console.log('Sure!');
         } else {
            console.log('Not sure!');
         }
      });
	};
})

HTMLコード

<button class = "button" ng-click = "showConfirm()">Add Popup Confirm</button>

次の表で、このポップアップに使用できるオプションについて説明します。

ポップアップオプションを確認する

オプション	タイプ	詳細
テンプレート	ストリング	ポップアップのインラインHTMLテンプレート。
templateUrl	ストリング	HTMLテンプレートのURL。
題名	ストリング	ポップアップのタイトル。
字幕	ストリング	ポップアップのサブタイトル。
cssClass	ストリング	ポップアップのCSSクラス名。
cancelText	ストリング	[キャンセル]ボタンのテキスト。
cancelType	ストリング	キャンセルボタンのイオンボタンタイプ。
okText	ストリング	[OK]ボタンのテキスト。
okType	ストリング	OKボタンのイオンボタンタイプ。

アラートポップアップの使用

アラートは、アラート情報をユーザーに表示するために使用される単純なポップアップです。ポップアップを閉じて、ポップアップの約束されたオブジェクトを解決するために使用されるボタンは1つだけです。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showAlert = function() { var alertPopup = $ionicPopup.alert({
         title: 'Title',
         template: 'Alert message'
      });

      alertPopup.then(function(res) {
         // Custom functionality....
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showAlert()">Add Popup Alert</button>

次の画面が表示されます-

次の表に、アラートポップアップに使用できるオプションを示します。

アラートポップアップオプション

オプション	タイプ	詳細
テンプレート	ストリング	ポップアップのインラインHTMLテンプレート。
templateUrl	ストリング	HTMLテンプレートのURL。
題名	ストリング	ポップアップのタイトル。
字幕	ストリング	ポップアップのサブタイトル。
cssClass	ストリング	ポップアップのCSSクラス名。
okText	ストリング	[OK]ボタンのテキスト。
okType	ストリング	OKボタンのイオンボタンタイプ。

プロンプトポップアップの使用

Ionicを使用して作成できる最後のIonicポップアップは prompt。入力からの値でpromiseを解決するOKボタンと、未定義の値で解決するキャンセルボタンがあります。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPopup) {
   $scope.showPrompt = function() { var promptPopup = $ionicPopup.prompt({
         title: 'Title',
         template: 'Template text',
         inputType: 'text',
         inputPlaceholder: 'Placeholder'
      });
        
      promptPopup.then(function(res) {
         console.log(res);
      });
   };
})

HTMLコード

<button class = "button" ng-click = "showPrompt()">Add Popup Prompt</button>

次の画面が表示されます-

次の表に、プロンプトポップアップに使用できるオプションを示します。

プロンプトポップアップオプション

オプション	タイプ	詳細
テンプレート	ストリング	ポップアップのインラインHTMLテンプレート。
templateUrl	ストリング	HTMLテンプレートのURL。
題名	ストリング	ポップアップのタイトル。
字幕	ストリング	ポップアップのサブタイトル。
cssClass	ストリング	ポップアップのCSSクラス名。
入力方式	ストリング	入力のタイプ。
inputPlaceholder	ストリング	入力のプレースホルダー。
cancelText	ストリング	[キャンセル]ボタンのテキスト。
cancelType	ストリング	キャンセルボタンのイオンボタンタイプ。
okText	ストリング	[OK]ボタンのテキスト。
okType	ストリング	OKボタンのイオンボタンタイプ。

イオンアプリのスクロール操作に使用される要素は、 ion-scroll。

スクロールの使用

次のコードスニペットは、スクロール可能なコンテナを作成し、スクロールパターンを調整します。まず、HTML要素を作成し、それにプロパティを追加します。追加します→direction = "xy"あらゆる方向にスクロールできるようにします。また、スクロール要素の幅と高さも設定します。

HTMLコード

<ion-scroll zooming = "true" direction = "xy" style = "width: 320px; height: 500px">
   <div class = "scroll-container"></div>
</ion-scroll>

次に、世界地図の画像をに追加します div 内部で作成した要素 ion-scroll 幅と高さを設定します。

CSSコード

.scroll-container {
   width: 2600px;
   height: 1000px;
   background: url('../img/world-map.png') no-repeat
}

アプリを実行すると、地図をあらゆる方向にスクロールできます。次の例は、マップの北米部分を示しています。

この地図を好きな場所にスクロールできます。スクロールしてアジアを表示しましょう。

に適用できる他の属性があります ion-scroll。次の表で確認できます。

スクロール属性

属性	タイプ	詳細
方向	ストリング	スクロールの可能な方向。デフォルト値はy
デリゲートハンドル	ストリング	スクロールの識別に使用されます $ionicScrollDelegate。
ロック	ブール値	一度に一方向のスクロールをロックするために使用されます。デフォルト値はtrueです。
ページング	ブール値	ページングをスクロールで使用するかどうかを決定するために使用されます。
オンリフレッシュ	式	プルトゥリフレッシュで呼び出されます。
オンスクロール	式	スクロール時に呼び出されます。
スクロールバー-x	ブール値	水平スクロールバーを表示する必要があります。デフォルト値はtrueです。
スクロールバー-y	ストリング	垂直スクロールバーを表示する必要があります。デフォルト値はtrueです。
ズーミング	ブール値	ピンチツーズームを適用するために使用されます。
最小ズーム	整数	最小ズーム値。
最大ズーム	整数	最大ズーム値。
スクロールバー-x	ブール値	バウンスを有効にするために使用されます。IOSのデフォルト値はtrue、Androidのデフォルト値はfalseです。

無限スクロール

無限スクロールは、スクロールがページの下部を通過するときに何らかの動作をトリガーするために使用されます。次の例は、これがどのように機能するかを示しています。コントローラでは、リストにアイテムを追加するための関数を作成しました。これらのアイテムは、スクロールが最後にロードされた要素の10％を通過したときに追加されます。これは、ロードされた要素が30個になるまで続きます。読み込みが完了するたびに、on-infinite 放送します scroll.infiniteScrollComplete イベント。

HTMLコード

<ion-list>
   <ion-item ng-repeat = "item in items" item = "item">Item {{ item.id }}</ion-item>
</ion-list>

<ion-infinite-scroll ng-if = "!noMoreItemsAvailable" on-infinite = "loadMore()" 
   distance = "10%"></ion-infinite-scroll>

コントローラコード

.controller('MyCtrl', function($scope) {
   $scope.items = []; $scope.noMoreItemsAvailable = false;
   
   $scope.loadMore = function() { $scope.items.push({ id: $scope.items.length}); if ($scope.items.length == 30) {
         $scope.noMoreItemsAvailable = true; } $scope.$broadcast('scroll.infiniteScrollComplete');
   };
})

他の属性も一緒に使用できます ion-infinite-scroll。それらのいくつかを以下の表に示します。

スクロール属性

属性	タイプ	詳細
オン-無限	式	下にスクロールしたときに何と呼ばれるべきか。
距離	ストリング	on-infinite式をトリガーするために必要な底からの距離。
スピナー	ストリング	ロード中に表示されるスピナー
即時チェック	ブール値	画面が読み込まれたときに「on-infinite」を呼び出す必要があります

スクロールデリゲート

Ionicは、スクロール要素を完全に制御するためのデリゲートを提供します。それは注入することによって使用することができます$ionicScrollDelegate コントローラにサービスを提供し、コントローラが提供する方法を使用します。

次の例は、20個のオブジェクトのスクロール可能なリストを示しています。

HTMLコード

<div class = "list">
   <div class = "item">Item 1</div>
   <div class = "item">Item 2</div>
   <div class = "item">Item 3</div>
   <div class = "item">Item 4</div>
   <div class = "item">Item 5</div>
   <div class = "item">Item 6</div>
   <div class = "item">Item 7</div>
   <div class = "item">Item 8</div>
   <div class = "item">Item 9</div>
   <div class = "item">Item 10</div>
   <div class = "item">Item 11</div>
   <div class = "item">Item 12</div>
   <div class = "item">Item 13</div>
   <div class = "item">Item 14</div>
   <div class = "item">Item 15</div>
   <div class = "item">Item 16</div>
   <div class = "item">Item 17</div>
   <div class = "item">Item 18</div>
   <div class = "item">Item 19</div>
   <div class = "item">Item 20</div>
</div>

<button class = "button" ng-click = "scrollTop()">Scroll to Top!</button>

コントローラコード

.controller('DashCtrl', function($scope, $ionicScrollDelegate) {

   $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop();
   };
})

上記のコードは次の画面を生成します-

ボタンをタップすると、スクロールが一番上に移動します。

今、私たちはすべてを通過します $ionicScrollDelegate メソッド。

デリゲートメソッド

方法	パラメーター	タイプ	詳細
scrollTop（パラメータ）	shouldAnimate	ブール値	スクロールをアニメーション化する必要があります。
scrollBottom（パラメーター）	shouldAnimate	ブール値	スクロールをアニメーション化する必要があります。
scrollTo（parameter1、parameter2、parameter3）	左、上、shouldAnimate	数、数、整数	最初の2つのパラメーターは、x軸とy軸のオフセットの値を決定します。
scrollBy（parameter1、parameter2、parameter3）	左、上、shouldAnimate	数、数、整数	最初の2つのパラメーターは、x軸とy軸のオフセットの値を決定します。
zoomTo（parameter1、parameter2、parameter3、parameter4）	level、animate、originLeft、originTop	数、ブール値、数、数	level ズームするレベルを決定するために使用されます。 originLeft そして originRight ズームが発生する場所の座標。
zoomBy（parameter1、parameter2、parameter3、parameter4）	factor、animate、originLeft、originTop	数、ブール値、数、数	factor ズームする係数を決定するために使用されます。 originLeft そして originRight ズームが発生する場所の座標。
getScrollPosition（）	/	/	プロパティとして2つの数値を持つオブジェクトを返します。 left そして right。これらの数値は、ユーザーが左からスクロールした距離と上からスクロールした距離をそれぞれ表します。
アンカースクロール（パラメーター1）	shouldAnimate	ブール値	と同じIDの要素にスクロールします window.loaction.hash。この要素が存在しない場合は、一番上にスクロールします。
FreezeScroll（parameter1）	shouldFreeze	ブール値	特定のスクロールのスクロールを無効にするために使用されます。
FreezeAllScrolls（parameter1）	shouldFreeze	ブール値	アプリ内のすべてのスクロールのスクロールを無効にするために使用されます。
getScrollViews（）	/	オブジェクト	scrollViewオブジェクトを返します。
$ getByHandle（parameter1）	扱う	ストリング	同じハンドルでメソッドを特定のスクロールビューに接続するために使用されます。 $ionicScrollDelegate. $getByHandle('my-handle').scrollTop();

サイドメニューは、最も使用されているIonicコンポーネントの1つです。サイドメニューは、左または右にスワイプするか、その目的で作成されたボタンをトリガーすることで開くことができます。

サイドメニューの使用

必要な最初の要素は ion-side-menus。この要素は、サイドメニューをそれを使用するすべての画面に接続するために使用されます。ザ・ion-side-menu-content 要素はコンテンツが配置される場所であり、 ion-side-menu 要素は私たちが置くことができる場所です side指令。サイドメニューをに追加しますindex.html を配置します ion-nav-viewサイドメニューのコンテンツ内。このようにして、サイドメニューをアプリ全体で使用できます。

index.html

<ion-side-menus>

   <ion-side-menu>side = "left">
      <h1>SIde Menu</h1>
   </ion-side-menu>

   <ion-side-menu-content>
      <ion-nav-view>
      </ion-nav-view>
   </ion-side-menu-content>

</ion-side-menus>

次に、ボタンを作成します with menu-toggle = "left"指令。このボタンは通常、アプリのヘッダーバーに配置されますが、理解を深めるためにテンプレートファイルに追加します。

ボタンをタップするか、右にスワイプすると、サイドメニューが開きます。を設定することもできますmenu-close サイドメニューを閉じるためのボタンを1つだけにしたい場合は、ディレクティブ。ただし、これにはトグルボタンを使用します。

HTMLテンプレート

<button menu-toggle = "left" class = "button button-icon icon ion-navicon"></button>

上記のコードは次の画面を生成します-

にいくつかの属性を追加できます ion-side-menus素子。ザ・enable-menu-with-back-views戻るボタンが表示されているときにサイドメニューを無効にするには、falseに設定できます。これはまた非表示になりますmenu-toggleヘッダーのボタン。他の属性はdelegate-handle、との接続に使用されます $ionicSideMenuDelegate。

ザ・ ion-side-menu-content要素は独自の属性を使用できます。いつdrag-content属性がfalseに設定されている場合、コンテンツ画面をスワイプしてサイドメニューを開く機能が無効になります。ザ・edge-drag-threshold属性のデフォルト値は25です。これは、スワイプが画面の左端と右端から25ピクセルのみ許可されることを意味します。この数値を変更するか、次のように設定できますfalse 画面全体をスワイプできるようにする、または true 無効にします。

ザ・ ion-side-menu 使用できます side上記の例で示した属性。メニューを左側から表示するか右側から表示するかを決定します。ザ・‘is-enabled’ false値の属性はサイドメニューを無効にし、 width属性値は、サイドメニューの幅を表す数値です。デフォルト値は275です。

サイドメニューデリゲート

ザ・ $ionicSideMenuDelegateアプリのすべてのサイドメニューを制御するために使用されるサービスです。使用方法を説明した後、利用可能なすべてのオプションについて説明します。すべてのIonicサービスと同様に、コントローラーへの依存関係として追加し、コントローラーのスコープ内で使用する必要があります。これで、ボタンをクリックすると、すべてのサイドメニューが開きます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicSideMenuDelegate) {
   $scope.toggleLeftSideMenu = function() { $ionicSideMenuDelegate.toggleLeft();
   };
})

HTMLコード

<button class = "button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button>

次の表は、 $ionicScrollDelegate メソッド。

デリゲートメソッド

方法	パラメーター	タイプ	詳細
トグルレフト（パラメーター）	isOpen	ブール値	サイドメニューを開いたり閉じたりするために使用されます。
トグルライト（パラメーター）	isOpen	ブール値	サイドメニューを開いたり閉じたりするために使用されます。
getOpenRatio（）	/	/	メニュー幅に対する開いている部分の比率を返します。メニューの半分を左から開いている場合、配給量は0.5になります。サイドメニューを閉じると0が返されます。メニューの半分が右側から開いていると、-0.5が返されます。
isOpen（）	/	ブール値	サイドメニューが開いている場合はtrueを返し、閉じている場合はfalseを返します。
isOpenLeft（）	/	ブール値	左側のメニューが開いている場合はtrueを返し、閉じている場合はfalseを返します。
isOpenRight（）	/	ブール値	右側のメニューが開いている場合はtrueを返し、閉じている場合はfalseを返します。
getScrollPosition（）	/	/	プロパティとして2つの数値を持つオブジェクトを返します。 left そして right。これらの数値は、ユーザーが左からスクロールした距離と上からスクロールした距離をそれぞれ表します。
canDragContent（parameter1）	canDrag	ブール値	コンテンツをドラッグしてサイドメニューを開くことができるかどうか。
edgeDragThreshold（parameter1）	値	ブール値|数値	値が true、画面の端から25pxドラッグすると、サイドメニューを開くことができます。falseの場合、ドラッグは無効になります。画面の左端と右端からのピクセル値を表す任意の数値を設定できます。
$ getByHandle（parameter1）	扱う	ストリング	同じハンドルでメソッドを特定のサイドメニュービューに接続するために使用されます。 $ionicSideMenuDelegate. $getByHandle('my-handle').toggleLeft();

スライドボックスには、コンテンツ画面をスワイプして変更できるページが含まれています。

スライドボックスの使用

スライドボックスの使い方は簡単です。追加する必要がありますion-slide-box コンテナとしてそして ion-slideそのコンテナ内にボックスクラスがあります。見やすくするために、ボックスに高さと境界線を追加します。

HTMLコード

<ion-slide-box>

   <ion-slide>
      <div class = "box box1">
         <h1>Box 1</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box2">
         <h1>Box 2</h1>
      </div>
   </ion-slide>

   <ion-slide>
      <div class = "box box3">
         <h1>Box 3</h1>
      </div>
   </ion-slide>

</ion-slide-box>

.box1, box2, box3 {
   height: 300px;
   border: 2px solid blue;
}

出力は次のスクリーンショットに示すようになります-

コンテンツを右にドラッグすると、ボックスを変更できます。左にドラッグして前のボックスを表示することもできます。

次の表に、スライドボックスの動作を制御するために使用できるいくつかの属性を示します。

デリゲートメソッド

属性	タイプ	詳細
します-続行します	ブール値	最初または最後のボックスに到達したときにボックスループをスライドさせる必要があります。
自動再生	ブール値	スライドボックスが自動的にスライドするはずです。
スライド間隔	数	自動スライド間の時間値（ミリ秒単位）。デフォルト値は4000です。
ショーページャー	ブール値	ポケットベルが表示されている必要があります。
ポケットベル-クリック	式	ポケットベルがタップされたときに呼び出されます（ポケットベルが表示されている場合）。 $index さまざまなスライドと一致させるために使用されます。
スライド上で変更	式	スライドが変更されたときに呼び出されます。 $index さまざまなスライドと一致させるために使用されます。
アクティブスライド	式	現在のスライドインデックスをバインドするモデルとして使用されます。
デリゲートハンドル	ストリング	スライドボックスの識別に使用されます $ionicSlideBoxDelegate。

スライドボックスデリゲート

ザ・ $ionicSlideBoxDelegateすべてのスライドボックスを制御するために使用されるサービスです。それをコントローラーに注入する必要があります。

コントローラコード

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
   $scope.nextSlide = function() { $ionicSlideBoxDelegate.next();
   }
})

HTMLコード

<button class = "button button-icon icon ion-navicon" ng-click = "nextSlide()"></button>

次の表に示します $ionicSlideBoxDelegate メソッド。

デリゲートメソッド

方法	パラメーター	タイプ	詳細
スライド（パラメータ1、パラメータ2）	スピードを上げる	数、数	パラメータ to スライド先のインデックスを表します。 speed 変化の速さをミリ秒単位で決定します。
enableSlide（parameter1）	shouldEnable	ブール値	スライドを有効または無効にするために使用されます。
previous（parameter1）	速度	数	変更に必要なミリ秒単位の値。
やめる（）	/	/	スライドを停止するために使用されます。
開始（）	/	/	スライドを開始するために使用されます。
currentIndex（）	/	数	現在のスライドのインデックスを返します。
slidesCount（）	/	数	スライドの総数を返します。
$ getByHandle（parameter1）	扱う	ストリング	同じハンドルで特定のスライドボックスにメソッドを接続するために使用されます。 $ionicSlideBoxDelegate. $getByHandle('my-handle').start();

タブは、あらゆるナビゲーションタイプや、アプリ内のさまざまなページの選択に役立つパターンです。同じタブが、Androidデバイスの場合は画面の上部に、IOSデバイスの場合は下部に表示されます。

タブの使用

タブは、を使用してアプリに追加できます ion-tabs コンテナ要素として ion-tabコンテンツ要素として。に追加しますindex.html、ただし、アプリ内の任意のHTMLファイルに追加できます。中に追加しないように注意してくださいion-content それに伴うCSSの問題を回避するため。

index.htmlコード

<ion-tabs class = "tabs-icon-only">

   <ion-tab title = "Home" icon-on = "ion-ios-filing" 
      icon-off = "ion-ios-filing-outline"></ion-tab>

   <ion-tab title = "About" icon-on = "ion-ios-home" 
      icon-off = "ion-ios-home-outline"></ion-tab>

   <ion-tab title = "Settings" icon-on = "ion-ios-star" 
      icon-off = "ion-ios-star-outline"></ion-tab>

</ion-tabs>

次のスクリーンショットに示すように、出力は次のようになります。

利用可能なAPIがあります ion-tab要素。上記の例で示したように、属性として追加できます。title、 icon-on そして icon-off。最後の2つは、選択したタブを残りのタブと区別するために使用されます。上の画像を見ると、最初のタブが選択されていることがわかります。次の表で残りの属性を確認できます。

タブ属性

属性	タイプ	詳細
題名	ストリング	タブのタイトル。
href	ストリング	タブナビゲーションに使用されるリンク。
アイコン	ストリング	タブのアイコン。
アイコンオン	ストリング	選択したときのタブのアイコン。
アイコンオフ	ストリング	選択されていないときのタブのアイコン。
バッジ	式	タブのバッジ。
バッジスタイル	式	タブのバッジスタイル。
オンセレクト	式	タブが選択されたときに呼び出されます
オン-選択解除	式	タブが選択解除されたときに呼び出されます
隠された	式	タブを非表示にするために使用されます。
無効	式	タブを無効にするために使用されます。

タブには、アプリ内のすべてのタブを簡単に制御するための独自のデリゲートサービスもあります。これはコントローラーに注入でき、次の表に示すいくつかの方法があります。

デリゲートメソッド

方法	パラメーター	タイプ	詳細
selectedIndex（）	/	数	選択したタブのインデックスを返します。
$ getByHandle（parameter1）	扱う	ストリング	同じハンドルでメソッドを特定のタブビューに接続するために使用されます。ハンドルを追加できますion-tabs を使用して delegate-handle = "my-handle" 属性。 $ionicTabsDelegate.$getByHandle('my-handle').selectedIndex();

コルドバは提供しています ngCordova、AngularJSで動作するように特別に設計されたラッパーのセットです。

ngCordovaのインストール

Ionicアプリを起動すると、それが使用していることがわかります bower。ngCordovaプラグインの管理に使用できます。Bowerをインストールしている場合は、この手順をスキップしてください。インストールしていない場合は、コマンドプロンプトウィンドウでインストールできます。

C:\Users\Username\Desktop\MyApp> npm install -g bower

今、私たちはインストールする必要があります ngCordova。コマンドプロンプトウィンドウでアプリを開きます。次の例は、デスクトップにあり、名前が付けられているアプリに使用されますMyApp。

C:\Users\Username\Desktop\MyApp> bower install ngCordova

次に、ngCordovaをアプリに含める必要があります。開いたindex.htmlファイルを作成し、次のスクリプトを追加します。これらのスクリプトを前に追加することが重要ですcordova.js 以降 ionic スクリプト。

<script src = "lib/ngCordova/dist/ng-cordova.js"></script>

ここで、角度依存性としてngCordovaを注入する必要があります。app.jsファイルを開き、ngCordovaをAngularモジュールに追加します。Ionicテンプレートアプリの1つを使用したことがある場合は、注入されたionic、コントローラー、およびサービスがあることに気付くでしょう。その場合、配列の最後にngCordovaを追加するだけです。

angular.module('myApp', ['ngCordova'])

次のコマンドを入力すると、すでにインストールされているプラ​​グインをいつでも確認できます。

C:\Users\Username\Desktop\MyApp> cordova plugins ls

これで、Cordovaプラグインを使用できます。他のすべてのプラグインはここで確認できます。

Cordova AdMobプラグインは、広告をネイティブに統合するために使用されます。を使用しますadmobpro admobは非推奨であるため、この章のプラグイン。

AdMobの使用

アプリで広告を使用できるようにするには、AdMobに登録してバナーを作成する必要があります。これを行うと、Ad Publisher ID.これらの手順はIonicフレームワークの一部ではないため、ここでは説明しません。こちらのGoogleサポートチームの手順に従うことができます。

コルドバプラグインはネイティブプラットフォームでのみ機能するため、AndroidまたはiOSプラットフォームもインストールする必要があります。これを行う方法については、環境設定の章ですでに説明しました。

AdMobプラグインはコマンドプロンプトウィンドウにインストールできます。

C:\Users\Username\Desktop\MyApp> cordova plugin add cordova-plugin-admobpro

プラグインをインストールしたので、使用する前にデバイスの準備ができているかどうかを確認する必要があります。これが、次のコードをに追加する必要がある理由です。$ionicPlatform.ready 内部の機能 app.js。

if( ionic.Platform.isAndroid() )  { 
   admobid = { // for Android
      banner: 'ca-app-pub-xxx/xxx' // Change this to your Ad Unit Id for banner...
   };

   if(AdMob) 
      AdMob.createBanner( {
         adId:admobid.banner, 
         position:AdMob.AD_POSITION.BOTTOM_CENTER, 
         autoShow:true
      } );
}

次のスクリーンショットに示すように、出力は次のようになります。

同じコードをiOSまたはWindowsPhoneに適用できます。これらのプラットフォームには異なるIDのみを使用します。バナーの代わりに、画面全体をカバーするインタースティシャル広告を使用できます。

AdMobメソッド

次の表に、admobで使用できるメソッドを示します。

方法	パラメーター	詳細
createBanner（parameter1、parameter2、parameter3）	adId / options、成功、失敗	バナーの作成に使用されます。
removeBanner（）	/	バナーを削除するために使用されます。
showBanner（parameter1）	ポジション	バナーを表示するために使用されます。
showBannerAtXY（parameter1、parameter2）	x、y	指定した場所にバナーを表示するために使用します。
hideBanner（）;	/	バナーを非表示にするために使用されます。
prepareInterstitial（parameter1、parameter2、parameter3）	adId / options、成功、失敗	インタースティシャルの準備に使用されます。
showInterstitial（）;	/	インタースティシャルを表示するために使用されます。
setOptions（parameter1、parameter2、parameter3）	オプション、成功、失敗	他のメソッドのデフォルト値を設定するために使用されます。

AdMobイベント

次の表に、admobで使用できるイベントを示します。

イベント	詳細
onAdLoaded	広告が読み込まれたときに呼び出されます。
onAdFailLoad	広告の読み込みに失敗したときに呼び出されます。
onAdPresent	広告が画面に表示されるときに呼び出されます。
onAdDismiss	広告が却下されたときに呼び出されます。
onAdLeaveApp	ユーザーが広告をクリックしてアプリを離れたときに呼び出されます。

以下の例に従って、これらのイベントを処理できます。

document.addEventListener('onAdLoaded', function(e){
   // Handle the event...
});

Cordovaカメラプラグインは native camera 写真を撮ったり、画像ギャラリーから画像を取得したりします。

カメラの使用

コマンドプロンプトでプロジェクトのルートフォルダーを開き、次のコマンドを使用してCordovaカメラプラグインをダウンロードしてインストールします。

C:\Users\Username\Desktop\MyApp> cordova plugin add org.apache.cordova.camera

次に、カメラプラグインを使用するためのサービスを作成します。を使用しますAngularJS factory と約束オブジェクト $q それは工場に注入する必要があります。

services.jsコード

.factory('Camera', function($q) {
   return {
      getPicture: function(options) {
         var q = $q.defer();

         navigator.camera.getPicture(function(result) {
            q.resolve(result);
         }, function(err) {
            q.reject(err);
         }, options);

         return q.promise;
      }
   }
});

このサービスをアプリで使用するには、依存関係としてコントローラーに挿入する必要があります。CordovaカメラAPIは、getPicture ネイティブカメラを使用して写真を撮るために使用される方法。

ネイティブカメラの設定は、 options へのパラメータ takePicture関数。上記のコードサンプルをコントローラーにコピーして、この動作をトリガーします。カメラアプリケーションを開き、画像データを含む成功コールバック関数またはエラーメッセージを含むエラーコールバック関数を返します。また、作成しようとしている関数を呼び出す2つのボタンが必要であり、画面に画像を表示する必要があります。

HTMLコード

<button class = "button" ng-click = "takePicture()">Take Picture</button>
<button class = "button" ng-click = "getPicture()">Open Gallery</button>
<img ng-src = "{{user.picture}}">

コントローラコード

.controller('MyCtrl', function($scope, Camera) {
   $scope.takePicture = function (options) { var options = { quality : 75, targetWidth: 200, targetHeight: 200, sourceType: 1 }; Camera.getPicture(options).then(function(imageData) { $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };
})

次のスクリーンショットに示すように、出力は次のようになります。

ギャラリーの画像を使用する場合、変更する必要があるのは sourceTypeoptionsパラメータからのメソッド。この変更により、カメラの代わりにダイアログポップアップが開き、デバイスから必要な画像を選択できるようになります。

次のコードを見ることができます。 sourceType オプションがに変更されます 0。これで、2番目のボタンをタップすると、デバイスからファイルメニューが開きます。

コントローラコード

.controller('MyCtrl', function($scope, Camera) { $scope.getPicture = function (options) {
	   var options = {
         quality : 75,
         targetWidth: 200,
         targetHeight: 200,
         sourceType: 0
      };

      Camera.getPicture(options).then(function(imageData) {
         $scope.picture = imageData;;
      }, function(err) {
         console.log(err);
      });
   };  
})

次のスクリーンショットに示すように、出力は次のようになります。

撮影した画像を保存すると、画面に表示されます。あなたはそれをあなたが望むようにスタイリングすることができます。

他のいくつかのオプションも使用できます。そのうちのいくつかを次の表に示します。

パラメータ	タイプ	詳細
品質	数	画像の品質、範囲0〜100
destinationType	数	画像のフォーマット。
ソースの種類	数	画像のソースを設定するために使用されます。
allowEdit	ブール値	画像の編集を可能にするために使用されます。
encodingType	数	値0はJPEGを設定し、値1はPNGを設定します。
targetWidth	数	画像幅のスケーリングに使用されます。
targetHeight	数	画像の高さをスケーリングするために使用されます。
メディアタイプ	ストリング	メディアタイプの設定に使用します。
cameraDirection	数	値0はバックカメラを設定し、値1はフロントカメラを設定します。
popoverOptions	ストリング	iPadでポップオーバーの場所を指定するIOSのみのオプション。
saveToPhotoAlbum	ブール値	画像をフォトアルバムに保存するために使用されます。
正しい向き	ブール値	キャプチャした画像の向きを修正するために使用されます。

このプラグインは、FacebookAPIへの接続に使用されます。Facebookの統合を開始する前に、ここでFacebookアプリを作成する必要があります。Webアプリを作成してから、クイックスタート画面をスキップします。次に、ウェブサイトプラットフォームをに追加する必要がありますsettingsページ。開発中は、サイトのURLに次のコードスニペットを使用できます。

http://localhost:8100/

その後、追加する必要があります Valid OAuth redirect URIs に settings/advancedページ。次の2つのURLをコピーするだけです。

https://www.facebook.com/connect/login_success.html
http://localhost:8100/oauthcallback.html

Facebookプラグインのインストール

このプラグインを使用するときによく発生するいくつかの問題に対処するために、上記のすべての手順を実行しました。このプラグインは、多くの手順が含まれ、ドキュメントにすべてが記載されていないため、設定が困難です。他のCordovaプラグインとの互換性の問題もいくつか知られているので、Teleric verified plugin私たちのアプリのバージョン。コマンドプロンプトからアプリにブラウザプラットフォームをインストールすることから始めます。

C:\Users\Username\Desktop\MyApp>ionic platform add browser

次に、私たちがする必要があるのは、 root 上の要素 body タグを付ける index.html。

index.html

<div id = "fb-root"></div>

次に、CordovaFacebookプラグインをアプリに追加します。変更する必要がありますAPP_ID そして APP_NAME 以前に作成したFacebookアプリと一致します。

C:\Users\Username\Desktop\MyApp>cordova -d plugin add 
   https://github.com/Telerik-Verified-Plugins/Facebook/ 
   --variable APP_ID = "123456789" --variable APP_NAME = "FbAppName"

開催中 index.html の後に次のコードを追加します body鬼ごっこ。繰り返しますが、appId そして version作成したFacebookアプリと一致しています。これにより、アプリの残りの部分をブロックすることなく、FacebookSDKが非同期に読み込まれるようになります。

index.html

<script>
   window.fbAsyncInit = function() {
      FB.init({
         appId      : '123456789',
         xfbml      : true,
         version    : 'v2.4'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Angular Service

すべてをインストールしたので、Facebookに接続するサービスを作成する必要があります。これらのことは、内部のより少ないコードで実行できますcontroller、ただし、ベストプラクティスに従うように努めているため、Angularサービスを使用します。次のコードは、サービス全体を示しています。後で説明します。

services.js

.service('Auth', function($q, $ionicLoading) { this.getLoginStatus = function() { var defer = $q.defer();
      
      FB.getLoginStatus(function(response) {
		   if (response.status === "connected") {
            console.log(JSON.stringify(response));
         } else {
            console.log("Not logged in");
         }
      });

      return defer.promise;
   }
   this.loginFacebook = function() {
      var defer = $q.defer(); FB.login(function(response) { if (response.status === "connected") { console.log(JSON.stringify(response)); } else { console.log("Not logged in!"); } }); return defer.promise; } this.logoutFacebook = function() { var defer = $q.defer();

      FB.logout(function(response) {
         console.log('You are logged out!');
      });

      return defer.promise;
   }
   this.getFacebookApi = function() {
      var defer = $q.defer();

      FB.api("me/?fields = id,email", [], function(response) {
		
         if (response.error) {
            console.log(JSON.stringify(response.error));
         } else {
            console.log(JSON.stringify(response));
         }
      });

      return defer.promise;
   }
});

上記のサービスでは、4つの関数を作成しています。最初の3つは自明です。4番目の関数は、FacebookグラフAPIに接続するために使用されます。それは戻りますid そして email Facebookユーザーから。

私たちは作成しています promise objects非同期のJavaScript関数を処理します。次に、これらの関数を呼び出すコントローラーを作成する必要があります。理解を深めるために各関数を個別に呼び出しますが、目的の効果を得るには、おそらくそれらのいくつかを一緒に混合する必要があります。

コントローラコード

.controller('MyCtrl', function($scope, Auth, $ionicLoading) { $scope.checkLoginStatus = function() {
      getLoginUserStatus();
   }

   $scope.loginFacebook = function(userData) { loginFacebookUser(); }; $scope.facebookAPI = function() {
      getFacebookUserApi();
   }

   $scope.logoutFacebook = function() {
      logoutFacebookUser();
   };

   function loginFacebookUser() {
      return Auth.loginFacebook();
   }

   function logoutFacebookUser() {
      return Auth.logoutFacebook();
   }

   function getFacebookUserApi() {
      return Auth.getFacebookApi();
   }

   function getLoginUserStatus() {
      return Auth.getLoginStatus();
   }
})

なぜ私たちが戻ってこなかったのか疑問に思われるかもしれません Auth関数式（最初の4つの関数）から直接サービスを提供します。これは、次の後にさらに動作を追加する必要があるためです。Auth関数が返されます。データベースにデータを送信したり、ログイン後にルートを変更したりする場合があります。これは、JavaScriptを使用して簡単に行うことができます。then() コールバックの代わりにすべての非同期操作を処理するメソッド。

次に、ユーザーがアプリを操作できるようにする必要があります。HTMLには、作成した4つの関数を呼び出すための4つのボタンが含まれます。

HTMLコード

<button class = "button" ng-click = "loginFacebook()">LOG IN</button>
<button class = "button" ng-click = "logoutFacebook()">LOG OUT</button>
<button class = "button" ng-click = "checkLoginStatus()">CHECK</button>
<button class = "button" ng-click = "facebookAPI()">API</button>

ユーザーがタップすると LOG INボタンをクリックすると、Facebook画面が表示されます。ログインが成功すると、ユーザーはアプリにリダイレクトされます。

Cordova InAppBrowserプラグインは、Webブラウザービュー内でアプリから外部リンクを開くために使用されます。

ブラウザの使用

このプラグインを使い始めるのはとても簡単です。コマンドプロンプトウィンドウを開いて、Cordovaプラグインをインストールするだけです。

C:\Users\Username\Desktop\MyApp>cordova plugin add org.apache.cordova.inappbrowser

このステップにより、使用を開始できます inAppBrowser。これで、外部リンクにつながるボタンを作成し、プラグインをトリガーするための簡単な関数を追加できます。

HTMLコード

<button class = "button" ng-click = "openBrowser()">OPEN BROWSER</button>

コントローラコード

.controller('MyCtrl', function($scope, $cordovaInAppBrowser) { var options = { location: 'yes', clearcache: 'yes', toolbar: 'no' }; $scope.openBrowser = function() {
      $cordovaInAppBrowser.open('http://ngcordova.com', '_blank', options)
		
      .then(function(event) {
         // success
      })
		
      .catch(function(event) {
         // error
      });
   }
})

ユーザーがボタンをタップすると、InAppBrowserは指定されたURLを開きます。

このプラグインでは、他のいくつかの方法を使用できます。そのうちのいくつかを次の表に示します。

Cordova $ inAppBrowserメソッド

方法	パラメーター	タイプ	詳細
setDefaultOptions（parameter1）	オプション	オブジェクト	すべてのInAppBrowserのグローバルオプションを設定するために使用されます。
open（parameter1、parameter2、parameter3）	URL、ターゲット、オプション	文字列、文字列、オブジェクト	利用可能なターゲットは3つあります。 _blank 新しいinAppBrowserインスタンスを開きます。 _system システムブラウザを開き、 _self 現在のブラウザインスタンスを使用します。
閉じる	/	/	InAppBrowserを閉じるために使用されます。

CordovaInAppBrowserイベント

このプラグインは、と組み合わせることができるイベントも提供します $rootScope。

例	詳細
$ rootScope。$on('$cordovaInAppBrowser：loadstart '、function（e、event））;	inAppBrowserがページの読み込みを開始したときに呼び出されます。
$rootScope.$on（ '$ cordovaInAppBrowser：loadstop'、function（e、event））;	inAppBrowserがページの読み込みを完了したときに呼び出されます。
$ rootScope。$on('$cordovaInAppBrowser：loaderror '、function（e、event））;	inAppBrowserでエラーが発生したときに呼び出されます。
$rootScope.$on（ '$ cordovaInAppBrowser：exit'、function（e、event））;	inAppBrowserウィンドウが閉じているときに呼び出されます。

このプラグインは、ネイティブオーディオサウンドをIonicアプリに追加するために使用されます。

ネイティブオーディオの使用

このプラグインを使用できるようにするには、最初にプラグインをインストールする必要があります。コマンドプロンプトウィンドウを開き、Cordovaプラグインを追加します。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-nativeaudio

このプラグインの使用を開始する前に、オーディオファイルが必要です。簡単にするために、click.mp3 内部のファイル js フォルダですが、好きな場所に配置できます。

次のステップは、オーディオファイルをプリロードすることです。利用可能な2つのオプションがあります。

• preloadSimple −一度再生されるシンプルな音に使用します。

• preloadComplex −ループ音またはバックグラウンドオーディオとして再生される音用です。

次のコードをコントローラーに追加して、オーディオファイルをプリロードします。オーディオファイルをプリロードする前に、Ionicプラットフォームがロードされていることを確認する必要があります。

コントローラコード

$ionicPlatform.ready(function() {
   $cordovaNativeAudio .preloadSimple('click', 'js/click.mp3') .then(function (msg) { console.log(msg); }, function (error) { console.log(error); }); $cordovaNativeAudio.preloadComplex('click', 'js/click.mp3', 1, 1)
	.then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.error(error);
   });
});

同じコントローラーに、オーディオを再生するためのコードを追加します。私たちの$timeout 関数は5秒後にループオーディオを停止してアンロードします。

$scope.playAudio = function () {
   $cordovaNativeAudio.play('click'); }; $scope.loopAudio = function () {
   $cordovaNativeAudio.loop('click'); $timeout(function () {
      $cordovaNativeAudio.stop('click'); $cordovaNativeAudio.unload('click');
   }, 5000);
}

最後に必要なのは、オーディオを再生およびループするためのボタンを作成することです。

HTMLコード

<button class = "button" ng-click = "playAudio()">PLAY</button>

<button class = "button" ng-click = "loopAudio()">LOOP</button>

再生ボタンをタップすると音が1回聞こえ、ループボタンをタップすると5秒間ループしてから停止します。このプラグインは、エミュレーターまたはモバイルデバイスでのみ機能します。

このプラグインは、ジオロケーションプラグインをIonicアプリに追加するために使用されます。

ジオロケーションの使用

ジオロケーションプラグインを使用する簡単な方法があります。コマンドプロンプトウィンドウからこのプラグインをインストールする必要があります。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-geolocation

次のコントローラーコードは2つの方法を使用しています。最初のものはgetCurrentPositionメソッドを使用すると、ユーザーのデバイスの現在の緯度と経度が表示されます。2つ目はwatchCurrentPosition 位置が変更されたときにデバイスの現在の位置を返すメソッド。

コントローラコード

.controller('MyCtrl', function($scope, $cordovaGeolocation) {
   var posOptions = {timeout: 10000, enableHighAccuracy: false};
   $cordovaGeolocation .getCurrentPosition(posOptions) .then(function (position) { var lat = position.coords.latitude var long = position.coords.longitude console.log(lat + ' ' + long) }, function(err) { console.log(err) }); var watchOptions = {timeout : 3000, enableHighAccuracy: false}; var watch = $cordovaGeolocation.watchPosition(watchOptions);
	
   watch.then(
      null,
		
      function(err) {
         console.log(err)
      },
	   function(position) {
         var lat  = position.coords.latitude
         var long = position.coords.longitude
         console.log(lat + '' + long)
      }
   );

   watch.clearWatch();
})

あなたも気づいたかもしれません posOptions そして watchOptionsオブジェクト。使用していますtimeout ミリ秒単位で通過できる最大時間の長さを調整し、 enableHighAccuracyfalseに設定されています。に設定できますtrue可能な限り最高の結果を得るには、エラーが発生する場合があります。もありますmaximumAge古いポジションがどのように受け入れられるかを示すために使用できるオプション。タイムアウトオプションと同じミリ秒を使用しています。

アプリを起動してコンソールを開くと、デバイスの緯度と経度がログに記録されます。私たちの位置が変わると、lat そして long 値が変更されます。

このプラグインを使用すると、デバイスでオーディオファイルを録音および再生できます。

メディアの使用

他のすべてのCordovaプラグインと同様に、最初に行う必要があるのは、コマンドプロンプトウィンドウからプラグインをインストールすることです。

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-media

これで、プラグインを使用する準備が整いました。次のコードサンプルでは、srcこのチュートリアルで使用するソースmp3ファイルです。に配置されますjs フォルダですが、追加する必要があります /android_asset/www/ その前に、それはアンドロイドデバイスで使用することができます。

完全な機能は、 $ionicPlatform.ready()プラグインが使用される前にすべてがロードされることを保証する関数。その後、作成していますmedia を使用してオブジェクト newMedia(src)方法。ザ・media オブジェクトは、再生、一時停止、停止、および解放機能を追加するために使用されます。

コントローラコード

.controller('MyCtrl', function($scope, $ionicPlatform, $cordovaMedia) {
   $ionicPlatform.ready(function() { var src = "/android_asset/www/js/song.mp3"; var media = $cordovaMedia.newMedia(src);

      $scope.playMedia = function() { media.play(); }; $scope.pauseMedia = function() {
         media.pause();
      };

      $scope.stopMedia = function() { media.stop(); }; $scope.$on('destroy', function() {
         media.release();
      });
   });
}

また、再生、一時停止、停止機能を呼び出すための3つのボタンを作成します。

<button class = "button" ng-click = "playMedia()">PLAY</button>

<button class = "button" ng-click = "pauseMedia()">PAUSE</button>

<button class = "button" ng-click = "stopMedia()">STOP</button>

このプラグインを機能させるには、エミュレーターまたはモバイルデバイスで実行する必要があります。ユーザーが再生ボタンをタップすると、song.mp3 再生を開始します。

上記の例で、私たちが使用していることがわかります srcオプションパラメータとして。に使用できる他のオプションのパラメータがありますnewMedia 方法。

オプションのパラメータ

次の表に、使用可能なすべてのオプションパラメータを示します。

パラメータ	タイプ	詳細
mediaSuccess	関数	現在の再生/録音または停止アクションが完了した後に呼び出されます。
mediaError	関数	エラーが発生したときに呼び出されます。
mediaStatus	関数	ステータスの変更を表示するために呼び出されます。

次の表に、使用可能なすべてのメソッドを示します。

利用可能な方法

次の表に、使用可能なすべてのメソッドを示します。

方法	パラメーター	詳細
newMedia（parameter1）	src	将来のメソッドで使用されるメディアオブジェクトを返します。 src オーディオコンテンツのURIです。
getCurrentPosition	/	オーディオファイル内の現在の位置を返します。
getDuration	/	オーディオファイルの長さを返します。
演奏する	/	再生を開始または再開するために使用されます。
一時停止	/	再生を一時停止するために使用されます。
やめる	/	再生を停止するために使用されます。
リリース	/	オーディオリソースを解放するために使用されます。
seekTo（parameter1）	ミリ秒	再生位置をミリ秒単位で設定するために使用されます。
setVolume（parameter1）	ボリューム	音量を変更するために使用されます。範囲は0から1です
startRecord（）	/	録音を開始するために使用されます。
stopRecord	/	記録を停止するために使用されます。

すべてのモバイルアプリには、アイコンとスプラッシュ画面が必要です。Ionicは、それを追加するための優れたソリューションを提供し、開発者の作業を最小限に抑えます。トリミングとサイズ変更は、Ionicサーバーで自動化されています。

スプラッシュ画面とアイコンの追加

前の章では、Ionicアプリにさまざまなプラットフォームを追加する方法について説明しました。プラットフォームを追加することにより、Ionicはそのプラットフォーム用のCordovaスプラッシュスクリーンプラグインをインストールするため、後で何もインストールする必要はありません。私たちがする必要があるのは、2つの画像を見つけることだけです。

画像は png、 psd または aiファイル。最小サイズは、アイコン画像の場合は192x192、スプラッシュ画面画像の場合は2208x2208である必要があります。この寸法はすべてのデバイスをカバーします。この例では、両方に同じ画像を使用します。画像はに保存する必要がありますresourcesデフォルトのものの代わりにフォルダ。それが終わったら、必要なのはコマンドプロンプトウィンドウで以下を実行することだけです。

C:\Users\Username\Desktop\MyApp>ionic resources

さて、チェックすれば resources/android または resources/iosフォルダの場合、前に追加した画像がさまざまな画面サイズに対応するようにサイズ変更およびトリミングされていることがわかります。デバイスでアプリを実行すると、アプリが起動する前にスプラッシュ画面が表示され、デフォルトのIonicアイコンが変更されていることがわかります。

NOTE − AndroidとiOSで異なる画像を使用する場合は、に追加できます resources/android そして resources/ios の代わりに resources フォルダ。