Ionic 快速指南

---

---

Ionic - 概述

Ionic 是一個基於 AngularJS 和 Cordova 構建的前端 HTML 框架。根據其官方文件，Ionic 開源框架的定義如下：

Ionic 是一個HTML5 移動應用開發框架，目標是構建混合移動應用。可以將 Ionic 視為處理應用所需的所有外觀和感覺以及 UI 互動的前端 UI 框架。有點像“原生的 Bootstrap”，但支援廣泛的常用原生移動元件、流暢的動畫和精美的設計。

Ionic 框架特性

以下是 Ionic 最重要的特性：

• AngularJS - Ionic 使用 AngularJS MVC 架構構建針對移動裝置最佳化的豐富的單頁應用。

• CSS 元件 - 這些元件具有原生外觀和感覺，提供了移動應用所需的大多數元素。可以輕鬆覆蓋元件的預設樣式以適應您自己的設計。

• JavaScript 元件 - 這些元件使用 JavaScript 功能擴充套件 CSS 元件，以涵蓋僅使用 HTML 和 CSS 無法實現的所有移動元素。

• Cordova 外掛 - Apache Cordova 外掛提供了使用 JavaScript 程式碼呼叫原生裝置功能所需的 API。

• Ionic CLI - 這是一個由 NodeJS 提供支援的實用程式，包含用於啟動、構建、執行和模擬 Ionic 應用的命令。

• Ionic View - 一個非常有用的平臺，用於將您的應用上傳、共享並在原生裝置上進行測試。

• 許可證 - Ionic 在 MIT 許可證下發布。

Ionic 框架優勢

以下是 Ionic 框架的一些最常見的優勢：

• Ionic 用於混合應用開發。這意味著您可以為 IOS、Android、Windows Phone 和 Firefox OS 打包您的應用，這可以節省大量工作時間。

• 由於 Ionic 提供了具有簡單佈局的預生成應用設定，因此啟動應用非常容易。

• 應用以非常簡潔和模組化的方式構建，因此易於維護和更新。

• Ionic 開發者團隊與 Google 開發者團隊保持著良好的合作關係，他們正在共同努力改進框架。更新定期釋出，Ionic 支援團隊隨時準備在需要時提供幫助。

Ionic 框架侷限性

以下是 Ionic 框架的一些最重要的侷限性：

• 測試可能很棘手，因為瀏覽器並不總是能提供有關手機環境的正確資訊。裝置和平臺種類繁多，通常需要涵蓋大多數裝置和平臺。

• 組合不同的原生功能可能很困難。在許多情況下，您會遇到外掛相容性問題，這會導致難以除錯的構建錯誤。

• 混合應用往往比原生應用慢。但是，由於移動技術發展迅速，這在將來將不再是一個問題。

在下一章中，我們將瞭解 Ionic 開源框架的環境設定。

Ionic - 環境設定

本章將向您展示如何開始使用 Ionic 框架。下表包含開始使用 Ionic 所需的元件列表。

安裝 Cordova 和 Ionic

在本教程中，我們將使用 Windows 命令提示符。相同的步驟可以應用於 OSX 終端。開啟您的命令視窗以安裝 Cordova 和 Ionic：

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

建立應用

在 Ionic 中建立應用時，您可以從以下三個選項中選擇一個開始：

• 標籤應用
• 空白應用
• 側邊選單應用

在您的命令視窗中，開啟您要建立應用的資料夾，然後嘗試以下選項之一。

標籤應用

如果您想使用 Ionic 標籤模板，則應用將使用標籤選單、頁首和一些有用的螢幕和功能構建。這是預設的 Ionic 模板。開啟您的命令視窗並選擇您要建立應用的位置。

C:\Users\Username> cd Desktop

此命令將更改工作目錄。應用將建立在桌面上。

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

Ionic Start 命令將建立一個名為 myApp 的資料夾並設定 Ionic 檔案和資料夾。

C:\Users\Username\Desktop> cd myApp

現在，我們要訪問剛剛建立的 myApp 資料夾。這是我們的根資料夾。

現在讓我們為 Android 平臺新增 Cordova 專案並安裝基本的 Cordova 外掛。以下程式碼允許我們在 Android 模擬器或裝置上執行應用。

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

下一步是構建應用。如果您在執行以下命令後遇到構建錯誤，則可能沒有安裝 Android SDK 及其依賴項。

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

安裝過程的最後一步是執行您的應用，這將啟動連線的移動裝置，或者啟動預設的模擬器（如果未連線裝置）。Android 預設模擬器速度很慢，因此我建議您安裝 Genymotion 或其他流行的 Android 模擬器。

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

這將生成以下結果，這是一個 Ionic 標籤應用。

空白應用

如果您想從頭開始，可以安裝 Ionic 空白模板。我們將使用上面解釋的相同步驟，但使用 ionic start myApp blank 而不是 ionic start myApp tabs，如下所示。

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

Ionic 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，如下面的程式碼所示。

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

Ionic 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 側邊選單應用。

在瀏覽器中測試應用

由於我們使用的是 JavaScript，因此您可以在任何 Web 瀏覽器中提供您的應用。這將加快您的構建過程，但您應始終在原生模擬器和裝置上測試您的應用。鍵入以下程式碼以在 Web 瀏覽器中提供您的應用。

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

上述命令將在 Web 瀏覽器中開啟您的應用。Google Chrome 提供了用於移動開發測試的裝置模式功能。按 F12 訪問開發者控制檯。

控制檯視窗左上角單擊具有“切換裝置模式”圖示。下一步將是單擊右上角的“停靠到右側”圖示。重新整理頁面後，您應該準備好在 Web 瀏覽器中進行測試。

專案資料夾結構

Ionic 為所有型別的應用建立以下目錄結構。對於任何 Ionic 開發人員來說，瞭解每個目錄和下面提到的檔案的用途非常重要：

讓我們快速瞭解上圖所示的專案資料夾結構中所有可用的資料夾和檔案。

• Hooks - 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作為應用程式的起點。

• 其他檔案 − 由於這是一個初學者教程，我們只會提及一些其他重要檔案及其用途。

  • .bowerrc是bower配置檔案。

  • .editorconfig是編輯器配置檔案。

  • .gitignore用於指示在將應用程式推送到Git儲存庫時應忽略應用程式的哪一部分。

  • bower.json將包含bower元件和依賴項（如果您選擇使用bower包管理器）。

  • gulpfile.js用於使用gulp任務管理器建立自動化任務。

  • config.xml是Cordova配置檔案。

  • package.json包含有關應用程式、其依賴項以及使用NPM包管理器安裝的外掛的資訊。

