📅  最后修改于: 2020-12-08 04:53:36        🧑  作者: Mango

Ionic是用于开发移动应用程序的开源框架。它提供了用于构建具有本机外观的Mobile UI的工具和服务。 Ionic框架需要本机包装才能在移动设备上运行。这是一个入门教程，涵盖了Ionic Open Source Framework的基础知识，并说明了如何处理其各种组件和子组件。本教程是为不熟悉移动开发的JavaScript开发人员创建的。它通过有用的工作示例提供了简单易懂的解释。我们将介绍Io...

📅  最后修改于: 2020-12-08 04:54:04        🧑  作者: Mango

Ionic是一个基于AngularJS和Cordova构建的前端HTML框架。根据他们的正式文件，此Ionic开源框架的定义如下-Ionic是一个HTML5移动应用程序开发框架，旨在构建混合移动应用程序。可以将Ionic视为可以处理应用程序所有引人注目的外观和界面交互的前端UI框架。有点像“ Bootstrap for Native”，但支持多种常见的本机移动组件，精美的动画和精美的设计。离子框架...

📅  最后修改于: 2020-12-08 04:55:12        🧑  作者: Mango

本章将向您展示如何开始使用Ionic Framework。下表包含以Ionic开头所需的组件列表。Sr.No.Software & Description1NodeJSThis is the base platform needed to create Mobile Apps using Ionic. You can find detail on the NodeJS installation i...

📅  最后修改于: 2020-12-08 04:55:51        🧑  作者: Mango

在开始介绍Ionic框架中可用的实际元素之前，让我们对Ionic如何为不同元素使用颜色进行一些了解。离子颜色分类离子框架为我们提供了一组九种预定义的颜色类别。您可以使用这些颜色，也可以使用自己的样式覆盖它。下表显示了Ionic提供的默认九种颜色集。在本教程中，我们将使用这些颜色来设置不同的离子元素的样式。现在，您可以检查所有颜色，如下所示-ClassDescriptionResultlightTo...

📅  最后修改于: 2020-12-08 04:56:08        🧑  作者: Mango

几乎每个移动应用程序都包含一些基本元素。通常，这些元素包括将覆盖屏幕顶部和底部的页眉和页脚。所有其他元素将放置在这两个元素之间。 Ionic提供的离子含量元素充当容器，它将包装我们要创建的所有其他元素。这个容器具有一些独特的特性，但是由于这是一个基于JavaScript的组件，我们将在本教程的后面部分中介绍。...

📅  最后修改于: 2020-12-08 04:56:47        🧑  作者: Mango

Ionic标题栏位于屏幕顶部。它可以在其顶部包含标题，图标，按钮或其他一些元素。您可以使用预定义的标题类。您可以在本教程中检查所有内容。添加标题您可以在应用程序中使用的所有酒吧的主要类别是bar。此类将始终应用于您应用中的所有条形图。所有bar子类都将使用前缀–bar。如果要创建标题，则需要在主bar类之后添加bar-header。打开您的www / index.html文件，然后在您的body标...

📅  最后修改于: 2020-12-08 04:57:17        🧑  作者: Mango

离子页脚位于应用程序屏幕的底部。使用页脚几乎与使用页眉相同。添加页脚离子页脚的主要类是bar(与页眉相同)。如果要在屏幕上添加页脚，则需要在主bar类之后将bar-footer类添加到元素。由于我们想在应用程序的每个屏幕上使用页脚，因此我们将其添加到index.html文件的正文中。我们还将为页脚添加标题。上面的代码将产生以下屏幕-页脚颜色如果要设置页脚样式，只需向其添加适当的颜色类。在为元素设置...

📅  最后修改于: 2020-12-08 04:57:55        🧑  作者: Mango

Ionic Framework中有几种类型的按钮，这些按钮具有精美的动画效果，从而进一步增强了使用该应用程序时的用户体验。所有按钮类型的主要类别是button。此类将始终应用于按钮，并且在使用子类时将其用作前缀。阻止按钮阻止按钮将始终具有其父容器的100％宽度。他们还将应用一个小的填充。您将使用按钮块类来添加块按钮。如果要删除填充但保留完整宽度，则可以使用全按钮类。以下是显示两个类的用法的示例-上...

