离子 - 快速指南

---

离子 - 概述

Ionic是一个构建在AngularJS和Cordova之上的前端 HTML 框架。根据他们的官方文档，这个 Ionic 开源框架的定义如下 -

Ionic 是一个HTML5 移动应用程序开发框架，旨在构建混合移动应用程序。将 Ionic 视为前端 UI 框架，用于处理应用程序需要引人注目的所有外观和 UI 交互。有点像“Bootstrap for Native”，但支持广泛的常见本机移动组件、流畅的动画和漂亮的设计。

离子框架特点

以下是 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 Tabs 应用程序。

空白应用程序

如果您想从头开始，可以安装 Ionic 空白模板。我们将使用上面解释的相同步骤，添加ionic start myApp 空白而不是ionic start myApp 选项卡，如下所示。

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 Blank 应用程序。

侧边菜单应用程序

您可以使用的第三个模板是侧菜单模板。步骤与前两个模板相同；我们将在启动应用程序时添加侧菜单，如下面的代码所示。

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 浏览器上提供您的应用程序。

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

上述命令将在网络浏览器中打开您的应用程序。Google Chrome 为移动开发测试提供了设备模式功能。按F12访问开发者控制台。

单击控制台窗口的左上角有“切换设备模式”图标。下一步是单击右上角的“停靠到右侧”图标。刷新页面后，您应该准备好在网络浏览器上进行测试。

项目文件夹结构

Ionic 为所有类型的应用程序创建以下目录结构。对于任何 Ionic 开发人员来说，了解每个目录和下面提到的文件的用途都很重要 -

让我们快速了解上图所示的项目文件夹结构中可用的所有文件夹和文件。

• 挂钩- 挂钩是可以在构建过程中触发的脚本。它们通常用于 Cordova 命令定制和构建自动化流程。在本教程中我们不会使用此文件夹。

• Platforms - 这是创建 Android 和 IOS 项目的文件夹。您在开发过程中可能会遇到一些需要这些文件的特定于平台的问题，但大多数时候您应该保持它们完好无损。

• Plugins - 此文件夹包含 Cordova 插件。当您最初创建 Ionic 应用程序时，将安装一些插件。我们将在后续章节中向您展示如何安装 Cordova 插件。

• 资源- 此文件夹用于向项目添加图标和启动屏幕等资源。

• Scss - 由于 Ionic 核心是使用 Sass 构建的，因此这是 Sass 文件所在的文件夹。为了简化过程，我们在本教程中不会使用 Sass。我们的样式将使用 CSS 来完成。

• www - www 是 Ionic 开发人员的主要工作文件夹。他们大部分时间都在这里度过。Ionic 为我们提供了“www”内的默认文件夹结构，但开发人员可以随时更改它以满足自己的需求。打开此文件夹后，您将找到以下子文件夹 -

  • css文件夹，您将在其中编写 CSS 样式。

  • img文件夹，用于存储图像。

  • js文件夹包含应用程序主配置文件 (app.js) 和 AngularJS 组件（控制器、服务、指令）。您的所有 JavaScript 代码都将位于这些文件夹中。

  • libs文件夹，您的库将放置在其中。

  • HTML 文件的模板文件夹。

  • Index.html作为您的应用程序的起点。

• 其他文件- 由于这是初学者教程，我们只会提到一些其他重要文件及其用途。

  • .bowerrc是 Bower 配置文件。

  • .editorconfig是编辑器配置文件。

  • .gitignore用于指示当您要将应用程序推送到 Git 存储库时应忽略应用程序的哪一部分。

  • 如果您选择使用 Bower 包管理器，bower.json将包含 Bower 组件和依赖项。

  • gulpfile.js用于使用 gulp 任务管理器创建自动化任务。

  • config.xml是 Cordova 配置文件。

  • package.json包含有关使用 NPM 包管理器安装的应用程序、其依赖项和插件的信息。

在下一章中，我们将讨论 Ionic 开源框架中可用的不同颜色。

离子 - 颜色

在我们开始使用 Ionic 框架中可用的实际元素之前，让我们先了解一下 Ionic 如何为不同元素使用颜色。

离子颜色类别

Ionic 框架为我们提供了一组九个预定义的颜色类。您可以使用这些颜色，也可以用您自己的样式覆盖它。

下表显示了 Ionic 提供的默认九种颜色集。在本教程中，我们将使用这些颜色来设计不同的 Ionic 元素的样式。现在，您可以检查所有颜色，如下所示 -