在下一章中，我們將討論Ionic開源框架中可用的不同顏色。

Ionic - 顏色

在我們開始使用Ionic框架中可用的實際元素之前，讓我們先了解一下Ionic如何使用顏色來表示不同的元素。

Ionic顏色類

Ionic框架為我們提供了一組九種預定義的顏色類。您可以使用這些顏色，也可以用您自己的樣式覆蓋它們。

下表顯示了Ionic提供的九種預設顏色集。在本教程中，我們將使用這些顏色為不同的Ionic元素設定樣式。目前，您可以檢查如下所示的所有顏色：

Ionic顏色用法

Ionic為每個元素使用不同的類。例如，標題元素將具有bar類，按鈕將具有button類。為了簡化用法，我們透過在顏色名稱前新增元素類來使用不同的顏色。

例如，要建立藍色標題，我們將使用bar-calm，如下所示：

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

類似地，要建立灰色按鈕，我們將使用button-stable類，如下所示。

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

您還可以像任何其他CSS類一樣使用Ionic顏色類。現在，我們將使用balanced（綠色）和energized（黃色）顏色為兩個段落設定樣式。

<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";

我們將balanced顏色更改為深藍色，energized顏色更改為橙色。我們上面使用的兩個段落現在是深藍色和橙色。

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

現在，如果您使用以下示例：

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

以上程式碼將生成以下螢幕：

所有使用這些類的Ionic元素都將更改為深藍色和橙色。請注意，您不需要使用Ionic預設顏色類。您可以隨時按照您想要的方式設定元素樣式。

重要說明

安裝SASS後，將從index.html的頭部刪除www/css/style.css檔案。如果仍要使用它，則需要手動連結它。開啟index.html，然後在頭部新增以下程式碼。

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

Ionic - 內容

幾乎每個移動應用程式都包含一些基本元素。通常，這些元素包括一個標題和一個頁尾，它們將覆蓋螢幕的頂部和底部。所有其他元素都將放置在這兩者之間。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 - 頁首

Ionic標題欄位於螢幕頂部。它可以在頂部包含標題、圖示、按鈕或其他一些元素。有一些您可以使用的預定義標題類。您可以在本教程中檢視所有內容。

新增標題

您可能在應用程式中使用的所有欄的主要類是bar。此類將始終應用於應用程式中的所有欄。所有bar子類都將使用字首– bar。

如果要建立標題，則需要在主bar類之後新增bar-header。開啟您的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>

以上程式碼將生成以下螢幕：

您可以使用以下九個類中的任何一個來為應用程式標題提供您選擇的顏色：

標題元素

我們可以在標題內新增其他元素。以下程式碼是示例，用於在標題內新增選單按鈕和主頁按鈕。我們還將在標題按鈕的頂部新增圖示。

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

以上程式碼將生成以下螢幕：

子標題

您可以建立一個子標題，它將位於標題欄的正下方。以下示例將顯示如何向您的應用程式新增標題和子標題。在這裡，我們已使用“assertive”（紅色）顏色類為子標題設定了樣式。

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

以上程式碼將生成以下螢幕：

當您的路由更改為應用程式螢幕中的任何一個時，您會注意到標題和子標題覆蓋了一些內容，如下面的螢幕截圖所示。

要解決此問題，您需要向螢幕的ion-content標籤新增‘has-header’或‘has-subheader’類。開啟www/templates中的一個HTML檔案，並將has-subheader類新增到ion-content中。如果您的應用程式中只使用標題，則需要新增has-header類。

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

以上程式碼將生成以下螢幕：

Ionic - 頁尾

Ionic頁尾位於應用程式螢幕的底部。使用頁尾幾乎與使用標題相同。

新增頁尾

Ionic頁尾的主要類是bar（與標題相同）。當您想要向螢幕新增頁尾時，需要在主bar類之後向元素新增bar-footer類。由於我們希望在應用程式的每個螢幕上都使用頁尾，因此我們將將其新增到index.html檔案的body中。我們還將為頁尾新增標題。

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

以上程式碼將生成以下螢幕：

您可以使用以下九個類中的任何一個來為應用程式頁尾提供您選擇的顏色：

頁尾元素

頁尾可以在其中包含元素。大多數時候，您需要在頁尾內新增帶圖示的按鈕。

新增的第一個按鈕將始終位於左角。最後一個將放置在右側。中間的按鈕將與左側第一個按鈕相鄰分組到頁尾的左側。在以下示例中，您還可以注意到我們使用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 - 按鈕

Ionic框架中有幾種型別的按鈕，這些按鈕具有微妙的動畫效果，這在使用應用程式時進一步增強了使用者體驗。所有按鈕型別的主要類是button。此類將始終應用於我們的按鈕，並且在使用子類時我們將將其用作字首。

塊按鈕

塊按鈕始終具有其父容器的100%寬度。它們還將應用一個小填充。您將使用button-block類新增塊按鈕。如果要刪除填充但保留完整寬度，可以使用button-full類。

下面是一個展示這兩個類用法的例子 -

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

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

以上程式碼將生成以下螢幕：

按鈕大小

有兩個 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>

以上程式碼將生成以下螢幕：

你可以使用以下九個類中的任意一個，為你的應用按鈕提供你選擇的顏色 -

按鈕輪廓

如果你希望你的按鈕透明，你可以應用button-outline類。使用此類的按鈕將具有輪廓邊框和透明背景。

要移除按鈕的邊框，可以使用button-clear類。下面的例子展示瞭如何使用這兩個類。

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

以上程式碼將生成以下螢幕：

Ionic - 列表

列表是任何 Web 或移動應用程式中最流行的元素之一。它們通常用於顯示各種資訊。它們可以與其他 HTML 元素結合使用，以建立不同的選單、選項卡或打破純文字檔案的單調性。Ionic 框架提供了不同的列表型別，以使其使用更加方便。

建立 Ionic 列表

每個列表都是用兩個元素建立的。當你想要建立一個基本列表時，你的<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類之後新增list-insets。這將為它新增一些邊距，並將列表大小調整為你的容器。

<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類。同樣，與所有其他 Ionic 元素一樣，我們只需要在item類之後新增item-divider類即可。專案分隔符可以用作列表標題，因為預設情況下它們比其他列表項具有更強的樣式。

<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類。如果你想在兩側都有圖示，你也可以組合這兩個類。最後，還有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>

