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

与离子网格系统一起工作非常简单。主要有两个类-row用于处理行，col用于列。您可以选择任意多的列或行。它们都将调整其大小以适应可用空间，尽管您可以更改此行为以适合您的需求。注–本教程中的所有示例都将边框应用于我们的网格，以便能够以易于理解的方式显示它。简单网格下面的示例显示如何使用col和row类。我们将创建两行。第一行将有五列，第二行将只有三列。注意第一行和第二行中列的宽度如何不同。上面的代码...

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

Ionic提供了一种简单的方法来向元素添加填充。有几个类可以使用，所有这些类都会在元素边框与其内容之间增加10px。下表显示了所有可用的填充类。填充类Class NameClass InfopaddingAdds padding around every side.padding-verticalAdds padding to the top and bottom.padding-horizont...

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

操作表是一项Ionic服务，它将触发屏幕底部的向上滑动窗格，您可以将其用于各种目的。使用操作表在以下示例中，我们将向您展示如何使用离子作用表。首先，我们将$ ionicActionSheet服务作为对控制器的依赖项注入，然后我们将创建$ scope.showActionSheet()函数，最后将在HTML模板中创建一个按钮以调用我们创建的函数。控制器代码HTML代码代码说明当我们点击按钮时，它将触...

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

应用时，“离子背景”将覆盖屏幕内容。它将显示在其他叠加层下方(弹出窗口，正在加载等)。有两种方法可用于管理后台服务。$ ionicBackdrop.retain()将在组件上应用背景，而$ ionicBackdrop.release()会将其删除。使用背景以下示例显示了如何使用背景幕。我们将$ ionicBackdrop作为依赖项添加到控制器，然后创建$ scope.showBackdrop()函...

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

几乎每个移动应用程序都包含一些基本元素。通常，这些元素包括页眉和页脚，它们将覆盖屏幕的顶部和底部。所有其他元素将放置在这两个元素之间。离子提供作为容器的离子含量元素，它将包裹我们要创建的所有其他元素。让我们考虑以下示例-...

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

在本章中，我们将了解什么是JavaScript表单，并了解什么是JavaScript复选框，单选按钮和切换。使用离子复选框让我们看看如何使用Ionic JavaScript复选框。首先，我们需要在HTML文件中创建ion-checkbox元素。在此内部，我们将分配一个ng-model属性，该属性将连接到angular$ scope。您会注意到，定义模型的值时我们使用了一个点，即使没有它也可以使用。...

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

各种离子事件可以用来增加与用户的交互性。下表说明了所有离子事件。Event NameEvent Detailon-holdCalled when duration of the touch is more than 500ms.on-tapCalled when duration of the touch is less than 250ms.on-double-tapCalled when th...

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

这是Ionic指令，它将添加标题栏。使用JavaScript标头要创建JavaScript标题栏，我们需要在HTML文件中应用ion-header-bar指令。由于默认标题为白色，因此我们将添加title，因此它将在白色背景上显示。我们将其添加到我们的index.html文件中。上面的代码将产生以下屏幕-样式标题就像CSS标题栏一样，可以用类似的方式设置JavaScript对应样式。要应用颜色，我...

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

该指令将在屏幕底部添加页脚栏。使用页脚可以通过应用ion-footer-bar类来添加离子页脚。使用它与使用标头相同。我们可以使用align-title属性添加标题并将其放置在屏幕的左侧，中央或右侧。使用前缀栏，我们可以使用离子颜色。让我们创建一个红色的页脚，标题位于中间。上面的代码将产生以下屏幕-添加元素我们可以将按钮图标或其他元素添加到ion-footer-bar，它们的样式将被应用。让我们在...

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

键盘是Ionic的自动功能之一。这意味着Ionic可以识别何时需要打开键盘。使用键盘有一些功能，开发人员可以在使用Ionic键盘时进行调整。如果要在打开键盘的同时隐藏某些元素，可以使用hide-on-keyboard-open类。为了向您展示这是如何工作的，我们创建了输入和按钮，它们在键盘打开时需要隐藏。上面的代码将产生以下屏幕-现在，当我们点击输入字段时，键盘将自动打开，并且按钮将变为隐藏状态。...

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

在前面的章节中，我们已经讨论了Ionic CSS列表元素。在本章中，我们将向您显示JavaScript列表。它们使我们能够使用一些新功能，例如滑动，拖动和删除。使用清单如下所示，用于显示列表和项目的指令是ion-list和ion-item。上面的代码将产生以下屏幕-删除按钮可以使用ion-delete-button指令添加此按钮。您可以使用所需的任何图标类。由于我们并不总是希望显示删除按钮，因为用...

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

离子加载将在显示时禁用与用户的任何交互，并在需要时再次启用。使用加载加载在控制器内部触发。首先，我们需要在控制器中注入$ ionicLoading作为依赖项。之后，我们需要调用$ ionicLoading.show()方法，加载就会出现。要禁用它，有一个$ ionicLoading.hide()方法。控制者HTML代码当用户点击按钮时，将出现加载。在完成一些耗时的功能后，您通常会希望隐藏负载。在进...

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

激活离子模式时，内容窗格将显示在常规内容的顶部。模态基本上是具有更多功能的较大弹出窗口。默认情况下，模态将覆盖整个屏幕，但可以根据需要对其进行优化。使用模态有两种在Ionic中实现模式的方式。一种方法是添加单独的模板，另一种方法是将其添加到脚本标记内常规HTML文件的顶部。我们需要做的第一件事是使用角度依赖注入将模态连接到控制器。然后我们需要创建一个模态。我们将传递范围并将动画添加到模态中。之后，...

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

导航是每个应用程序的核心组件之一。 Ionic正在使用AngularJS UI路由器来处理导航。使用导航可以在app.js文件中配置导航。如果您使用的是Ionic模板之一，则会注意到$ stateProvider服务已注入appconfig中。以下示例显示了为应用创建状态的最简单方法。$ stateProvider服务将扫描URL，找到相应的状态并加载文件，这是我们在app.config中定义的。...

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

此视图将显示在常规视图上方。使用弹出框可以通过使用ion-popover-view元素创建Popover。该元素应添加到HTML模板中，并且需要将$ ionicPopover服务注入到控制器中。有三种添加弹出框的方法。第一个是fromTemplate方法，该方法允许使用内联模板。添加弹出窗口的第二种和第三种方法是使用fromTemplateUrl方法。让我们了解如下所述的fromtemplate方...