离子颜色的使用

Ionic 为每个元素使用不同的类。例如，标题元素将具有bar类，按钮将具有Button类。为了简化使用，我们通过在颜色名称中添加元素类前缀来使用不同的颜色。

例如，要创建蓝色标题，我们将使用bar-calm，如下所示 -

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

同样，要创建灰色按钮，我们将使用按钮稳定类，如下所示。

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

您还可以像任何其他 CSS 类一样使用 Ionic 颜色类。现在，我们将使用平衡（绿色）和活力（黄色）颜色来设置两个段落的样式。

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

上面的代码将产生以下屏幕 -

当我们使用不同的类创建不同的元素时，我们将在后续章节中详细讨论。

使用 CSS 自定义颜色

当您想使用 CSS 更改某些 Ionic 默认颜色时，可以通过编辑lib/css/ionic.css文件来完成。在某些情况下，这种方法效率不高，因为每个元素（页眉、按钮、页脚...）都使用自己的类进行样式设置。

因此，如果要将“light”类的颜色更改为橙​​色，则需要搜索使用该类的所有元素并更改它。当您想要更改单个元素的颜色时，这很有用，但对于更改所有元素的颜色不太实用，因为它会花费太多时间。

使用 SASS 自定义颜色

SASS（它是“ Syntropically Awesome Style Sheet”的缩写）提供了一种更简单的方法来一次更改所有元素的颜色。如果您想使用 SASS，请在命令窗口中打开您的项目并输入 -

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

这将为您的项目设置 SASS。现在，您可以通过打开scss/ionic.app.scss文件，然后在此行之前键入以下代码来更改默认颜色– @import "www/lib/ionic/scss/ionic";

我们将平衡颜色更改为深蓝色，将活力颜色更改为橙​​色。我们上面使用的两个段落现在是深蓝色和橙色。

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

现在，如果您使用以下示例 -

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

上面的代码将产生以下屏幕 -

使用这些类的所有 Ionic 元素都将更改为深蓝色和橙色。请考虑到您不需要使用 Ionic 默认颜色类。您始终可以按照自己想要的方式设计元素。

重要的提示

安装 SASS 后，www/css/style.css文件将从 index.html 的标头中删除。如果您仍想使用它，则需要手动链接它。打开index.html，然后在标题中添加以下代码。

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

离子 - 内容

几乎每个移动应用程序都包含一些基本元素。通常这些元素包括页眉和页脚，它们将覆盖屏幕的顶部和底部。所有其他元素将放置在这两者之间。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 标题栏位于屏幕顶部。它可以包含标题、图标、按钮或其他一些元素。您可以使用预定义的标头类别。您可以在本教程中查看所有内容。

添加标题

您可能在应用程序中使用的所有栏的主要类是bar。此类将始终应用于应用程序中的所有栏。所有bar 子类都将使用前缀 – bar。

如果要创建标题，则需要在主栏类之后添加栏标题。打开www/index.html文件并在body标记内添加标头类。我们向index.html 主体添加一个标头，因为我们希望它在应用程序的每个屏幕上都可用。

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

上面的代码将产生以下屏幕 -

子标题

您可以创建一个位于标题栏正下方的子标题。以下示例将展示如何向您的应用添加标题和子标题。在这里，我们使用“自信”（红色）颜色类别设置子标题的样式。

<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”类添加到屏幕的离子内容标签中。从www/templates打开 HTML 文件之一，并将has-subheader类添加到ion-content中。如果您仅在应用程序中使用标头，则需要添加has-header类。

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

上面的代码将产生以下屏幕 -

离子 - 页脚

离子页脚位于应用程序屏幕的底部。使用页脚几乎与使用页眉相同。

添加页脚

Ionic 页脚的主要类是bar（与页眉相同）。当您想向屏幕添加页脚时，您需要在主bar类之后向元素添加bar-footer类。由于我们希望在应用程序的每个屏幕上使用页脚，因此我们将其添加到index.html文件的正文中。我们还将为页脚添加标题。

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

上面的代码将产生以下屏幕 -

页脚颜色

如果您想设计页脚样式，只需添加适当的颜色类即可。当您设计元素的样式时，您需要将主元素类添加为颜色类的前缀。由于我们正在设计页脚栏的样式，因此前缀类将是一个栏，并且我们要在本示例中使用的颜色类是自信的（红色）。