以上程式碼將生成以下螢幕：

Ionic - 卡片

由於移動裝置的螢幕尺寸較小，卡片是在使用者友好體驗下顯示資訊的最佳元素之一。在上一章中，我們討論瞭如何內嵌列表。卡片與內嵌列表非常相似，但它們提供了一些額外的陰影，可能會影響大型列表的效能。

新增卡片

可以透過向你的元素新增card類來建立一個預設卡片。卡片通常以具有item類的列表形式構成。其中一個最有用的類是item-text-wrap。當你有太多文字時，這將有所幫助，因此你希望將其包裝在你的卡片內。以下示例中的第一個卡片沒有分配item-text-wrap類，但第二個卡片正在使用它。

<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 - 表單

Ionic 表單主要用於與使用者互動和收集所需資訊。本章將介紹各種文字輸入表單，在我們後續的章節中，我們將解釋如何使用 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 標籤

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>

以上程式碼將生成以下螢幕：

堆疊標籤

堆疊標籤是另一個選項，它允許將你的標籤移動到輸入的頂部或底部。為了實現這一點，我們將向我們的標籤元素新增item-stacked-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>

以上程式碼將生成以下螢幕：

浮動標籤

浮動標籤是我們可使用的第三個選項。這些標籤在我們開始輸入之前將隱藏。一旦開始輸入，它們將以漂亮的浮動動畫出現在元素的頂部。我們可以像使用堆疊標籤一樣使用浮動標籤。唯一的區別是這次我們將使用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>

以上程式碼將生成以下螢幕：

內嵌輸入

在上一章中，我們討論瞭如何內嵌 Ionic 元素。你還可以透過向你的 item 新增item-input-inset類以及向你的 label 新增item-input-wrapper類來內嵌輸入。包裝器將為你的標籤新增額外的樣式。

如果你在標籤旁邊添加了一些其他元素，標籤大小將調整以適應新元素。你也可以在標籤內新增元素（通常是圖示）。

下面的例子展示了兩個內嵌輸入。第一個在標籤旁邊有一個按鈕，第二個在標籤內有一個圖示。我們使用了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>

以上程式碼將生成以下螢幕：

Ionic - 切換

有時使用者有兩個選項可用。處理這種情況的最有效方法是透過切換表單。Ionic 為我們提供了切換元素的類，這些類是動畫化的並且易於實現。

使用切換

切換可以使用兩個 Ionic 類來實現。首先，我們需要建立一個label，原因與我們在上一章中解釋的相同，並向其分配一個toggle類。

在我們的標籤內將建立。你將在下面的示例中注意到使用了另外兩個 Ionic 類。track類將向我們的複選框新增背景樣式，並在點選切換時新增顏色動畫。handle類用於向其新增一個圓形按鈕。

下面的例子展示了兩個切換表單。第一個被選中，第二個沒有被選中。

<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。下一個示例展示瞭如何為切換建立列表。第一個和第二個被選中。

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

以上程式碼將生成以下螢幕：

設定切換樣式

所有 Ionic 顏色類都可以應用於切換元素。字首將是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 - 複選框

Ionic 複選框幾乎與切換相同。這兩個的樣式不同，但用於相同目的。

新增複選框

在建立複選框表單時，你需要向 label 和 input 元素新增checkbox類名。下面的示例展示了兩個簡單的複選框，一個被選中，另一個沒有被選中。

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

以上程式碼將生成以下螢幕：

設定複選框樣式

當你想要設定複選框的樣式時，你需要應用任何具有checkbox字首的 Ionic 顏色類。檢視以下示例以瞭解其外觀。我們將為此示例使用複選框列表。

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

以上程式碼將生成以下螢幕：

Ionic - 單選按鈕

單選按鈕是另一種表單元素，我們將在本章中介紹。單選按鈕與切換和複選框表單的區別在於，使用前者時，你只能從列表中選擇一個單選按鈕。而後者允許你選擇多個。

新增單選按鈕

由於始終有多個單選按鈕可供選擇，所以最好的方法是建立一個列表。每當我們想要多個元素時，我們都會這樣做。列表項類將是item-radio。同樣，我們將為此使用label，就像我們對所有其他表單所做的那樣。Input 將具有name屬性。此屬性將對所有你想要用作可能選擇的按鈕進行分組。item-content類用於清晰地顯示選項。最後，我們將使用radio-icon類來新增複選標記圖示，該圖示將用於標記使用者選擇的選項。

在下面的示例中，有四個單選按鈕，第二個被選中。

<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屬性的用途；以下示例將前兩個和後兩個按鈕分別作為兩個選項組進行分組。

我們將使用item-divider類來分隔兩個組。請注意，第一組的name屬性等於group1，而第二個組使用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 - 範圍

Ionic範圍用於選擇和顯示某事物的級別。它將表示與最大值和最小值相關的實際值。Ionic提供了一種簡單的使用範圍的方法。

使用範圍

範圍用作內部專案元素。使用的類是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>

以上程式碼將生成以下螢幕：

樣式範圍

我們的下一個示例將向您展示如何使用Ionic顏色為範圍設定樣式。顏色類將使用range字首。我們將建立一個包含九個範圍的列表，並以不同的方式對其進行樣式設定。

<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 - 選擇

Ionic Select將為使用者建立一個帶有選擇選項的簡單選單供其選擇。此選擇選單在不同平臺上的外觀將有所不同，因為其樣式由瀏覽器處理。

使用選擇

首先，我們將建立一個label並新增item-input和item-select類。第二個類將向選擇表單新增其他樣式，然後我們將在其中新增input-label類，該類將用於向我們的選擇元素新增名稱。我們還將新增select並在其內部新增option。這是常規的HTML5選擇元素。以下示例顯示了具有三個選項的Ionic Select。

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

以上程式碼將生成以下螢幕：

樣式選擇

以下示例將向您展示如何將樣式應用於選擇。我們正在使用Ionic顏色建立一個包含九個樣式不同的選擇元素的列表。由於我們使用的是帶專案的列表，因此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 - 標籤

Ionic選項卡通常用於移動導航。樣式針對不同的平臺進行了最佳化。這意味著在Android裝置上，選項卡將放置在螢幕頂部，而在IOS上則放置在底部。建立選項卡的方法有很多種。在本章中，我們將詳細瞭解如何建立選項卡。

簡單選項卡

可以使用tabs類建立簡單的選項卡選單。對於使用此類的內部元素，我們需要新增tab-item元素。由於選項卡通常用於導航，因此我們將對選項卡專案使用<a>標籤。以下示例顯示了一個包含四個選項卡的選單。