📅  最后修改于: 2020-12-08 04:58:32        🧑  作者: Mango

离子形式主要用于与用户进行交互并收集所需的信息。本章将介绍各种文本输入形式，在随后的章节中，我们将说明如何使用Ionic框架使用其他表单元素。使用输入表格使用表格的最佳方法是将列表和项目用作主类。您的应用程序通常包含多个表单元素，因此将其组织为列表是有意义的。在以下示例中，您会注意到item元素是一个标签标记。您可以使用任何其他元素，但是标签将使您能够点击元素的任何部分以使您的文本输入集中。您可以...

📅  最后修改于: 2020-12-08 04:59:07        🧑  作者: Mango

有时，有两个选项可供用户使用。处理这种情况的最有效方法是通过切换表单。 Ionic为我们提供了动画和易于实现的切换元素类。使用切换可以使用两个Ionic类来实现切换。首先，出于与上一章所述相同的原因，我们需要创建一个标签，并为其分配一个切换类。在我们的标签内将创建。您将注意到以下示例中使用了另外两个离子类。轻触切换后，track类将为我们的复选框添加背景样式，并为颜色添加动画。handle类用于向...

📅  最后修改于: 2020-12-08 04:59:34        🧑  作者: Mango

离子复选框与切换几乎相同。这两种样式的样式不同，但用途相同。添加复选框创建复选框表单时，需要将复选框类名称添加到标签和输入元素。以下示例显示了两个简单的复选框，一个处于选中状态，另一个未被选中。上面的代码将产生以下屏幕-多个复选框正如我们已经展示的，该列表将用于多个元素。现在，我们将为每个列表项使用item-checkbox类。上面的代码将产生以下屏幕-样式复选框当您要设置复选框样式时，需要应用带...

📅  最后修改于: 2020-12-08 05:00:01        🧑  作者: Mango

单选按钮是元素的另一种形式，我们将在本章中介绍。单选按钮与切换和复选框形式之间的区别在于，使用前者时，您只能从列表中选择一个单选按钮。由于后者允许您选择多个。添加单选按钮由于总会有一个以上的单选按钮可供选择，因此最好的方法是创建一个列表。每当我们需要多个元素时，我们都会这样做。列表项类将为item-radio。同样，我们将像其他所有表格一样使用标签。输入将具有名称属性。此属性会将您要用作可能选择的...

📅  最后修改于: 2020-12-08 05:00:25        🧑  作者: Mango

离子范围用于选择和显示某物的水平。它将代表与最大值和最小值相关的实际值。 Ionic提供了一种使用Range的简单方法。使用范围范围用作内部项目元素。使用的类是range。我们将把这个类放在item类之后。这将准备一个放置范围的容器。创建容器后，我们需要添加输入并为其分配范围类型以及名称属性。上面的代码将产生以下屏幕-添加图标范围通常需要图标以清楚地显示数据。我们只需要在范围输入之前和之后添加图标...

📅  最后修改于: 2020-12-08 05:00:55        🧑  作者: Mango

Ionic Select将创建一个带有选择选项的简单菜单，供用户选择。由于其样式由浏览器处理，因此该“选择菜单”在不同平台上的外观将有所不同。使用选择首先，我们将创建一个标签，并添加item-input和item-select类。第二个类将为select表单添加其他样式，然后在内部添加input-label类，该类将用于为select元素添加名称。我们还将在其中添加select选项。这是常规的HT...

📅  最后修改于: 2020-12-08 05:01:27        🧑  作者: Mango

离子选项卡大部分时间用于移动导航。样式针对不同平台进行了优化。这意味着在android设备上，标签将位于屏幕顶部，而在IOS上，标签将位于屏幕底部。有多种创建标签的方式。我们将在本章中详细了解如何创建选项卡。简单标签可以使用tabs类创建“简单选项卡”菜单。对于使用此类的inside元素，我们需要添加tab-item元素。由于标签通常用于导航，因此我们将<a>标签用于标签项目。以下示例显示了带有四...