<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 框架中有多种类型的按钮，这些按钮具有巧妙的动画效果，这进一步增强了用户使用应用程序时的体验。所有按钮类型的主类是button。该类将始终应用于我们的按钮，并且在使用子类时我们将使用它作为前缀。

块按钮

块按钮将始终具有其父容器的 100% 宽度。他们还将应用一个小填充物。您将使用按钮块类来添加块按钮。如果您想删除填充但保持完整宽度，您可以使用button-full类。

以下是显示这两个类的用法的示例 -

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

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

上面的代码将产生以下屏幕 -

按钮尺寸

有两个 Ionic 类用于更改按钮大小 -

• 按钮小和

• 按钮大。

以下是展示其用法的示例 -

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

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

上面的代码将产生以下屏幕 -

按钮颜色

如果您想设计按钮的样式，只需为其添加适当的颜色类即可。当您设计元素的样式时，您需要将主元素类添加为颜色类的前缀。由于我们正在设计页脚栏的样式，因此前缀类将是一个栏，并且我们要在本示例中使用的颜色类是自信的（红色）。

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

上面的代码将产生以下屏幕 -

您可以使用以下九个类中的任何一个来为您的应用程序按钮提供您选择的颜色 -

按钮轮廓

如果您希望按钮透明，您可以应用按钮轮廓类。此类按钮将具有轮廓边框和透明背景。

要删除按钮的边框，可以使用button-clear类。下面的例子展示了如何使用这两个类。

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

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

上面的代码将产生以下屏幕 -

添加图标

当您想向按钮添加图标时，最好的方法是使用图标类。您可以使用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>

上面的代码将产生以下屏幕 -

按钮栏

如果要将几个按钮组合在一起，可以使用按钮栏类。默认情况下，按钮的大小相同。

<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 框架提供了不同的列表类型以方便使用。

创建离子列表

每个列表都是由两个元素创建的。当您想要创建基本列表时，您的<ul>标记需要分配列表类，并且您的<li>标记将使用项目类。另一个有趣的事情是，您甚至不需要在列表中使用<ul>、<ol>和<li>标签。您可以使用任何其他元素，但重要的是适当地添加列表和项目类。

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

上面的代码将产生以下屏幕 -

插图列表

当您需要一个列表来填充您自己的容器时，您可以在列表类之后添加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>

上面的代码将产生以下屏幕 -

离子 - 卡片

由于移动设备的屏幕尺寸较小，卡片是显示用户友好信息的最佳元素之一。在上一章中，我们讨论了如何插入列表。卡片与插入列表非常相似，但它们提供了一些额外的阴影，可能会影响较大列表的性能。

添加卡片

可以通过向元素添加卡类来创建默认卡。卡片通常形成为包含项目类别的列表。最有用的类之一是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>

上面的代码将产生以下屏幕 -

完整卡

您可以在卡片顶部添加任何元素。在下面的示例中，我们将向您展示如何将完整图像类与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 框架使用其他表单元素。

使用输入表格

使用表单的最佳方法是使用列表和项目作为主要类。您的应用程序通常包含多个表单元素，因此将其组织为列表是有意义的。在下面的示例中，您可以注意到 item 元素是一个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>

上面的代码将产生以下屏幕 -

离子标签

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类添加到我们的 label 元素中，并且我们需要创建一个新元素并将input-label类分配给它。如果我们希望它位于顶部，我们只需将该元素添加到输入标签之前即可。下面的示例显示了这一点。

请注意，span标签位于输入标签之前。如果我们改变它们的位置，它就会出现在屏幕的下方。

<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-input-inset类添加到项目并将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 类来实现。首先，出于与上一章中解释的相同原因，我们需要创建一个标签，并为其分配一个切换类。

我们的标签里面将会被创建。您会注意到以下示例中使用了另外两个离子类。当点击切换时，轨道类将为我们的复选框添加背景样式和颜色动画。手柄类用于向其添加圆形按钮。

以下示例显示了两种切换形式。第一个已检查，第二个未检查。

<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 颜色类都可以应用于切换元素。前缀将是切换。我们将把它应用到标签元素。以下示例显示了应用的所有颜色。

<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 元素中。以下示例显示了两个简单的复选框，一个已选中，另一个未选中。

<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 颜色类。检查以下示例，看看它是什么样子的。我们将在此示例中使用复选框列表。

<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。同样，我们将为此使用标签，就像我们在所有其他表单中使用的那样。输入将具有名称属性。此属性会将您想要使用的所有按钮分组为可能的选择。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>

上面的代码将产生以下屏幕 -