<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類之後新增tabs-icon-only類。當然，您需要新增要顯示的圖示。

<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字首將一些Ionic顏色新增到選項卡選單中。

在以下示例中，我們將使用tabs-background-positive（藍色）類來設定選單背景的樣式，並使用tabs-color-light（白色）類來設定選項卡圖示的樣式。請注意活動第二個選項卡與其他兩個非活動選項卡之間的區別。

<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 - 網格

使用Ionic網格系統非常簡單。有兩個主要類——row用於處理行，col用於處理列。

您可以選擇任意數量的列或行。它們都將調整其大小以適應可用空間，儘管您可以更改此行為以滿足您的需求。

注意 - 本教程中的所有示例都將對我們的網格應用邊框，以便能夠以易於理解的方式顯示它。

簡單網格

以下示例顯示瞭如何使用col和row類。我們將建立兩行。第一行將有五列，第二行將只有三列。請注意第一行和第二行中列的寬度如何不同。

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

以上程式碼將生成以下螢幕 -

下表顯示了Ionic網格系統提供的可用百分比選項 -

列百分比類名

水平和垂直定位

列可以從左側偏移。它對列的特定大小也適用。這次字首將是col-offset，然後我們將使用上表中顯示的相同百分比數字。以下示例顯示了我們如何將兩行第二列偏移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>

以上程式碼將生成以下螢幕：

您還可以垂直對齊行內的列。可以使用三個類，即 - top、center和bottom類與col字首一起使用。以下程式碼顯示瞭如何垂直放置兩行前三列。

注意 - 在下面的示例中，我們在CSS中添加了“.col {height: 120px}”以向您展示列的垂直放置。

<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網格也可用於響應式佈局。有三個類可用。responsive-sm類將在視口小於橫向手機時將列摺疊成單行。responsive-md類將在視口小於縱向平板電腦時應用。responsive-lg類將在視口小於橫向平板電腦時應用。

以下示例後的第一個影像顯示了responsive-sm類在移動裝置上的外觀，第二個影像顯示了相同的響應式網格在平板電腦上的不同外觀。

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

移動網格檢視

平板電腦網格檢視

Ionic - 圖示

Ionic提供了超過700個高階圖示。還為Android和IOS提供了不同的圖示集。您幾乎可以找到您需要的所有內容，但如果您不想使用它們，則不必使用它們。您可以使用自己的自定義圖示或任何其他圖示集。您可以在這裡檢視所有Ionic圖示。

如何使用圖示？

如果要使用Ionic圖示，請在頁面上找到所需的圖示（https://ionicons.com/）。新增Ionic元素時，始終先新增主類，然後新增所需的子類。所有圖示的主類都是icon。子類是您想要的圖示的名稱。我們將在下面的示例中新增六個圖示 -

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

以上程式碼將生成以下螢幕：

這些圖示的大小可以透過Ionic CSS檔案中的font-size屬性更改。

.icon {
   font-size: 50px;
}

設定圖示大小後，相同的程式碼將生成以下螢幕截圖作為輸出 -

預設圖示

iOS 風格圖示

Android風格圖示

社交圖示

Ionic - 內邊距

Ionic 提供了一種簡單的方法來為元素新增內邊距。可以使用幾個類，它們都會在元素的邊框與其內容之間新增 **10px** 的間距。下表顯示了所有可用的內邊距類。

內邊距類

使用內邊距

當您想要為元素應用一些內邊距時，您只需要分配上面表格中的一個類即可。以下示例顯示了兩個塊按鈕。第一個使用 **padding** 類，第二個沒有。您會注意到第一個按鈕更大，因為它應用了 **10px** 的內邊距。

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

以上程式碼將生成以下螢幕：

Ionic - Javascript 動作表單

**動作表單** 是一個 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** 函式，並且將出現動作表單。您可以建立自己的函式，這些函式將在點選其中一個選項時被呼叫。**cancel** 函式將關閉面板，但您可以新增一些其他行為，這些行為將在點選取消選項之前關閉面板時被呼叫。

**buttonClicked** 函式是您可以編寫程式碼以在點選其中一個編輯選項時呼叫的位置。我們可以使用 **index** 引數跟蹤多個按鈕。**destructiveButtonCLicked** 是一個函式，當點選刪除選項時將觸發該函式。此選項 **預設情況下為紅色**。

**$ionicActionSheet.show()** 方法還有一些其他有用的引數。您可以在下表中檢視所有這些引數。

顯示方法選項

Ionic - Javascript 背景

當應用Ionic Backdrop時，它會覆蓋螢幕的內容。它將顯示在其他覆蓋層（彈出視窗、載入等）下方。有兩種方法可以用於管理Backdrop服務。$ionicBackdrop.retain()將在元件上應用Backdrop，而$ionicBackdrop.release()將將其移除。

使用Backdrop

以下示例展示瞭如何使用Backdrop。我們將$ionicBackdrop作為依賴項新增到控制器中，然後建立$scope.showBackdrop()函式，該函式將立即呼叫retain方法。然後，三秒後，它將呼叫release方法。我們使用$timeout來呼叫release方法，因此也需要將其作為控制器依賴項新增。

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

您會注意到在下面的影像中螢幕顏色變暗，因為應用了Backdrop。

Ionic - JavaScript 內容

幾乎每個移動應用程式都包含一些基本元素。通常這些元素包括頁首和頁尾，它們將覆蓋螢幕的頂部和底部。所有其他元素都將放置在這兩者之間。Ionic 提供了 ion-content 元素作為容器，它將包裝我們想要建立的所有其他元素。

讓我們考慮以下示例 -

<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 - JavaScript 表單

在本章中，我們將瞭解 JavaScript 表單是什麼，並將學習 JavaScript 複選框、單選按鈕和切換按鈕是什麼。

使用 ion-checkbox

讓我們看看如何使用 Ionic JavaScript 複選框。首先，我們需要在 HTML 檔案中建立一個ion-checkbox元素。在其中，我們將分配一個ng-model屬性，該屬性將連線到 Angular 的$scope。您會注意到，即使沒有它也可以工作，但我們在定義模型值時使用了點。這將使我們能夠始終保持子作用域和父作用域之間的連結。

這非常重要，因為它有助於避免將來可能發生的一些問題。建立元素後，我們將使用 Angular 表示式繫結其值。

<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”，如下面的螢幕截圖所示。

使用 ion-radio

首先，我們應該在 HTML 中建立三個ion-radio元素，併為其分配ng-model和ng-value。之後，我們將使用 Angular 表示式顯示選定的值。我們將從取消選中所有三個單選元素開始，因此該值不會分配到我們的螢幕上。

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

以上程式碼將生成以下螢幕：

當我們點選第二個複選框元素時，該值將相應更改。

使用 ion-toggle

您會注意到切換按鈕類似於複選框。我們將遵循與複選框相同的步驟。在 HTML 檔案中，首先我們將建立ion-toggle元素，然後分配ng-model值，然後將表示式的值繫結到我們的檢視。

<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。

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

以上程式碼將生成以下螢幕：

現在，我們將點選第二個和第三個切換按鈕，向您展示值如何從 false 更改為 true。

Ionic - JavaScript 事件

各種 Ionic 事件可用於增加與使用者的互動性。下表解釋了所有 Ionic 事件。

使用事件

由於所有 Ionic 事件的使用方式相同，因此我們將向您展示如何使用on-touch事件，您可以將相同的原理應用於其他事件。首先，我們將建立一個按鈕並分配一個on-touch事件，該事件將呼叫onTouchFunction()。

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

然後，我們將在控制器作用域中建立該函式。

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

現在，當發生觸控事件時，將呼叫onTouchFunction()。

Ionic - JavaScript 頁首

這是 Ionic 指令，它將新增頁首欄。

使用 JavaScript 頁首

要建立 JavaScript 頁首欄，我們需要在 HTML 檔案中應用ion-header-bar指令。由於預設頁首為白色，因此我們將新增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>

以上程式碼將生成以下螢幕：

新增元素

您通常希望向頁首新增一些元素。以下示例展示瞭如何在左側放置一個按鈕，並在ion-header-bar的右側放置一個圖示。您還可以向頁首新增其他元素。

<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新增bar-subheader類時，將建立子頁首。我們將新增一個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>

以上程式碼將生成以下螢幕：

Ionic - JavaScript 頁尾

此指令將在螢幕底部新增一個頁尾欄。

使用頁尾

可以透過應用ion-footer-bar類來新增 Ionic 頁尾。使用它的方法與使用頁首相同。我們可以新增標題並使用align-title屬性將其放置在螢幕的左側、中央或右側。使用字首bar，我們可以使用 Ionic 顏色。讓我們建立一個紅色頁尾，標題位於中央。

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

以上程式碼將生成以下螢幕 -

新增子頁尾

我們向您展示瞭如何使用子頁首。同樣，可以建立子頁尾。它將位於頁尾欄上方。我們只需要向ion-footer-bar元素新增一個bar-subfooter類即可。

在以下示例中，我們將新增一個子頁尾到我們之前建立的頁尾欄上方。

<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 - JavaScript 鍵盤

鍵盤是 Ionic 中的自動化功能之一。這意味著 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 的一個不錯的功能是它將調整螢幕上的元素，以便在鍵盤開啟時始終可見焦點元素。下面的影像顯示了十個輸入表單，最後一個為藍色。

當我們點選藍色表單時，Ionic 將調整我們的螢幕，以便始終可見藍色表單。

注意 - 這僅在螢幕位於具有滾動檢視的指令內時才有效。如果您從 Ionic 模板之一開始，您會注意到所有模板都使用ion-content指令作為其他螢幕元素的容器，因此始終應用滾動檢視。

Ionic - JavaScript 列表

我們已經在前面的章節中討論了 Ionic CSS 列表元素。在本章中，我們將向您展示 JavaScript 列表。它們允許我們使用一些新功能，例如滑動、拖動和刪除。

使用列表

用於顯示列表和專案的指令為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指令新增此按鈕。您可以使用任何所需的圖示類。由於我們並不總是希望顯示刪除按鈕，因為使用者可能會意外點選它並觸發刪除過程，因此我們可以向ion-list新增show-delete屬性並將其連線到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指令建立的。當列表項向左滑動時，將顯示這些按鈕，我們可以透過將專案元素向右滑動再次隱藏它。

您可以在以下示例中看到有兩個隱藏的按鈕。

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

以上程式碼將生成以下螢幕：

當我們將專案元素向左滑動時，文字將向左移動，按鈕將出現在右側。

其他函式

collection-repeat函式是AngularJS ng-repeat指令的更新版本。它只會在螢幕上渲染可見元素，其餘元素將在您滾動時更新。當您使用大型列表時，這是一個重要的效能改進。此指令可以與item-width和item-height屬性結合使用，以進一步最佳化列表項。

還有一些其他有用的屬性可用於處理列表內的影像。item-render-buffer函式表示在可見專案之後載入的專案數。此值越高，預載入的專案就越多。force-refresh-images函式將在滾動時修復影像源的問題。這兩個類都會對效能產生負面影響。

Ionic - JavaScript 載入

Ionic 載入指示器顯示時會停用使用者與任何互動，並在需要時再次啟用。

使用載入指示器

載入指示器在控制器內部觸發。首先，我們需要將$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>

當用戶點選按鈕時，載入指示器將出現。通常，您希望在一些耗時操作完成後隱藏載入指示器。

在使用載入指示器時，還可以使用一些其他可選引數。下表顯示了這些引數的說明。

載入指示器選項引數

載入指示器配置

Ionic 配置用於配置您希望在整個應用程式中的所有$ionicLoading服務中使用的選項。

可以透過使用$ionicLoadingConfig來實現。由於常量應該新增到主應用程式模組中，因此開啟您的app.js檔案並在模組聲明後新增您的常量。

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

以上程式碼將生成以下螢幕：

Ionic - Javascript 模態框

當 Ionic 模態框被啟用時，內容窗格將顯示在常規內容的頂部。模態框基本上是一個功能更強大的彈出視窗。預設情況下，模態框會覆蓋整個螢幕，但您可以根據需要對其進行最佳化。

使用模態框

在 Ionic 中實現模態框有兩種方法。一種方法是新增單獨的模板，另一種方法是在常規 HTML 檔案的script標籤內新增它。首先，我們需要使用 Angular 依賴項注入將我們的模態框連線到我們的控制器。然後，我們需要建立一個模態框。我們將傳遞作用域併為我們的模態框新增動畫。

之後，我們將建立用於開啟、關閉和銷燬模態框的函式。最後兩個函式放置在可以編寫程式碼的位置，這些程式碼將在模態框隱藏或移除時觸發。如果您不想在模態框移除或隱藏時觸發任何功能，您可以刪除最後兩個函式。

控制器程式碼

.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>

我們在上一個示例中展示的方法是在某個現有的 HTML 檔案中使用script標籤作為模態框的容器。

第二種方法是在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 模態框的第三種方法是內聯插入 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
   });
});

所有三個示例都將具有相同的效果。我們將建立一個按鈕來觸發$ionicModal.show()以開啟模態框。

HTML 程式碼

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

當我們開啟模態框時，它將包含一個用於關閉它的按鈕。我們在 HTML 模板中建立了這個按鈕。

模態框最佳化還有其他選項。我們已經展示瞭如何使用scope和animation。下表顯示了其他選項。

Ionic - Javascript 導航

導航是每個應用程式的核心元件之一。Ionic 使用AngularJS UI Router來處理導航。

使用導航

導航可以在app.js檔案中配置。如果您使用的是 Ionic 模板之一，您會注意到$stateProvider服務被注入到應用程式的config中。在以下示例中展示了建立應用程式狀態的最簡單方法。

$stateProvider服務將掃描 URL，找到相應的 state 並載入我們在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',});
});

該 state 將載入到ion-nav-view元素中，該元素可以放置在index.html的 body 中。

index.html 程式碼

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

當我們在上述示例中建立 state 時，我們使用了templateUrl，因此當 state 載入時，它將搜尋匹配的模板檔案。現在，我們將開啟templates資料夾並建立一個新的檔案state1.html，當應用程式 URL 更改為/state1時，該檔案將被載入。

state1.html 程式碼

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

建立導航選單

您可以透過在index.html的 body 中新增“ion-nav-bar”元素來向您的應用程式新增導航欄。在導航欄內，我們將新增帶有圖示的ion-nav-back-button。這將用於返回到上一個 state。當 state 更改時，該按鈕將自動出現。我們將分配goBack()函式，該函式將使用$ionicHistory服務來處理此功能。因此，當用戶離開 home state 並轉到state1時，後退按鈕將出現，如果使用者想要返回到 home state，則可以點選它。

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內。我們可以使用四個選項值分配side屬性。primary和secondary值將根據使用的平臺放置按鈕。有時您希望按鈕位於一側，無論它是 iOS 還是 Android。如果是這種情況，您可以使用left或right屬性代替。

我們還可以將ion-nav-title新增到導航欄。所有程式碼都將放置在index.html的 body 中，因此它可以在任何地方使用。

<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 導航一起使用。

導航屬性

快取

Ionic 能夠快取多達十個檢視以提高效能。它還提供了一種手動處理快取的方法。由於只有向後的檢視被快取，而向前的檢視在使用者每次訪問時都會載入，因此我們可以透過使用以下程式碼輕鬆地設定快取向前的檢視。

$ionicCinfigProvider.views.forwardCache(true);

我們還可以設定應快取多少個 state。如果我們希望快取三個檢視，我們可以使用以下程式碼。

$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 的方法

跟蹤歷史記錄

您可以使用$ionicHistory服務跟蹤上一個、當前和下一個檢視的歷史記錄。下表顯示了此服務的所有方法。

用於 $ionicHistory 的方法

nextViewOptions()方法有以下三個選項可用。

• disableAnimate用於停用下一個檢視更改的動畫。

• disableBack將把後退檢視設定為 null。

• historyRoot將把下一個檢視設定為根檢視。

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

Ionic - Javascript 彈出框

這是一種顯示在常規檢視上方的檢視。

使用彈出框

可以使用ion-popover-view元素建立彈出框。此元素應新增到 HTML 模板中，並且$ionicPopover服務需要注入到控制器中。

新增彈出框有三種方法。第一種是fromTemplate方法，它允許使用內聯模板。第二種和第三種新增彈出框的方法是使用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
   });
})

如上所述，新增彈出框的第二種和第三種方法是使用fromTemplateUrl方法。除了fromTemplateUrl的值之外，這兩種方法的控制器程式碼將相同。

如果 HTML 新增到現有的模板中，則 URL 將為popover.html。如果我們想將 HTML 放置到 templates 資料夾中，則 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 作為單獨的檔案，我們可以在templates資料夾中建立一個新的 HTML 檔案，並使用與上述示例中相同的程式碼，但不包括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方法。

Ionic - JavaScript 彈出框

此服務用於在常規檢視之上建立彈出視窗，用於與使用者互動。彈出框有四種類型：show、confirm、alert 和 prompt。

使用 Show 彈出框

此彈出框是最複雜的。要觸發彈出框，我們需要將 $ionicPopup 服務注入到我們的控制器中，然後新增一個方法來觸發我們想要使用的彈出框，在本例中為 $ionicPopup.show()。onTap(e) 函式可用於新增 e.preventDefault() 方法，如果輸入內容沒有更改，則此方法將使彈出框保持開啟狀態。關閉彈出框時，將解析 Promise 物件。

控制器程式碼

.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>

您可能在上述示例中注意到使用了一些新的選項。下表將解釋所有這些選項及其用例。

Show 彈出框選項

使用 Confirm 彈出框

Confirm 彈出框是 Ionic 彈出框的簡化版本。它包含“取消”和“確定”按鈕，使用者可以按下這些按鈕來觸發相應的函式。它返回一個 Promise 物件，當按下其中一個按鈕時解析該物件。

控制器程式碼

.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>

下表解釋了可用於此彈出框的選項。

Confirm 彈出框選項

使用 Alert 彈出框

Alert 是一個簡單的彈出框，用於向用戶顯示警報資訊。它只有一個按鈕，用於關閉彈出框並解析彈出框的 Promise 物件。

控制器程式碼

.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>

它將生成以下螢幕 -

下表顯示了可用於 Alert 彈出框的選項。

Alert 彈出框選項

使用 Prompt 彈出框

可以使用 Ionic 建立的最後一個 Ionic 彈出框是 prompt。它有一個“確定”按鈕，該按鈕使用輸入框中的值解析 Promise，還有一個“取消”按鈕，該按鈕使用 undefined 值解析 Promise。

控制器程式碼

.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>

它將生成以下螢幕 -

下表顯示了可用於 Prompt 彈出框的選項。

Prompt 彈出框選項

Ionic - JavaScript 滾動

用於在 Ionic 應用中進行滾動操作的元素稱為 ion-scroll。

使用滾動

以下程式碼片段將建立可滾動容器並調整滾動模式。首先，我們將建立 HTML 元素並向其新增屬性。我們將新增 → direction = "xy" 以允許向各個方向滾動。我們還將設定滾動元素的寬度和高度。

HTML 程式碼

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

接下來，我們將世界地圖的影像新增到我們建立的 ion-scroll 內部的 div 元素中，並設定其寬度和高度。

CSS 程式碼

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

執行應用後，我們可以向各個方向滾動地圖。以下示例顯示了地圖的北美部分。

我們可以將此地圖滾動到任何我們想要的部分。讓我們滾動它以顯示亞洲。

還有其他屬性可以應用於 ion-scroll。您可以在下表中檢視它們。

滾動屬性

無限滾動

無限滾動用於在滾動超過頁面底部時觸發某些行為。以下示例顯示了它是如何工作的。在我們的控制器中，我們建立了一個函式來向列表中新增專案。當滾動超過載入的最後一個元素的 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 一起使用。其中一些列在下表中。

滾動屬性

滾動代理

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 函式。

代理函式

Ionic - JavaScript 側邊選單

側邊選單是 Ionic 最常用的元件之一。可以透過向左或向右滑動或觸發為此目的建立的按鈕來開啟側邊選單。

使用側邊選單

我們需要的第一個元素是 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>

現在，我們將建立一個帶有 menu-toggle = "left" 指令的按鈕。此按鈕通常放置在應用的標題欄中，但為了更好地理解，我們將其新增到模板檔案中。

當點選按鈕或向右滑動時，側邊選單將開啟。您還可以設定 menu-close 指令，如果您只想使用一個按鈕來關閉側邊選單，但我們將使用切換按鈕來實現此目的。

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 方法。

代理函式

Ionic - JavaScript 滑動框

滑動框包含可以透過滑動內容螢幕更改的頁面。

使用滑動框

滑動框的使用很簡單。您只需將 ion-slide-box 作為容器，並將帶有 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;
}

輸出將如下面的螢幕截圖所示 -

我們可以透過將內容拖動到右側來更改框。我們還可以向左拖動以顯示上一個框。

下表列出了可用於控制滑動框行為的一些屬性。

代理函式

滑動框委託

$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 方法。

代理函式

Ionic - Javascript 標籤

標籤對於任何導航型別或在應用程式內選擇不同的頁面都是一個有用的模式。相同的標籤將出現在 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>

輸出將如下面的螢幕截圖所示。

ion-tab 元素提供了可用的 API。您可以將其新增為屬性，如上面示例所示，我們在其中使用了 title、icon-on 和 icon-off。後兩者用於區分選定的標籤與其餘標籤。如果您檢視上面的圖片，您可以看到第一個標籤被選中。您可以在下表中檢視其餘屬性。

標籤屬性

標籤也有自己的委託服務，以便更輕鬆地控制應用程式中的所有標籤。它可以注入到控制器中，並且有幾個方法，如下表所示。

代理函式

Ionic - Cordova 整合

Cordova 提供了 ngCordova，這是一組專門設計用於與 AngularJS 配合使用的包裝器。

安裝 ngCordova

當您啟動 Ionic 應用程式時，您會注意到它正在使用 bower。它可以用於管理 ngCordova 外掛。如果您已安裝 bower，請跳過此步驟；如果您沒有安裝 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 注入為 Angular 依賴項。開啟您的 app.js 檔案並將 ngCordova 新增到 Angular 模組中。如果您使用過 Ionic 模板應用程式之一，您會注意到其中注入了 ionic、控制器和服務。在這種情況下，您只需在陣列的末尾新增 ngCordova。

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

您可以隨時透過鍵入以下命令來檢查已安裝的外掛。

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

現在，我們可以使用 Cordova 外掛了。您可以檢視所有其他外掛此處。

Ionic - Cordova AdMob

Cordova AdMob 外掛用於本地整合廣告。我們將在本章中使用 admobpro 外掛，因為 admob 已棄用。

使用 AdMob

要在您的應用程式中使用廣告，您需要註冊 AdMob 並建立一個橫幅廣告。執行此操作時，您將獲得一個 廣告發布者 ID。由於這些步驟不是 Ionic 框架的一部分，因此我們在此處不會進行解釋。您可以按照 Google 支援團隊的步驟操作此處。

您還需要安裝 Android 或 iOS 平臺，因為 Cordova 外掛僅在原生平臺上有效。我們已經在環境設定章節中討論瞭如何在我們的環境中執行此操作。

可以在命令提示符視窗中安裝 AdMob 外掛。

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

現在我們已經安裝了外掛，我們需要在能夠使用它之前檢查裝置是否已準備好。這就是為什麼我們需要在 app.js 中的 $ionicPlatform.ready 函式中新增以下程式碼的原因。

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 或 Windows Phone。您只需對這些平臺使用不同的 ID。除了橫幅廣告外，您還可以使用覆蓋整個螢幕的插頁式廣告。

AdMob 方法

下表顯示了可與 admob 一起使用的函式。

AdMob 事件

下表顯示了可與 admob 一起使用的事件。

您可以按照以下示例處理這些事件。

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

Ionic - Cordova 相機

Cordova 相機外掛使用 原生相機拍攝照片或從圖片庫獲取圖片。

使用相機

在命令提示符中開啟您的專案根資料夾，然後使用以下命令下載並安裝 Cordova 相機外掛。

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

現在，我們將建立一個用於使用相機外掛的服務。我們將使用 AngularJS 工廠和需要注入到工廠中的 Promise 物件 $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 方法，該方法用於使用原生相機拍攝照片。

可以透過向takePicture函式傳遞options引數來進一步自定義原生相機設定。將上述程式碼示例複製到您的控制器中以觸發此行為。它將開啟相機應用程式，並使用影像資料返回成功回撥函式，或使用錯誤訊息返回錯誤回撥函式。我們還需要兩個按鈕來呼叫我們即將建立的函式，並且需要在螢幕上顯示影像。

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);
      });
   };
})

輸出將如下面的螢幕截圖所示。

如果要使用相簿中的影像，則只需更改options引數中的sourceType方法即可。此更改將開啟一個對話方塊彈出視窗，而不是相機，並允許您從裝置中選擇所需的影像。

您可以看到以下程式碼，其中sourceType選項更改為0。現在，當您點選第二個按鈕時，它將開啟裝置的檔案選單。

控制器程式碼

.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);
      });
   };  
})

輸出將如下面的螢幕截圖所示。

儲存拍攝的影像後，它將顯示在螢幕上。您可以根據需要對其進行樣式設定。

還可以使用其他一些選項，其中一些在以下表格中給出。

Ionic - Cordova Facebook

此外掛用於連線到 Facebook API。在開始整合 Facebook 之前，您需要建立一個 Facebook 應用此處。您將建立一個 Web 應用，然後跳過快速入門螢幕。然後，您需要在設定頁面上新增網站平臺。在開發過程中，您可以使用以下程式碼段作為站點 URL。

https://:8100/

之後，您需要在設定/高階頁面上新增有效的 OAuth 重定向 URI。只需複製以下兩個 URL。

https://#/connect/login_success.html
https://:8100/oauthcallback.html

安裝 Facebook 外掛

我們執行了上述所有步驟來解決使用此外掛時經常出現的一些問題。此外掛難以設定，因為涉及許多步驟，並且文件未涵蓋所有步驟。它與其他 Cordova 外掛也存在一些已知的相容性問題，因此我們將在我們的應用程式中使用Teleric 驗證外掛版本。我們將首先從命令提示符安裝瀏覽器平臺到我們的應用程式。

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

接下來，我們需要做的是在index.html中body標籤的頂部新增root元素。

index.html

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

現在，我們將 Cordova Facebook 外掛新增到我們的應用程式。您需要將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 應用匹配。這將確保 Facebook SDK 非同步載入，而不會阻塞應用程式的其餘部分。

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 = "//#/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));
</script>

Angular 服務

由於我們安裝了所有內容，因此我們需要建立一個服務，該服務將成為我們與 Facebook 的連線。這些事情可以在控制器中用更少的程式碼完成，但我們嘗試遵循最佳實踐，因此我們將使用 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;
   }
});

在上面的服務中，我們建立了四個函式。前三個不言自明。第四個函式用於連線到 Facebook 圖形 API。它將返回 Facebook 使用者的id和email。

我們正在建立promise 物件來處理非同步 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服務。這樣做的原因是，您可能希望在返回Auth函式後新增更多行為。您可能會將一些資料傳送到您的資料庫，在登入後更改路由等。這可以透過使用 JavaScriptthen()方法來處理所有非同步操作（而不是回撥）來輕鬆完成。

現在我們需要允許使用者與應用程式互動。我們的 HTML 將包含四個按鈕來呼叫我們建立的四個函式。

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>

當用戶點選登入按鈕時，將出現 Facebook 螢幕。登入成功後，使用者將被重定向到應用程式。

Ionic - Cordova InAppBrowser

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 方法

Cordova InAppBrowser 事件

此外掛還提供可以與$rootScope組合的事件。

Ionic - Cordova Native Audio

此外掛用於向 Ionic 應用程式新增原生音訊聲音。

使用 Native Audio

要能夠使用此外掛，我們首先需要安裝它。開啟命令提示符視窗並新增 Cordova 外掛。

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

在開始使用此外掛之前，我們需要音訊檔案。為簡單起見，我們將把我們的click.mp3檔案儲存在js資料夾中，但您可以將其放在任何位置。

下一步是預載入音訊檔案。有兩種可用的選項，分別是：

• 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函式將在五秒鐘後停止並解除安裝迴圈音訊。

$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>

當我們點選播放按鈕時，我們會聽到聲音一次，當我們點選迴圈按鈕時，聲音將迴圈五秒鐘然後停止。此外掛僅在模擬器或移動裝置上有效。

Ionic - Cordova Geolocation

此外掛用於向 Ionic 應用程式新增地理位置外掛。

使用 Geolocation

有一種簡單的方法可以使用地理位置外掛。我們需要從命令提示符視窗安裝此外掛。

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

以下控制器程式碼使用了兩種方法。第一個是getCurrentPosition方法，它將向我們顯示使用者裝置的當前緯度和經度。第二個是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來調整允許經過的最大時間（以毫秒為單位），並將enableHighAccuracy設定為 false。可以將其設定為true以獲得最佳結果，但有時會導致一些錯誤。還有一個maximumAge選項可用於顯示接受舊位置的程度。它使用毫秒，與 timeout 選項相同。

當我們啟動應用程式並開啟控制檯時，它將記錄裝置的緯度和經度。當我們的位置發生變化時，lat和long值將發生變化。

Ionic - Cordova Media

此外掛允許我們在裝置上錄製和播放音訊檔案。

使用 Media

與所有其他 Cordova 外掛一樣，我們需要做的第一件事是從命令提示符視窗安裝它。

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

現在，我們準備使用該外掛了。在以下程式碼示例中，src是我們將在本教程中使用的源 mp3 檔案。它位於js資料夾中，但我們需要在它前面新增/android_asset/www/，以便它可以在 Android 裝置上使用。

完整的功能都封裝在$ionicPlatform.ready()函式內部，以確保在使用外掛之前所有內容都已載入。之後，我們使用newMedia(src)方法建立media物件。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();
      });
   });
}

我們還將建立三個按鈕來呼叫播放、暫停和停止函式。

<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方法還可以使用其他可選引數。

可選引數

下表將顯示所有可用的可選引數。

下表將顯示所有可用的方法。

可用方法

下表將顯示所有可用的方法。

Ionic - Cordova 圖示和啟動畫面

每個移動應用程式都需要一個圖示和啟動畫面。Ionic 提供了新增它們的極佳解決方案，並且開發人員的工作量最少。裁剪和調整大小在 Ionic 伺服器上自動完成。

新增啟動畫面和圖示

在前面的章節中，我們討論瞭如何為 Ionic 應用程式新增不同的平臺。透過新增平臺，Ionic 將為該平臺安裝 Cordova 啟動畫面外掛，因此我們之後無需安裝任何內容。我們只需要找到兩張圖片。

這些圖片應該是png、psd或ai檔案。圖示圖片的最小尺寸應為192x192，啟動畫面圖片的最小尺寸應為2208×2208。此尺寸將覆蓋所有裝置。在我們的示例中，我們將對兩者使用相同的圖片。這些圖片需要儲存到resources資料夾而不是預設資料夾中。完成後，我們只需要在命令提示符視窗中執行以下命令。

C:\Users\Username\Desktop\MyApp>ionic resources

現在，如果您檢查resources/android或resources/ios資料夾，您將看到我們之前新增的圖片已調整大小並裁剪以適應不同的螢幕尺寸。當我們在裝置上執行我們的應用程式時，我們將在應用程式啟動之前看到啟動畫面，並且我們會看到預設的 Ionic 圖示已更改。

注意 - 如果您想為 Android 和 iOS 使用不同的圖片，可以將其新增到resources/android和resources/ios而不是resources資料夾中。