Расширения AngularJS

Ionic - это и CSS-фреймворк, и Javascript UI-библиотека. Javascript часто требуется для выполнения тех или иных сценариев, хотя компоненты могут быть зачастую использованы без сопровождающего программного кода, а только за счет расширений фреймворка. Такими расширениями являются, например, расширения AngularIonic.

Ionic следует шаблону контроллера (View Controller), популяризированному в других фреймворках, например, Cocoa Touch. В шаблоне View Controller мы рассматриваем разные разделы интерфейса как дочерние представления вида или даже дочерние контроллеры вида, которые содержат другие виды. Затем контроллеры вида "приводят в действие" области просмотра, находящиеся внутри них, чтобы обеспечить взаимодействие и функциональность пользовательского интерфейса. Прекрасным примером может служить Tab Bar View Controller - контроллер вида вкладки в интерфейсе панели вкладок, который обрабатывает тапы по панели вкладок, с помощью которых происходит переключение между панелями, доступными для просмотра.

Ознакомьтесь с предлагаемой нами документацией по API, которая содержит подробную информацию о контроллерах вида и утилитах Javascript, которые имеются в Ionic.

Читать далее

Action Sheet

Action Sheet, или список действий - это выдвигающаяся панель, которая позволяет пользователю выбирать нужное действие из предлагаемого набора опций.
Опасные опции подсвечиваются красным цветом, их сразу очень хорошо видно.

Убрать с экрана список действий очень легко, можно коснуться фоновой области за пределами списка или, например, нажать кнопку "escape" на клавиатуре с рабочего стола.

 

Action Sheet

Применение

Чтобы список действий Action Sheet работал в вашем коде, воспользуйтесь сервисом $ionicActionSheet и контроллерами Angular.

angular.module('mySuperApp', ['ionic'])
.controller(function($scope, $ionicActionSheet, $timeout) {

 // Triggered on a button click, or some other target
 $scope.show = function() {

   // Show the action sheet
   var hideSheet = $ionicActionSheet.show({
     buttons: [
       { text: '<b>Share</b> This' },
       { text: 'Move' }
     ],
     destructiveText: 'Delete',
     titleText: 'Modify your album',
     cancelText: 'Cancel',
     cancel: function() {
          // add cancel code..
        },
     buttonClicked: function(index) {
       return true;
     }
   });

   // For example's sake, hide the sheet after two seconds
   $timeout(function() {
     hideSheet();
   }, 2000);

 };
});

Методы

 

show(options)

Загрузка и возврат нового списка действий.

Будет создана новая область действия идентификатора для
списка действий, и новый элемент добавится в тело.

Параметр

Тип

Описание

опции

object объект

Опции для этого Action Sheet. Свойства:

  • [Object]buttons Определяет, какую из кнопок требуется отображать. Каждая кнопка является объектом с текстовым полем.
  • {string}titleText Заголовок (или символическое имя), который нужно отображать в списке действий.
  • {string=}cancelText Текст для кнопки 'cancel' (отмены действия) в списке действий.
  • {string=}destructiveText Текст для 'danger' (опасности) в списке действий.
  • {function=}cancel Вызывается, если нажата кнопка отмены действия (cancel button), произошло касание фона или нажата аппаратная кнопка "Назад" (back button).
  • {function=}buttonClicked Вызывается, когда нажимается одна из кнопок бездестурктивного действия, с указанием индекса кнопки, которая была нажата, и объектом кнопки. Возврат значения "true" будет означать закрытие списка действий, а "false" будет держать его открытым.
  • {function=}destructiveButtonClicked Вызывается, когда нажимается кнопка бездестурктивного действия. Возврат "true" будет означать закрытие списка действий, а "false" будет держать его открытым.
  • {boolean=}cancelOnStateChange Определяет, закрыть ли список действий при переходе в новое состояние. По умолчанию "true".
  • {string}cssClass Пользовательское имя CSS-класса.
  • Возвращает:
    functionhideSheet Функция, которая при вызове скрывает или отменяет список действий.
Читать далее

$ionicBackdrop

Отображает и прячет фоновую область поверх UI. Появляется позади всплывающих окон, индикаторов загрузки и других оверлеев (overlays).

Очень часто многие компоненты UI требуют наличия фоновой области, но за один раз в DOM бывает нужна только одна фоновая область.

Поэтому каждый компонент, требующий отображения фоновой области, вызывает
$ionicBackdrop.retain(), когда ему нужен фон, затем $ionicBackdrop.release(),когда фон становится не нужен.

Каждый раз, когда вызывается retain, фоновая область будет отображаться до тех пор, пока не будет вызван release.

Например, если retain вызывается три раза, фон будет отображаться, пока так же три раза не будет вызван release.

Примечание:
Сервис фона домашнего экрана будет распространять события backdrop.shown’ и ‘backdrop.hidden’ из корневой области видимости (root scope),
это удобно для оповещения нативных компонентов, содержащихся не в HTML.

Применение

function MyController($scope, $ionicBackdrop, $timeout, $rootScope) {
  //Show a backdrop for one second
  $scope.action = function() {
    $ionicBackdrop.retain();
    $timeout(function() {
      $ionicBackdrop.release();
    }, 1000);
  };

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

  // Execute action on backdrop appearing
  $scope.$on('backdrop.shown', function() {
    // Execute action
  });

}

Methods

 

retain()

Retains the backdrop.

 

release()

Releases the backdrop.

Читать далее

Контент

Читать далее

ion-content

Delegate: $ionicScrollDelegate

Директива ionContent предоставляет легкую в использовании область контента, которую можно настраивать, для того чтобы задействовать, имеющийся в Ionic пользовательский просмотр в режиме прокрутки (Scroll View) или встроенную в браузер функцию добавления полосы прокрутки при переполнении блока.

Мы все-таки рекомендуем в большинстве случаев использовать настраиваемые Scroll-функции, имеющиеся в Ionic, но иногда (по соображениям улучшения производительности) будет уместно применить нативный для браузера скроллинг при переполнении блоков. Мы сделали так, что переключаться между функцией прокрутки в Ionic и прокруткой при переполнении стало очень легко.

Вы можете обновлять данные, выполняя pull-to-refresh ("потяни, чтобы обновить") с помощью директивы ionRefresher, а бесконечную прокрутку с помощью директивы ionInfiniteScroll.

Если внутри ion-content есть какой-либо динамический контент, не забудьте после добавления контента сделать вызов функции .resize() с помощью $ionicScrollDelegate.

Имейте в виду, что эта директива получает собственную дочернюю область видимости. Если вы не понимаете, почему это важно, вы можете прочитать информацию, открыв ссылку https://docs.angularjs.org/guide/scope.

Применение

<ion-content
[delegate-handle=""]
[direction=""]
[locking=""]
[padding=""]
[scroll=""]
[overflow-scroll=""]
[scrollbar-x=""]
[scrollbar-y=""]
[start-x=""]
[start-y=""]
[on-scroll=""]
[on-scroll-complete=""]
[has-bouncing=""]
[scroll-event-interval=""]>
...
</ion-content>

API

Атрибут

Тип

Описание

delegate-handle

(необязательный)

(string)

Дескриптор handle использовался для идентификации данного ScrollView с помощью директивы $ionicScrollDelegate.

direction

(необязательный)

(string)

Определяет, каким образом делать прокрутку: 'x', или 'y', или 'xy'. По умолчанию задан параметр 'y'.

locking

(необязательный)

(boolean)

Определяет, нужно ли блокировать скроллинг в одном из направлений за один прием. Будет удобно установить значение "false" при раскрытии или прокрутке в двух направлениях. По умолчанию используется "true".

padding

(необязательный)

(boolean)

Определяет, нужно ли добавлять заполнение к контенту. По умолчанию используется "true" в iOS, "false" в Android.

scroll

(необязательный)

(boolean)

Определяет, нужно ли разрешать прокрутку контента. По умолчанию используется "true".

overflow-scroll

(необязательный)

(boolean)

Определяет, нужно ли использовать прокрутку при переполнении блока вместо прокрутки Ionic. См.$ionicConfigProvider, чтобы установить это в качестве значения по умолчанию для всей области.

scrollbar-x

(необязательный)

(boolean)

Определяет, нужно ли отображать горизонтальную полосу прокрутки. По умолчанию используется "true".

scrollbar-y

(необязательный)

(boolean)

Определяет, нужно ли отображать вертикальную полосу прокрутки. По умолчанию используется "true".

start-x

(необязательный)

(string)

Исходное горизонтальное положение полосы прокрутки. По умолчанию 0.

start-y

(необязательный)

(string)

Исходное вертикальное положение полосы прокрутки. По умолчанию 0.

on-scroll

(необязательный)

(expression)

Выражение для определения момента, когда контент прокручивается.

on-scroll-complete

(необязательный)

(expression)

Выражение для определения момента, когда прокрутка выполнена. Имеет доступ к областям прокрутки 'scrollLeft' и 'scrollTop'.

has-bouncing

(необязательный)

(boolean)

Определяет, разрешать ли прокрутку, если выйти за края контента. По умолчанию "true" в iOS, "false" в Android.

scroll-event-interval

(необязательный)

(number)

Задает количество миллисекунд между каждым запуском выражения 'on-scroll'. По умолчанию стоит значение 10.

 

Читать далее

ion-refresher

Дочерний элемент ionContent или ionScroll

Разрешает вам добавить функцию обновления данных pull-to-refresh к ScrollView.

Поместите его, как первый дочерний элемент от вашего элемента ionContent или
ionScroll.

Когда обновление данных завершено, идет распространение события ‘scroll.refreshComplete’ из вашего контроллера.

Применение

<ion-content ng-controller="MyController">
  <ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh()">
  </ion-refresher>
  <ion-list>
    <ion-item ng-repeat="item in items"></ion-item>
  </ion-list>
</ion-content>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) {
  $scope.items = [1,2,3];
  $scope.doRefresh = function() {
    $http.get('/new-items')
     .success(function(newItems) {
       $scope.items = newItems;
     })
     .finally(function() {
       // Stop the ion-refresher from spinning
       $scope.$broadcast('scroll.refreshComplete');
     });
  };
});
Читать далее

ion-pane

Простой контейнер, соответствующий размеру контента. Не имеет побочных эффектов. Добавляет элементу класс "pane".

Применение

<ion-pane>
...
</ion-pane>
Читать далее

Инпуты

Читать далее

ion-checkbox

Простой контейнер, соответствующий размеру контента. Не имеет побочных эффектов. Добавляет элементу класс "pane".

Применение

<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>

See the Pen Checkbox: Nightly by Ionic (@ionic) on CodePen.

Читать далее

ion-radio

Радио-директива не отличается от такого элемента ввода, как радио-кнопки в HTML, только она по-другому стилизована.

Радио ведет себя, как и AngularJS радио.

Применение

<ion-radio ng-model="choice" ng-value="'A'">Choose A</ion-radio>
<ion-radio ng-model="choice" ng-value="'B'">Choose B</ion-radio>
<ion-radio ng-model="choice" ng-value="'C'">Choose C</ion-radio>

See the Pen Radio Buttons: Nightly by Ionic (@ionic) on CodePen.

Читать далее

ion-toggle

Toggle - это анимированный переключатель, который привязывает данную модель к логическому значению.

Позволяет ставить переключатель в одно из двух положений - включено или выключено.

Чекбокс ведет себя так же, как любой чекбокс AngularJS.

Применение

Ниже дан пример директивы для элемента toggle, который привязан к модели airplaneMode и имеет CSS-класс toggle-calm, назначенный для внутреннего элемента.

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

See the Pen Toggle: Nightly by Ionic (@ionic) on CodePen.

Читать далее

Жесты и события

Читать далее

on-hold

Касание, производимое в одном и том же месте экрана, длится 500 мс. Точно такие же события с длительным касанием имеются в AngularJS и jQuery.

Применение

<button on-hold="onHold()" class="button">Test</button>
Читать далее

on-tap

Быстрое касание экрана. Если продолжительность касания составляет более 250 мс, это уже нельзя назвать тапом.

Применение

<button on-tap="onTap()" class="button">Test</button>
Читать далее

on-double-tap

Двойной тап по экрану.

Применение

<button on-double-tap="onDoubleTap()" class="button">Test</button>
Читать далее

on-touch

Вызывается немедленно, когда пользователь в первый раз касается экрана. Этот жест не ждет наступления события touchend/mouseup.

Применение

<button on-touch="onTouch()" class="button">Test</button>
Читать далее

on-release

Вызывается, когда пользователь завершает прикосновение.

Применение

<button on-release="onRelease()" class="button">Test</button>
Читать далее

on-drag

Перемещение одним касанием в пределах данной страницы. Рекомендуется блокирование прокрутки при движении влево и вправо. Когда все события перетаскивания блокируют действия, вы отключаете прокрутку этой области.

Применение

<button on-drag="onDrag()" class="button">Test</button>
Читать далее

on-drag-up

Вызывается, когда элемент перетаскивается вверх.

Применение

<button on-drag-up="onDragUp()" class="button">Test</button>
Читать далее

on-drag-right

Вызывается, когда элемент перетаскивается вправо.

Usage

<button on-drag-right="onDragRight()" class="button">Test</button>
Читать далее

on-drag-down

Вызывается, когда элемент перетаскивается вниз.

Usage

<button on-drag-down="onDragDown()" class="button">Test</button>
Читать далее

on-drag-left

Вызывается, когда элемент перетаскивается влево.

Usage

<button on-drag-left="onDragLeft()" class="button">Test</button>
Читать далее

on-swipe

Вызывается, когда свайп выполняется на высокой скорости в любом направлении.

Usage

<button on-swipe="onSwipe()" class="button">Test</button>
Читать далее

on-swipe-up

Вызывается, когда свайп выполняется на высокой скорости в направлении вверх.

Usage

<button on-swipe-up="onSwipeUp()" class="button">Test</button>
Читать далее

on-swipe-right

Вызывается, когда свайп выполняется на высокой скорости в направлении вправо.

Применение

<button on-swipe-right="onSwipeRight()" class="button">Test</button>
Читать далее

on-swipe-down

Вызывается, когда свайп выполняется на высокой скорости в направлении вниз.

Usage

<button on-swipe-down="onSwipeDown()" class="button">Test</button>
Читать далее

on-swipe-left

Вызывается, когда свайп выполняется на высокой скорости в направлении влево.

Применение

<button on-swipe-left="onSwipeLeft()" class="button">Test</button>
Читать далее

$ionicGesture

Служба Angular, отвечающая за Ionic-жесты
ionic.EventController.

Методы

on(eventType, callback, $element, options)

Добавляет элементу слушатель событий для жеста. См.ionic.EventController.

Параметр

Тип

Описание

eventType

строка (string)

Событие жеста, которое нужно слушать.

callback

function(e)

Функция, которая будет вызвана, когда произойдет жест.

$element

элемент

Элемент, который применяется для слушания события.

options

объект (object)

объект.

  • Возвращает:
    ionic.Gesture Объект жеста (используйте это, чтобы потом убрать жест).

off(gesture, eventType, callback)

Убирает назначенный для элемента слушатель событий для жеста. См.ionic.EventController.

Параметр

Тип

Описание

gesture

ionic.Gesture

Жест, который нужно убрать.

eventType

строка (string)

Событие жеста, для которого нужно убрать слушатель.

callback

function(e)

Слушатель, который нужно убрать.

 

Читать далее

Хедер/Футер

Читать далее

ion-header-bar

Добавляет фиксированную строку заголовка над некоторым контентом.

Также может быть подзаголовком (расположенным ниже), если применяется класс ‘bar-subheader’. См. раздел документации the header CSS docs (хедер CSS).

Применение

<ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>
<ion-content>
  Some content!
</ion-content>

API

Атрибут

Тип

Описание

align-title

(необязательный)

(string)

Как выровнять заголовок. По умолчанию заголовок будет выровнен точно так же, как платформа выравнивает свои заголовки (в iOS заголовки ставятся по центру, в Android они сдвигаются влево). Доступно: "слева", "справа" или "по центру". По умолчанию выравнивание происходит по тем же принципам, что и для самой платформы.

no-tap-scroll

(необязательный)

(boolean)

По умолчанию при тапе по строке заголовка в шапке контент будет прокручен на начало. Установите параметр no-tap-scroll, чтобы отключить такое поведение. Доступно: true или false. По умолчанию используется false.

Читать далее

ion-footer-bar

Добавляет фиксированную строку футера под некоторым контентом.

Также может быть строкой с subfooter - располагаться выше футера, если применяется класс ‘bar-subfooter’. См. раздел документации thefooter CSS docs (футер CSS).

Примечание: Если вы используете ionFooterBar в сочетании с ng-if, окружающий контент не будет корректно выровнен. Скоро это будет исправлено.

Применение

<ion-content>
  Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
  <div class="buttons">
    <button class="button">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons" ng-click="doSomething()">
    <button class="button">Right Button</button>
  </div>
</ion-footer-bar>

API

Атрибут

Тип

Описание

align-title

(необязательный)

(string)

Куда поместить заголовок. Доступно: "слева", "справа" или "по центру". По умолчанию задан параметр "по центру".

Читать далее

Клавиатура

И в Android, и в iOS Ionic будет пытаться не допустить затемнения элементов ввода и элементов, имеющих фокус, когда производится скроллинг, и они входят в вид представления. Чтобы это работало, любой из элементов, имеющих фокус, должен быть в пределах Scroll View или такой директивы, как Content, которая имеет Scroll View.

Она тоже будет пытаться предотвратить прокрутку при нативном переполнении в отношении фокуса, что может повлечь проблемы с компоновкой, например, заголовки в шапках сдвинутся вверх и за пределы области представления.

Клавиатура лучше всего работает вместе с плагином Ionic Keyboard Plugin,
хотя и без него она тоже будет функционировать достаточно хорошо. Однако, если вы имеете дело с Cordova, нет причины для того, чтобы не воспользоваться данным плагином.

Скрыть, когда отображается клавиатура

Чтобы спрятать элемент, когда открыта клавиатура, добавьте класс hide-on-keyboard-open.

<div class="hide-on-keyboard-open">
  <div id="google-map"></div>
</div>

Примечание: Для улучшения производительности элементы не будут скрыты в течение 400 мс после запуска из плагина Ionic Keyboard plugin события native.keyboardshow. Если вы хотите, чтобы они тут же исчезли, вы можете сделать что-то вроде:

  window.addEventListener('native.keyboardshow', function(){
    document.body.classList.add('keyboard-open');
  });

Это добавляет тот же самый класс keyboard-open, который обычно добавляет Ionic через 400 мс после того, как открывается клавиатура. Однако имейте в виду, что добавление этого класса к телу может моментально вызвать замедления анимации на Android. Проблемы с анимацией появляются, когда открывается клавиатура (например, при прокрутке любых затемненных элементов ввода в вид представления).


Использование плагина

Информацию по использованию плагина можно найти по этой ссылке:
https://github.com/driftyco/ionic-plugins-keyboard.


Примечание для Android

  • Если ваше приложение работает в полноэкранном режиме, т.е. у вас записано
    <preference name="Fullscreen" value="true" /> в файле config.xml,
    вам нужно вручную прописать ionic.Platform.isFullScreen = true
  • Вы можете конфигурировать поведение веб-представления при отображении клавиатуры настройкой
    android:windowSoftInputMode,
    меняя параметры adjustPan, adjustResize или adjustNothing.
    Это делается в AndroidManifest.xml. Для Ionic рекомендуется настраивать adjustResize, но если вы используете adjustPan, вам потребуется
    откорректировать ionic.Platform.isFullScreen = true.
<activity android:windowSoftInputMode="adjustResize">

Примечание для iOS

Если контент вашего приложения (включая хедер) выходит за верхние границы области просмотра
и не виден при фокусе ввода, попытайтесь установить cordova.plugins.Keyboard.disableScroll(true).
Это не отключит скроллинг в Ionic scroll view,
это, скорее, деактивирует нативную функцию прокрутки при переполнении блока, которая обычно запускается автоматически в
результате фокуса на элементы ввода, расположенные ниже клавиатуры.

Читать далее

keyboard-attach

keyboard-attach - директива, которая является атрибутом, применение которого заставит элемент плавать над клавиатурой в момент ее отображения. На текущий момент поддерживает только директиву ion-footer-bar .

Примечание

  • Эта директива требует плагина Ionic Keyboard Plugin.
  • На Андроиде, не в полноэкранном режиме, т.е. у вас есть
    <preference name="Fullscreen" value="false" /> or no preference in your config.xml файл,
    эта директива теряет свою нужность, так как это является поведением, принятым по умолчанию.
  • На iOS, если имеется ввод у вас в футере, вам нужно будет установить
    cordova.plugins.Keyboard.disableScroll(true).

Применение

 <ion-footer-bar align-title="left" keyboard-attach class="bar-assertive">
   <h1 class="title">Title!</h1>
 </ion-footer-bar>
Читать далее

Списки

Читать далее

ion-list

Delegate: $ionicListDelegate

Список (list) - это широко используемый практически в каждом мобильном приложении элемент интерфейса. Он может содержать разнообразный контент, начиная с обычного текста, заканчивая кнопками, переключателями, иконками и пиктограммами.

Как сам список, так и входящие в него пункты могут представлять собой
любой элемент HTML. Данный элемент требует присвоения класса list, а каждый входящий в состав списка пункт требует присвоения класса item.

Однако использование директив ionList и ionItem легко обеспечивает поддержку различных режимов взаимодействия, таких как "проведите пальцем для редактирования", "перетащите, чтобы изменить порядок пунктов в списке", а также удаления пунктов списка.

 

 

Применение

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

 

<ion-list ng-controller="MyCtrl"
          show-delete="shouldShowDelete"
          show-reorder="shouldShowReorder"
          can-swipe="listCanSwipe">
  <ion-item ng-repeat="item in items"
            class="item-thumbnail-left">

    <img ng-src="{{item.img}}">
    <h2>{{item.title}}</h2>
    <p>{{item.description}}</p>
    <ion-option-button class="button-positive"
                       ng-click="share(item)">
      Share
    </ion-option-button>
    <ion-option-button class="button-assertive"
                       ng-click="edit(item)">
      Edit
    </ion-option-button>
    <ion-delete-button class="ion-minus-circled"
                       ng-click="items.splice($index, 1)">
    </ion-delete-button>
    <ion-reorder-button class="ion-navicon"
                        on-reorder="reorderItem(item, $fromIndex, $toIndex)">
    </ion-reorder-button>

  </ion-item>
</ion-list>
app.controller('MyCtrl', function($scope) {
 $scope.shouldShowDelete = false;
 $scope.shouldShowReorder = false;
 $scope.listCanSwipe = true
});

API

Атрибут

Тип

Описание

delegate-handle

(необязательный)

(string)

Дескриптор handle используется для идентификации списка посредством $ionicListDelegate.

type

(необязательный)

(string)

Определяет тип списка, который нужно использовать (список-вставка или список-карточка)

show-delete

(необязательный)

(boolean)

Определяет,  нужно ли отобразить или спрятать на данный момент кнопки удаления для пунктов списка.

show-reorder

(необязательный)

(boolean)

Определяет, нужно ли отобразить или спрятать на данный момент кнопки изменения порядка перечисления для пунктов списка.

can-swipe

(необязательный)

(boolean)

Определяет, позволяется ли проводить пальцем по пунктам в списке, чтобы стали доступны кнопки опций. По умолчанию используется параметр true.

Читать далее

ion-item

Применение

<ion-list>
  <ion-item>Hello!</ion-item>
  <ion-item href="#/detail">
    Link to detail page
  </ion-item>
</ion-list>
Читать далее

ion-delete-button

Применение

<ion-list show-delete="shouldShowDelete">
  <ion-item>
    <ion-delete-button class="ion-minus-circled"></ion-delete-button>
    Hello, list item!
  </ion-item>
</ion-list>
<ion-toggle ng-model="shouldShowDelete">
  Show Delete?
</ion-toggle>
Читать далее

ion-reorder-button

Дочерний эллемент ionItem

Применение

<ion-list ng-controller="MyCtrl" show-reorder="true">
  <ion-item ng-repeat="item in items">
    Item 
    <ion-reorder-button class="ion-navicon"
                        on-reorder="moveItem(item, $fromIndex, $toIndex)">
    </ion-reorder-button>
  </ion-item>
</ion-list>
function MyCtrl($scope) {
  $scope.items = [1, 2, 3, 4];
  $scope.moveItem = function(item, fromIndex, toIndex) {
    //Move the item in the array
    $scope.items.splice(fromIndex, 1);
    $scope.items.splice(toIndex, 0, item);
  };
}

API

АтрибутТипОписание
on-reorder
(optional)
expression

Expression to call when an item is reordered. Parameters given: $fromIndex, $toIndex.

Читать далее

ion-option-button

Дочерний элемент ionItem

Создает кнопку выбора внутри пункта списка, она становится видна, когда пользователь
делает по данному пункту списка свайп влево. Открытые свайпом кнопки выбора могут быть скрыты с помощью
$ionicListDelegate.closeOptionButtons.

Может быть назначен любой класс кнопок.

Для более подробного объяснения и дополнительных примеров см. ionList

Применение

<ion-list>
  <ion-item>
    I love kittens!
    <ion-option-button class="button-positive">Share</ion-option-button>
    <ion-option-button class="button-assertive">Edit</ion-option-button>
  </ion-item>
</ion-list>
Читать далее

collection-repeat

 

collection-repeat позволяет приложению отображать списки, содержащие огромное количество пунктов. При этом действует более эффективно, чем ng-repeat.

В DOM передаются только те пункты, которые видны в данный момент.

Это означает, что на экране телефона, где могут уместиться только восемь пунктов списка, будут в данном виде отображения видны восемь пунктов списка (без применения прокрутки).

Основы:

  • Данные, передающиеся в collection-repeat, должны представлять собой массив.
  • Если не предоставляются атрибуты item-height и item-width, будет сделано допущение, что каждый пункт в списке имеет точно такие же размеры, как и самый первый его пункт.
  • Не используйте с collection-repeat одноразовую привязку Angular (::). По мере прокрутки области видимости каждого пункта из списка присваиваются новые данные, и происходит процесс переклассификации. Привязки нуждаются в обновлениях, а одноразовым привязкам обновление не нужно.

Возможности повышения производительности:

  • Узкое место производительности веб-представления в iOS наблюдается при отключении атрибутов <img src>.
    Чтобы увеличить эффективность работы с изображениями в iOS, заранее поместите изображения в кэш и, если возможно, уменьшите число уникальных изображений. 

Usage

Basic Item List (codepen)

<ion-content>
  <ion-item collection-repeat="item in items">
    {{item}}
  </ion-item>
</ion-content>

Grid of Images (codepen)

<ion-content>
  <img collection-repeat="photo in photos"
    item-width="33%"
    item-height="200px"
    ng-src="{{photo.url}}">
</ion-content>

Horizontal Scroller, Dynamic Item Width (codepen)

<ion-content>
  <h2>Available Kittens:</h2>
  <ion-scroll direction="x" class="available-scroller">
    <div class="photo" collection-repeat="photo in main.photos"
       item-height="250" item-width="photo.width + 30">
       <img ng-src="{{photo.src}}">
    </div>
  </ion-scroll>
</ion-content>

API

Атрибут

Тип

Описание

collection-repeat

(expression)

Выражение, показывающее как нумеровать коллекцию, по формату  переменная в выражении – где переменная задается пользователем и является цикловой переменной, а выражение - это выражение области видимости, дающее возможность нумеровать коллекцию. Например: album in artist.albums или album in artist.albums | orderBy:'name'.

item-width

(необязательный)

(expression)

Ширина повторяемого элемента. Выражение должно возвращать число (пикселей) или проценты. По умолчанию задается точно такая же ширина, как у первого пункта в списке. (ранее это называлось collection-item-width)

item-height

(необязательный)

(expression)

Высота повторяемого элемента. Выражение должно возвращать число (пикселей) или проценты. По умолчанию задается точно такая же высота, как у первого пункта в списке. (ранее это называлось collection-item-height)

item-render-buffer

(необязательный)

(number)

Число пунктов, которые нужно загрузить до и после видимых пунктов в списке. По умолчанию: 3. Подсказка: если у вас много изображений для предварительной загрузки, задайте число побольше, но не слишком большое, иначе начнется потеря производительности.

force-refresh-images

(необязательный)

(boolean)

Заставляет изображения обновляться, когда вы осуществляете прокрутку. Это решает проблему там, где элемент взаимно заменяется при скроллинге: изображение все равно имеет старый scr в то время, как загружается новый scr. Установка значения на true приводит к небольшой потере производительности.

Читать далее

$ionicListDelegate

Делегат для управления директивой ionList.

Вызываемые напрямую методы сервиса $ionicListDelegate будут управлять всеми списками.
Используйте метод $getByHandle, чтобы управлять указанными экземплярами ionList. 

Применение


<ion-content ng-controller="MyCtrl">
  <button class="button" ng-click="showDeleteButtons()"></button>
  <ion-list>
    <ion-item ng-repeat="i in items">
      Hello, {{i}}!
      <ion-delete-button class="ion-minus-circled"></ion-delete-button>
    </ion-item>
  </ion-list>
</ion-content>

function MyCtrl($scope, $ionicListDelegate) {
  $scope.showDeleteButtons = function() {
    $ionicListDelegate.showDelete(true);
  };
}

Методы

 

showReorder([showReorder])

Параметр

Тип

Описание

showReorder

(необязательный)

(boolean)

Устанавливает, будут или нет отображаться кнопки изменения порядка пунктов в этом списке.

  • Возвращает:
    логическое значение (boolean) Будут ли отображаться кнопки изменения последовательности.

showDelete([showDelete])

Параметр

Тип

Описание

showDelete

(необязательный)

(boolean)

Устанавливает, будет этот список отображать кнопки удаления или нет.

  • Возвращает:
    логическое значение (boolean) Будут или нет отображаться кнопки удаления.

canSwipeItems([canSwipeItems])

Параметр

Тип

Описание

canSwipeItems

(необязательный)

(boolean)

Устанавливает, будет ли возможность для этого списка открывать свайпом кнопки с опциями.

  • Возвращает:
    логическое значение  (boolean) Будет ли возможность отображения кнопок с опциями для этого списка.

closeOptionButtons()

Закрывает любую из кнопок выбора вариантов в списке, которая открыта свайпом.

$getByHandle(handle)

Параметр

Тип

Описание

handle

строка

(string)

  • Возвращает:
    delegateInstance Экземпляр делегата, который управляет
    директивами ionList приведением delegate-handle
    в соответствие с данным обработчиком.

Пример: $ionicListDelegate.$getByHandle('my-handle').showReorder(true);

Читать далее

Загрузка

Читать далее

$ionicLoading

Оверлей, который можно использовать для индикации действия во время блокировки действий пользователя.

Применение

angular.module('LoadingApp', ['ionic'])
.controller('LoadingCtrl', function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: 'Loading...'
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

Методы

show(opts)

Отображает индикатор загрузки. Если индикатор уже отображается,
он настроит имеющиеся опции и продолжит отображать индикатор. Примечание: Пока эта
функция продолжает возвращать экземпляр $ionicLoading для обратной совместимости,
использовать ее не рекомендуется.

Параметр

Тип

Описание

opts

объект(object)

Опции для индикатора загрузки Доступные свойства:

  • {string=}template HTML-контент индикатора.
  • {string=}templateUrl Указатель URL шаблона HTML для загрузки в качетстве контента индикатора.
  • {object=}scope Объект scope, который будет дочерним. По умолчанию: создает дочерний объект $rootScope.
  • {boolean=}noBackdrop Определяет, скрывать фон или нет. По умолчанию он будет отображаться.
  • {boolean=}hideOnStateChange Определяет, скрывать или нет анимацию загрузки при переходе в новое состояние. По умолчанию "false".
  • {number=}delay Определяет, сколько миллисекунд составляет задержка отображения индикатора. По умолчанию задержки нет.
  • {number=}duration Определяет, сколько миллисекунд составляет период ожидания до того, как будет автоматически скрыт индикатор. По умолчанию индикатор будет отображаться до тех пор, пока не будет вызван метод.hide().

hide()

Скрывает индикатор загрузки, если он отображается.

Читать далее

$ionicLoadingConfig

Устанавливает дефолтные опции, которые требуется передать сервису $ionicLoading.

Применение

var app = angular.module('myApp', ['ionic'])
app.constant('$ionicLoadingConfig', {
  template: 'Default Loading Template...'
});
app.controller('AppCtrl', function($scope, $ionicLoading) {
  $scope.showLoading = function() {
    $ionicLoading.show(); //options default to values in $ionicLoadingConfig
  };
});
Читать далее

Модальные окна

Читать далее

$ionicModal

Смежные темы: ionicModal controller.

Модальное окно - это панель с контентом, которая временно может появиться поверх основного вида представления пользователя.Обычно используется для совершения выбора или редактирования элемента (пункта).

Поместите контент модального окна внутрь элемента <ion-modal-view>.

Примечание:
Модальное окно будет транслировать события ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ из инициирующей его области видимости, передавая себя в качестве аргумента события. Оба события - и modal.removed, и modal.hidden
вызываются тогда, когда модальное окно убрано.

  • Этот пример предполагает, что ваше модальное окно находится в главном файле индекса или другом файле-шаблоне. Если оно находится в своем собственном
    файле-шаблоне, уберите теги script и назовите его по имени файла.

Usage

<script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-modal-view>
</script>
angular.module('testApp', ['ionic'])
.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
  });
});

Методы

fromTemplate(templateString, options)

Параметр

Тип

Описание

templateString

(string)

Строка шаблона, которую нужно использовать как контент модального окна.

options

(object)

Опции, которые передаются методом ionicModal#initialize.

  • Возвращает:
    object Экземпляр контроллера ionicModal.

fromTemplateUrl(templateUrl, options)

Параметр

Тип

Описание

templateUrl

(string)

Адрес URL, указывающий, откуда нужно загружать шаблон.

options

(object)

Опции, которые должны передаваться методу ionicModal#initialize. Объект опций.

  • Возвращает:
    promise Обещание, которое будет выполнено с помощью экземпляра
    контроллера ionicModal.
Читать далее

ionicModal

Обрабатывается сервисом $ionicModal.

После того, как вы закончили с каждым из модальных окон, обязательно вызовите remove(), чтобы провести очистку и избежать утечек памяти.

Примечание: модальное окно будет транслировать события ‘modal.shown’, ‘modal.hidden’, and ‘modal.removed’ из инициирующей его области видимости, передавая себя в качестве аргумента события. Примечание: Оба события - и modal.removed, и modal.hidden
вызываются тогда, когда модальное окно убрано.

Методы

initialize(options)

Создает новый экземпляр модального контроллера.

Параметр

Тип

Описание

options

объект (object)

Объект опции со следующими свойствами:

  • {object=}scope Область видимости, которая будет дочерним объектом. По умолчанию: создает дочерний объект $rootScope.
  • {string=}animation Анимация, которую нужно будет отображать и скрывать вместе с объектом. По умолчанию: 'slide-in-up'
  • {boolean=}focusFirstInput Определяет, нужно ли автоматически фокусировать первый элемент ввода модального окна при отображении. Будет только отображать клавиатуру в iOS, чтобы заставить отображать клавиатуру на Android, используйте плагин Ionic keyboard plugin. По умолчанию: false.
  • {boolean=}backdropClickToClose Определяет, нужно ли закрывать модальное окно при клике вне его границ. По умолчанию: true.
  • {boolean=}hardwareBackButtonClose Определяет, есть ли возможность закрытия модального окна с помощью аппаратной кнопки "Назад" на Android-устройствах и других похожих устройствах. По умолчанию: true.

show()

Отображает этот экземпляр модального окна.

  • Возвращает:
    promise Обещание, которое разрешено (resolved), когда закончится анимация внутреннего контента модального окна.

hide()

Скрывает этот экземпляр модального окна.

  • Возвращает:
    promise Обещание, которое разрешено, когда закончится анимация модального окна.

remove()

Убирает этот экземпляр модального окна из дерева DOM и выполняет очистку.

  • Возвращает:
    promise Обещание, которое разрешено, когда закончится анимация модального окна.

isShown()

  • Возвращает:
    логическое значение Определяет, отображается ли в текущий момент это модальное окно.
Читать далее

Навигация

Читать далее

ion-nav-view

See the Pen Tabs And Navigation: Nightly by Ionic (@ionic) on CodePen.

Пользователь использует навигацию для переходов по приложению, а Ionic способен отслеживать историю его перемещений. Зная историю, переходы между видами представлений корректно происходят во всех направлениях с использованием стиля переходов, характерным для платформы. Дополнительное преимущество навигационной системы Ionic состоит в его способности управлять несколькими историями. Например, каждая вкладка может иметь свою историю перемещений.

Ionic использует модуль AngularUI Router, поэтому интерфейсы приложений могут быть организованы в различные "состояния". Как и базовый $route-сервис у Angular, управлять видами представлений так же могут и URL. Однако AngularUI Router является более мощным менеджером состояний, состояния привязаны к видам - с именем, вложенным и параллельным, позволяя более, чем одному шаблону быть представленным на одной и той же странице. К тому же каждое состояние не обязательно должно быть привязано к URL, и данные могут доставляться к каждому из состояний, которые позволяют большую гибкость.

Директива ionNavView используется для рендеринга шаблонов в ваше приложение. Каждый шаблон является частью состояния. К состояниям обычно привязан адрес URL, и они определяются программным образом с помощью angular-ui-router (см. документы,
и помните, что в примерах нужно заменить ui-view на ion-nav-view).

Применение

В этом примере мы создадим видовое представление навигации, которое содержит разные состояния для конкретного приложения.

Чтобы это сделать, в нашей разметке мы используем директиву верхнего уровня. Для отображения строки заголовка мы используем директиву ionNavBar, которая обновляется по мере нашего продвижения по стеку переходов.

Затем нам понадобится установить состояния, которые будут рендериться.

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

Затем при запуске приложения $stateProvider будет смотреть на адрес URL, определяя, подходит ли он состоянию индекса, и затем попытается загрузить home.html в <ion-nav-view>

Страницы загружаются согласно заданным адресам URL. Один простой способ создания шаблонов в Angular предполагает записывать их напрямую в ваш HTML-файл и использовать синтакс <script type="text/ng-template">.
Вот один из способов записи home.html в наше приложение:

<script id="home" type="text/ng-template">
  
  <ion-view view-title="Home">
    <ion-content ng-controller="HomeCtrl">
      
      <a href="#/music">Go to music page!</a>
    </ion-content>
  </ion-view>
</script>

Это хороший способ, потому что шаблон будет помещаться в кэш и, следовательно, будет очень быстро загружаться, а не браться из сети.

Кеширование

По умолчанию виды представлений кэшируются, это улучшает производительность. Когда из вида уже совершен переход, его элемент остается в структуре DOM, и область видимости отключается от цикла $watch. Когда перемещение в вид уже помещено в кэш, область видимости снова подключается, и существующий элемент, который был оставлен в DOM, становится активным видом представления. Это также позволяет поддерживать
положение полосы прокрутки предыдущих видов.

Кэширование можно отключать и включать многими способами. По умолчанию Ionic будет кэшировать максимум 10 видов, но не только этот параметр можно настраивать, приложения тоже могут прямо указывать, какие виды следует и не следует кэшировать.

Имейте в виду, что от того, что мы помещаем эти виды в кэш, мы не разрушаем области видимости. Вместо этого области видимости отключаются от цикла наблюдения. Так как области видимости не разрушаются и воссоздаются заново, контроллеры не загружаются опять при последующем просмотре. Если приложению/контроллеру требуется знать, когда вид вошел или вышел, то могут быть полезны события вида, которые генерируются из области видимости ionView, такие как $ionicView.enter.

По умолчанию, когда происходит перемещение назад в истории, "последующие" виды убираются из кэша.
Если вы перемещаетесь вперед, снова в тот же самый вид, то будет создан новый DOM-элемент и экземпляр контроллера. В основном, любые последующие виды каждый раз переустанавливаются. Это можно конфигурировать, используя
$ionicConfigProvider:

$ionicConfigProvider.views.forwardCache(true);

Глобальное отключение кэширования

Можно использовать $ionicConfigProvider для того чтобы установить максимально разрешенное число видов, которое может быть помещено в кэш. Но эту функцию можно также использовать и для общего отключения кэширования, если числовое значение записать как 0.

$ionicConfigProvider.views.maxCache(0);

Отключение кэширования в рамках состояния провайдера

$stateProvider.state('myState', {
   cache: false,
   url : '/myUrl',
   templateUrl : 'my-template.html'
})

Отключение кэширования с помощью значений атрибутов

<ion-view cache-view="false" view-title="My Title!">
  ...
</ion-view>

AngularUI Router

Дополнительную информацию можно найти в AngularUI Router’s docs
Ниже вы найдете видеоролик, созданный командой, занимающейся разработкой AngularUI Router. Видео поможет объяснить, как это все работает.

API

АтрибутТипОписание
name
(optional)
string

Имя представления (вида). Имя должно быть уникальным среди других видов представлений в одном и том же состоянии. У вас могут быть виды с одинаковыми именами, но они будут существовать в других состояниях. Более подробную информацию смотрите в документации ui-view в разделе ui-router

See the Pen Tabs And Navigation: Nightly by Ionic (@ionic) on CodePen.

Читать далее

ion-view

Дочерний элемент ionNavView

Контейнер для контента вида и любой информации, относящейся к панели навигации и строке заголовка. Когда вид входит и выходит из своего родительского ionNavView, вид также генерирует информацию, такую как заголовок, или то, должна ли отображаться кнопка возврата или нет, должна ли демонстрироваться соответствующая директива ionNavBar или нет, какой из переходов должен сопровождаться анимацией, и в каком направлении анимация должна осуществляться.

Виды помещаются в кэш для улучшения производительности. Когда из вида уже совершен переход, его элемент остается в структуре DOM, и область видимости отсоединяется от цикла $watch. При перемещении в вид, который уже находится в кэше, его область видимости подключается заново, и существующий элемент, который был
оставлен в структуре DOM, снова становится активным. Это можно отключить, или же максимальное число видов, находящихся в кэше, можно изменить в $ionicConfigProvider, в конфигурации вида $state, или
с помощью изменения значения атрибута самого вида (см. ниже).

Применение

Ниже дан пример того, как страница будет загружена с ionNavBar, где в качестве заголовка содержится “My Page”.

<ion-nav-bar></ion-nav-bar>
<ion-nav-view>
  <ion-view view-title="My Page">
    <ion-content>
      Hello!
    </ion-content>
  </ion-view>
</ion-nav-view>

Жизненный цикл вида и события

Виды можно кэшировать, а это означает, что контроллеры нормально загружаются только один раз. Это может повлиять на логику вашего контроллера. Чтобы знать, когда вид стал доступен или уже нет, были добавлены события, которые эмитируются из области видимости вида. Эти события также содержат данные о виде представления, такие как заголовок и информации о том, должна ли отображаться кнопка возврата. Также содержатся данные перехода, такие как тип перехода и направление, которое или будет, или уже было использовано.

$ionicView.loaded

Вид загружен. Это событие связано только с одним видом, который создается и добавляется в DOM. Если вид уходит, но он помещен в кэш, то это событие не запустится снова при последующем просмотре. Загруженное событие - это хорошее место для размещения кода установки для вида; однако это не то событие, которое рекомендуется слушать, когда вид становится активным.

$ionicView.enter

Вид полностью вошел и сейчас является активным. Это событие запустится, не важно, загружено ли оно впервые, или вид берется из кэша.

$ionicView.leave

Вид закончил выход и больше не является активным. Это событие запустится, не важно, в кэше ли оно или разрушено.

$ionicView.beforeEnter

Вид готов к входу и готов стать активным.

$ionicView.beforeLeave

Вид готов к выходу и больше не будет активным.

$ionicView.afterEnter

Вид полностью вошел и сейчас является активным.

$ionicView.afterLeave

Вид закончил выход и больше не является активным.

$ionicView.unloaded

Контроллер вида уничтожен и его элемент удален из DOM.

Кэширование

Кэширование можно отключать и включать многими способами. По умолчанию Ionic будет кэшировать максимум 10 видов. Вы можете принять необязательное решение отключить кэширование либо для отдельного вида, либо в глобальной конфигурации. Дополнительную информацию смотрите в главе Caching (кэширование) раздел ionNavView

API

Атрибут

Тип

Описание

view-title

(необязательный)

(string)

Заголовок (title) text-only, который должен отображаться в родительском ionNavBar. Для HTML-заголовка, такого как изображение, смотрите информацию ionNavTitle.

cache-view

(необязательный)

(boolean)

Определяет, позволено ли этому виду быть помещенным в кэш или нет. Для получения более подробной информации см. раздел Caching в ionNavView. По умолчанию используется true

can-swipe-back

(необязательный)

(boolean)

Если этому виду должно быть позволено использовать такой жест, как свайп, чтобы делать возврат. Это не активирует свайп как действие для возврата назад, если такой жест не доступен на данной платформе, или же не существует предыдущего вида представления. По умолчанию используется true

hide-back-button

(необязательный)

(boolean)

Определяет, возможно ли по умолчанию скрывать кнопку возврата на родительском ionNavBar.

hide-nav-bar

(необязательный)

(boolean)

Определяет, скрывать или нет по умолчанию родительский ionNavBar.

 

Читать далее

ion-nav-bar

Delegate: $ionicNavBarDelegate

Если у нас имеется директива ionNavView, мы также можем создать
<ion-nav-bar, который создаст верхнюю строку, которая будет обновляться по мере изменения состояния приложения.

Мы можем добавить кнопку возврата, поместив ionNavBackButton внутрь.

Мы можем добавить кнопки в зависимости от видимого в данный момент представления, используя ionNavButtons.

Имейте в виду, что элемент ion-nav-bar будет работать корректно, если вокруг вашего контента находится ionView.

Применение

<body ng-app="starter">
  
  <ion-nav-bar class="bar-positive">
  </ion-nav-bar>

  
  <ion-nav-view>
    <ion-view>
      <ion-content>Hello!</ion-content>
    </ion-view>
  </ion-nav-view>
</body>

API

Атрибут

Тип

Описание

delegate-handle

(необязательный)

(string)

Метка, используемая для идентификации этой навигационной панели с помощью $ionicNavBarDelegate.

align-title

(необязательный)

(string)

В какую сторону выравнивать заголовок в навигационной панели. Доступно: "слева", "справа", "по центру". По умолчанию задан параметр "по центру".

no-tap-scroll

(необязательный)

(boolean)

По умолчанию при касании навигационной панели контент прокрутится на самое начало. Установите параметр "true" для no-tap-scroll, чтобы отключить такое поведение.

Читать далее

ion-nav-back-button

Дочерний элемент ionNavBar

Создает кнопку возврата внутри ionNavBar.

Кнопка возврата появится, когда пользователь имеет возможность совершить обратный шаг в текущем стеке переходов. По умолчанию описание кнопки возврата выстраивается автоматически пр помощи соответствующих параметров, принятых по умолчанию в данной платформе (iOS-иконка кнопки возврата в iOS и Android-иконка в Android).

В дополнение к этому кнопка автоматически настраивается $ionicGoBack() на клик/тап. По умолчанию при нажатии на кнопку возврата приложение перейдет на один вид назад. Возможно и более продвинутое поведение, такое, как описано ниже.

Применение

Рекомендуемая разметка для настроек по умолчанию.

<ion-nav-bar>
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-bar>
  <ion-nav-back-button class="button-clear">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>
<ion-nav-bar ng-controller="MyCtrl">
  <ion-nav-back-button class="button-clear"
    ng-click="myGoBack()">
    <i class="ion-arrow-left-c"></i> Back
  </ion-nav-back-button>
</ion-nav-bar>
function MyCtrl($scope, $ionicHistory) {
  $scope.myGoBack = function() {
    $ionicHistory.goBack();
  };
}
Читать далее

ion-nav-buttons

Дочерний элемент ionNavView

Используйте кнопки навигации, чтобы настроить кнопки на вашей ionNavBar
изнутри ionView. Это дает каждому шаблону вида возможность определить, какие кнопки должны отображаться в навигационной панели, имея приоритет над любыми дефолтными кнопками, уже находящимися в навигационной панели.

Любые заявленные кнопки будут размещены в навигационной панели с соответствующей стороны. Кнопки, имеющие приоритет, как правило, располагаются с левой стороны хедера, а второстепенные кнопки, в основном, находятся с правой стороны. Однако за точное расположение кнопок отвечает непосредственно сама платформа.
Например, в iOS основные кнопки помещены в самый левый край хедера, а
второстепенные кнопки - в самом правом краю, заголовок "шапки" располагается по центру между ними. Однако для Android обе группы кнопок размещаются с правого края "шапки", заголовок шапки смещен влево.

Мы рекомендуем всегда использовать параметры основные и второстепенные, так кнопки правильно занимают место на своей стороне шапки, это удобно для пользователей каждой из платформ. Но в случаях, когда кнопки должны всегда быть на определенной стороне, возможно использовать и левое, и правое расположение. Например,
кнопка переключения (toggle) для меню расположенного слева должна быть на левой стороне; в этом случае мы бы рекомендовали использовать side="left", чтобы она всегда была слева независимо от платформы.

Имейте в виду, что ion-nav-buttons должны быть непосредственными потомками ion-view или элементом ion-nav-bar (проще говоря, не "заворачивайте" его в другой div).

Применение

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-buttons side="primary">
      <button class="button" ng-click="doSomething()">
        I'm a button on the primary of the navbar!
      </button>
    </ion-nav-buttons>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>

API

Атрибут

Тип

Описание

side

(string)

Сторона, в которую нужно помещать кнопки в ionNavBar. Доступные стороны: основная, второстепенная, левая и правая.

Читать далее

ion-nav-title

Дочерний элемент ionNavView

Директива навигации по заголовку замещает текст заголовка ionNavBar
собственным HTML-кодом, взятым из шаблона ionView. Это дает каждому виду способность определять свой собственный настраиваемый элемент заголовка, такой как изображение или любой код HTML, а не всего лишь text-only. Или же, заголовки text-only могут быть обновлены при использовании атрибута view-titleionView.

Имейте в виду, что ion-nav-title должны быть непосредственными потомками ion-view или элементом ion-nav-bar (проще говоря, не "заворачивайте" его в другой div).

Применение

<ion-nav-bar>
</ion-nav-bar>
<ion-nav-view>
  <ion-view>
    <ion-nav-title>
      <img src="logo.svg">
    </ion-nav-title>
    <ion-content>
      Some super content here!
    </ion-content>
  </ion-view>
</ion-nav-view>
Читать далее

nav-transition

Тип перехода, который должен использовать переход nav view при анимации.
Сейчас опции ограничены вариантами ios, android и none. Скоро появится больше опций.

Применение

<a nav-transition="none" href="#/home">Home</a>
Читать далее

nav-direction

Направление, в котором должна осуществляться анимация перехода nav view. Доступны следующие опции: forward, back, enter, exit, swap (вперед, назад, ввод, выход, перестановка)

Применение

<a nav-direction="forward" href="#/home">Home</a>
Читать далее

$ionicNavBarDelegate

Делегирует управление директивой ionNavBar

Применение

<body ng-controller="MyCtrl">
  <ion-nav-bar>
    <button ng-click="setNavTitle('banana')">
      Set title to banana!
    </button>
  </ion-nav-bar>
</body>
function MyCtrl($scope, $ionicNavBarDelegate) {
  $scope.setNavTitle = function(title) {
    $ionicNavBarDelegate.title(title);
  }
}

Методы

 

align([direction])

Выравнивает заголовок с кнопками в заданном направлении.

Параметр

Тип

Описание

direction

(необязательный)

(string)

Направление, в котором нужно выравнивать текст заголовка. Доступно: "слева", "справа", "по центру". По умолчанию: "по центру".

 

showBackButton([show])

Set/get для отображения ionNavBackButton (если она - кнопка возврата существует, и есть предыдущее представление вида, к которому можно перейти).

Параметр

Тип

Описание

show

(необязательный)

(boolean)

Определяет, нужно ли отображать кнопку возврата.

  • Возвращает:
    логическое значение (boolean) Определяет, нужно ли отображать кнопку возврата.
 

showBar(show)

Set/get для отображения ionNavBar.

Параметр

Тип

Описание

show

(boolean)

Определяет, нужно ли отображать строку.

  • Возвращает:
    логическое значение (boolean) Определяет, нужно ли отображать строку.

title(title)

Установить заголовок для ionNavBar.

Параметр

Тип

Описание

title

(string)

Новый заголовок, который нужно отображать.

Читать далее

$ionicHistory

$ionicHistory отслеживает виды во время перемещения пользователя по приложению. Точно так же, как ведет себя браузер, Ionic-приложение способно отслеживать и сохранять предыдущий вид, текущий вид и следующий за ним вид (если он есть). Как правило, типичный веб-браузер сохраняет линейно только один стек истории.

В отличие от традиционной среды, характерной для браузера, приложения и веб-приложения имеют параллельные независимые истории, как и с вкладками. Пользователь может на одной вкладке перемещаться по нескольким интернет-страницам с достаточной глубиной просмотров, а затем переключиться на новую вкладку и снова вернуться назад. Кнопка возврата при этом относится не к предыдущей вкладке, а к предыдущим страницам, которые пользователь посетил в рамках той вкладки.

$ionicHistory обеспечивает такую параллельную архитектуру истории.

Методы

viewHistory()

Просмотр данных истории приложения, к которым относятся виды и истории переходов,
а также то, в каком порядке они осуществлялись и как были связаны между собой в пределах стека переходов.

  • Возвращает:
    объект (object) Возвращает объект, содержащий данные истории видов приложения.

currentView()

Текущий вид приложения.

  • Возвращает:
    объект (object) Возвращает текущий вид.

currentHistoryId()

ID стека истории, который является родительским контейнером текущего вида.

  • Возвращает:
    строку (string) Возвращает ID текущей истории.

currentTitle([val])

Получает и устанавливает заголовок текущего вида.

Параметр

Тип

Описание

val

(необязательный)

строка (string)

Заголовок, который будет служить обновлением текущего вида.

  • Возвращает:
    строку (string) Возвращает заголовок текущего вида.

backView()

Возвращает вид, который был до текущего вида в стеке истории.
Если пользователь осуществлял навигацию из Вида A в Вид B, то Вид A должен быть предыдущим видом, а
вид B будет текущим видом.

  • Возвращает:
    объект(object) Возвращает предыдущий вид.

backTitle()

Получает заголовок предыдущего вида.

  • Возвращает:
    строку (string) Возвращает заголовок предыдущего вида.

forwardView()

Возвращает вид, который был перед текущим видом в стеке истории.
Следующий вид существовал бы при условии, если бы пользователь перешел от Вида A к Виду B, а затем переместился обратно к Виду A. В этой точке Вид B был бы следующим видом, а Вид A был бы текущим видом.

  • Возвращает:
    объект (object) Возвращает следующий вид.

currentStateName()

Возвращает имя текущего состояния.

  • Возвращает:
    строку (string)

goBack([backCount])

Перемещает приложение к предыдущему виду, если он существует.

Параметр

Тип

Описание

backCount

(необязательный)

число (number)

Настройка дополнительного отрицательного целого числа, задающего величину, на сколько видов нужно возвращаться назад. По умолчанию использование значения -1 будет означать переход назад на один вид. Чтобы перейти назад на два вида, нужно установить значение -2. Если число будет превышать количество предыдущих просмотров, зарегистрированных в текущем стеке истории, то возврат будет осуществляться до самого первого вида, записанного в стеке истории. Если числом будет ноль или положительное число, то никакого действия не произойдет. Также глубина возвратов не будет идти вразрез со стеками истории, это означает, что вернуться назад можно будет только в пределах текущего стека истории.

clearHistory()

Очищает всю историю приложения кроме истории для текущего вида.

clearCache()

Убирает из кэша все виды в рамках каждого ionNavView.
Это убирает элемент вида из DOM, и также разрушает его область видимости.

  • Возвращает:
    обещание (promise)

nextViewOptions()

Задает опции для следующего вида. Этот метод может быть полезен, когда нужно
принудительно обойти параметры вида/перехода, назначенные по умолчанию, прямо перед тем, как произойдет переход вида. Например, директива menuClose использует данный метод внутренним образом, чтобы гарантировать, что анимированный переход вида не произойдет в тот момент, когда открыто боковое меню. Также она
устанавливает следующий вид как корневой в своем стеке истории. После перехода эти опции снова сводятся к неопределенному значению.

Доступные опции:

  • disableAnimate: Не делать анимацию для следующего перехода.
  • disableBack: Следующий вид должен забыть свой предыдущий вид и установить его на пустое значение.
  • historyRoot: Следующий вид должен стать корневым (основным) видом в стеке истории.

 

$ionicHistory.nextViewOptions({
  disableAnimate: true,
  disableBack: true
});
Читать далее

Платформа

Читать далее

$ionicPlatform

Angular-абстракция  ionic.Platform.

Используется для детектирования текущей платформы, а также выполнения таких действий, как подавление
Android-кнопки "Назад" в PhoneGap/Cordova.

Методы

onHardwareBackButton(callback)

В некоторых платформах есть аппаратная кнопка возврата, и это один из способов
привязки к данной кнопке.

Параметр

Тип

Описание

callback

функция (function)

обратный вызов, который запустится при наступлении события

offHardwareBackButton(callback)

Убирает слушателя событий для кнопки возврата.

Параметр

Тип

Описание

callback

функция (function)

Функция слушателя, у которого была изначальная привязка.

registerBackButtonAction(callback, priority, [actionId])

Регистрирует действие аппаратной кнопки возврата. Только одно действие будет выполняться,
когда произведен клик кнопкой "Назад", поэтому данный метод решает, какое из
зарегистрированных действий кнопки возврата имеет самый высокий приоритет.

Например, если список действий (Action Sheet) показывает, что кнопка возврата должна
закрывать список, но при этом не должно быть перехода обратно к виду страницы на экране
или не должно закрываться модальное окно, которое может быть в тот момент открыто.

Приоритеты существующих привязок кнопки возврата могут быть следующими:
Возврат к предыдущему виду = 100
Закрытие бокового меню = 150
Закрытие модального окна = 200
Закрытие списка действий (Action Sheet) = 300
Закрытие всплывающего окна = 400
Прекращение загрузки оверлея (overlay) = 500

Ваше действие кнопки возврата будет подавлять каждое из указанных выше действий,
приоритет которых ниже приоритета, который вами задан. Например,
действие с назначенным приоритетом 101 будет подавлять "возврат к
предыдущему виду", но только это, а не какое-то другое действие.

Параметр

Тип

Описание

callback

функция (function)

Вызывается, когда нажата кнопка возврата, если у этого слушателя самый высокий приоритет.

приоритет

число

Будет исполняться только самый высокий приоритет.

actionId

(необязательный)

*

Идентификатор (id), который будет назначен этому действию. По умолчанию: случайный и уникальный ID.

  • Возвращает:
    function Функция, которая при вызове разрегистрирует
    это действие backButtonAction.

on(type, callback)

Добавляет слушатели событий Cordova, такие как pauseresumevolumedownbuttonbatterylow,
offline и т.д. Более подробную информацию о типах событий можно найти в
Документации по событию Cordova.

Параметр

Тип

Описание

тип

строка string

тип события Cordova.

callback

функция (function)

Вызывается, когда запускается событие Cordova.

  • Возвращает:
    function  Возвращает функцию разрегистрации, для того чтобы убрать слушатель события.

ready([callback])

Запускает обратный вызов (callback), как только устройство готово,
или сразу же, если устройство уже готово.

Параметр

Тип

Описание

callback

(необязательный)

function=

Функция, которую нужно вызвать.

  • Возвращает:
    promise  Обещание, которое разрешено, когда устройство готово.

 

Читать далее

Вспомогательный экран

Читать далее

$ionicPopover

Смежная тема:  контроллер ionicPopover.

Вспомогательный экран (popover) - это вид, который всплывает над контентом приложения. Вспомогательные экраны обеспечивают легкий способ представления или сбора информации от пользователя.
Обычно они используются в следующих ситуациях:

  • При показе более развернутой информации о текущем виде
  • При выборе часто используемого инструмента или конфигурации
  • При представлении списка действий, которые должны выполняться внутри одного из ваших видов

Поместите контент вспомогательного экрана внутрь элемента <ion-popover-view>.

Применение

<p>
  <button ng-click="openPopover($event)">Open Popover</button>
</p>

<script id="my-popover.html" type="text/ng-template">
  <ion-popover-view>
    <ion-header-bar>
      <h1 class="title">My Popover Title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
    </ion-content>
  </ion-popover-view>
</script>
angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $ionicPopover) {

  // .fromTemplate() method
  var template = '<ion-popover-view><ion-header-bar> <h1 class="title">My Popover Title</h1> </ion-header-bar> <ion-content> Hello! </ion-content></ion-popover-view>';

  $scope.popover = $ionicPopover.fromTemplate(template, {
    scope: $scope
  });

  // .fromTemplateUrl() method
  $ionicPopover.fromTemplateUrl('my-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
  });
});

Методы

fromTemplate(templateString, options)

Параметр

Тип

Описание

templateString

строка string

Строка шаблона, которую нужно использовать в качестве контента вспомогательного экрана.

options

объект object

Параметры, которые должны передаваться в метод инициализации.

  • Возвращает:
    object  Экземпляр ionicPopover
    контроллера (ionicPopover построен поверх $ionicPopover).

fromTemplateUrl(templateUrl, options)

Параметр

Тип

Описание

templateUrl

строка string

Адрес URL, указывающий, откуда нужно загружать шаблон.

options

объект object

Параметры, которые должны передаваться в метод инициализации.

  • Возвращает:
    promise  Обещание, которое будет разрешено с экземпляром
    контроллера ionicPopover (ionicPopover построен поверх $ionicPopover).
Читать далее

ionicPopover

Реализуется сервисом $ionicPopover.

После окончания работы с каждым вспомогательным экраном не забудьте вызвать remove(),
чтобы провести очистку и избежать утечек памяти.

Примечание: вспомогательный экран будет транслировать события ‘popover.shown’, ‘popover.hidden’ и ‘popover.removed’ из
генерируемой области видимости в себя в качестве аргумента события. Оба события - и popover.removed, и popover.hidden
вызываются, когда вспомогательный экран убран.

Методы

initialize(options)

Создает новый экземпляр контроллера вспомогательного экрана.

Параметр

Тип

Описание

options

объект object

Объект параметров, имеющий следующие свойства:

  • {object=} scope Область видимости, которая будет дочерним объектом. По умолчанию: создает дочерний объект $rootScope.
  • {boolean=} focusFirstInput Определяет, автофокусировать ли первый элемент ввода при отображении вспомогательного экрана. По умолчанию: false.
  • {boolean=} backdropClickToClose Определяет, закрывать ли вспомогательный экран при клике по фоновой области за его пределами. По умолчанию: true.
  • {boolean=} hardwareBackButtonClose Определяет, можно ли закрыть вспомогательный экран с помощью аппаратной кнопки возврата на Android- и других похожих устройствах. По умолчанию: true.

show($event)

Отображает этот экземпляр вспомогательного экрана.

Параметр

Тип

Описание

$event

$event

$event или целевой элемент, по которому должен выравниваться вспомогательный экран.

  • Возвращает:
    promise Обещание, которое разрешено, когда заканчивается анимация, сопровождающая сворачивание вспомогательного экрана.

hide()

Скрывает этот экземпляр вспомогательного экрана.

  • Возвращает:
    promise  Обещание, которое разрешено, когда заканчивается анимация, сопровождающая раскрытие вспомогательного экрана.

remove()

Убирает этот экземпляр вспомогательного экрана из дерева DOM и выполняет очистку.

  • Возвращает:
    promise  Обещание, которое разрешено, когда заканчивается анимация, сопровождающая раскрытие вспомогательного экрана.

isShown()

  • Возвращает:
    boolean  Определяет, отображается ли в текущий момент данный вспомогательный экран.
Читать далее

Всплывающее окно

Читать далее

$ionicPopup

See the Pen by Ionic (@ionic) on CodePen.

Сервис Ionic Popup позволяет программным способом создавать и отображатьвсплывающие окна, которые требуют ответа пользователя для продолжения процесса работы.

Система всплывающих окон имеет поддержку более гибких версий встроенных функций  alert(),prompt(),
и  confirm() , к которым уже привыкли пользователи. Но в добавок с их помощью всплывающие окна
будут иметь полностью настраиваемый контент и внешний вид.

Вводу можно присвоить атрибут  autofocus , тогда поле ввода будет автоматически в фокусе, когда
впервые будет отображаться всплывающее окно. Однако в зависимости от определенных сценариев использования use-cases это может привести к проблемам с
системой tap/click, поэтому Ionic предпочитает использовать атрибут  autofocus 
в качестве настраиваемой функции, а не предполагающейся сразу по умолчанию.

Применение

Несколько основных примеров, информацию о всех доступных опциях смотрите ниже.

angular.module('mySuperApp', ['ionic'])
.controller('PopupCtrl',function($scope, $ionicPopup, $timeout) {

// Triggered on a button click, or some other target
$scope.showPopup = function() {
  $scope.data = {};

  // An elaborate, custom popup
  var myPopup = $ionicPopup.show({
    template: '<input type="password" ng-model="data.wifi">',
    title: 'Enter Wi-Fi Password',
    subTitle: 'Please use normal things',
    scope: $scope,
    buttons: [
      { text: 'Cancel' },
      {
        text: '<b>Save</b>',
        type: 'button-positive',
        onTap: function(e) {
          if (!$scope.data.wifi) {
            //don't allow the user to close unless he enters wifi password
            e.preventDefault();
          } else {
            return $scope.data.wifi;
          }
        }
      }
    ]
  });

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

  $timeout(function() {
     myPopup.close(); //close the popup after 3 seconds for some reason
  }, 3000);
 };

 // A confirm dialog
 $scope.showConfirm = function() {
   var confirmPopup = $ionicPopup.confirm({
     title: 'Consume Ice Cream',
     template: 'Are you sure you want to eat this ice cream?'
   });

   confirmPopup.then(function(res) {
     if(res) {
       console.log('You are sure');
     } else {
       console.log('You are not sure');
     }
   });
 };

 // An alert dialog
 $scope.showAlert = function() {
   var alertPopup = $ionicPopup.alert({
     title: 'Don\'t eat that!',
     template: 'It might taste good'
   });

   alertPopup.then(function(res) {
     console.log('Thank you for not eating my delicious ice cream cone');
   });
 };
});

 

 

Методы

show(options)

Отображает сложное всплывающее окно. Это универсальная функция отображения для всех всплывающих окон.

Сложное всплывающее окно имеет массив  кнопок, у каждой кнопки имеется  текстовое поле  и  тип
в дополнение к функции onTap. Функция onTap вызывается, когда нажата соответствующая кнопка всплывающего окна. По умолчанию данная функция закроет окно и обещание будет успешно завершено - будет разрешено его значение возврата. Если вы хотите сделать так, чтобы заданное по умолчанию действие не произошло, и после нажатия на кнопку всплывающее окно оставалось открытым, поставьте вызовevent.preventDefault(), который будет передаваться при наступлении события (касания кнопки). Подробная информация дана ниже.

Параметр

Тип

Описание

options

объект object

Опции для нового всплывающего окна, в форме:

{

  title: '', // String. Заголовок всплывающего окна.

  cssClass: '', // String,

  subTitle: '', // String (optional). Подзаголовок всплывающего окна.

  template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна.

  templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело   всплывающего окна.

  scope: null, // Scope (optional). Область видимости, которую нужно связать с контентом всплывающего окна.

  buttons: [{ // Array[Object] (optional). Кнопки, которые нужно поместить в футер всплывающего окна.

    text: 'Cancel',

    type: 'button-default',

    onTap: function(e) {

      // e.preventDefault() прекратит процесс закрытия всплывающего окна при касании кнопки.

      e.preventDefault();

    }

  }, {

    text: 'OK',

    type: 'button-positive',

    onTap: function(e) {

      // Возвращение значения создаст ситуацию, когда обещание должно будет разрешиться с данным значением.

      возвращение scope.data.response;

    }

  }]

}

  • Возвращает:
    object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную функцию
    close, которая может использоваться для того чтобы программным способом закрыть всплывающее окно.

alert(options)

Отображает простое всплывающее окно с сообщением и одной кнопкой, которую пользователь может
тапнуть, чтобы закрыть окно.

Параметр

Тип

Описание

options

объект object

Опции для отображения оповещения, в форме:

{

  title: '', // String. Заголовок всплывающего окна.

  cssClass: '', // String, Настраиваемое имя класса CSS

  subTitle: '', // String (optional). Подзаголовок всплывающего окна.

  template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна.

  templateUrl: '', // String (optional). URL-адрес шаблона HTML, который нужно поместить в   тело всплывающего окна.

  okText: '', // String (default: 'OK'). Текст кнопки "OK".

  okType: '', // String (default: 'button-positive'). Тип кнопки "OK".

}

  • Возвращает:
    object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
    функцию  close, которая может быть вызвана с помощью любого значения, для того чтобы программным способом закрыть всплывающее окно этим самым значением.

confirm(options)

Отображает простое всплывающее окно подтверждения кнопкой Cancel и OK.

Разрешает обещание при установленном параметре "true", если пользователь нажимает кнопку "OK", и "false", если
пользователь нажимает кнопку "Cancel".

Параметр

Тип

Описание

options

объект object

Параметры для отображения подтверждающего всплывающего окна, имеющего форму:

{

  title: '', // String. Заголовок всплывающего окна.

  cssClass: '', // String, Настраиваемое имя CSS класса

  subTitle: '', // String (optional). Подзаголовок всплывающего окна.

  template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна.

  templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в   тело всплывающего окна.

  cancelText: '', // String (default: 'Cancel'). Текст кнопки "Cancel".

  cancelType: '', // String (default: 'button-default'). Тип кнопки "Cancel".

  okText: '', // String (default: 'OK'). Текст кнопки "OK".

  okType: '', // String (default: 'button-positive'). Тип кнопки "OK".

}

  • Возвращает:
    object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
    функцию  close, которая может быть вызвана с помощью любого значения, чтобы программным образом закрыть всплывающее окно этим значением.

prompt(options)

Отображает простое всплывающее окно-подсказку, в котором есть такие элементы, как поле ввода, кнопки OK и Cancel.
Разрешает обещание с помощью значения ввода, если пользователь нажимает "OK", и неопределенным значением (udefined), если пользователь нажимает "Cancel".

 $ionicPopup.prompt({
   title: 'Password Check',
   template: 'Enter your secret password',
   inputType: 'password',
   inputPlaceholder: 'Your password'
 }).then(function(res) {
   console.log('Your password is', res);
 });

Параметр

Тип

Описание

options

объект object

Параметры для отображения всплывающего окна-подсказки, имеющего форму:

{

  title: '', // String. Заголовок всплывающего окна.

  cssClass: '', // String,

  subTitle: '', // String (optional). Подзаголовок всплывающего окна.

  template: '', // String (optional). Шаблон HTML, который нужно поместить в тело всплывающего окна.

  templateUrl: '', // String (optional). Адрес URL шаблона HTML, который нужно поместить в тело всплывающего окна.

  inputType: // String (default: 'text'). Тип ввода, который нужно использовать

  defaultText: // String (default: ''). Исходное значение, помещенное в элемент ввода.

  maxLength: // Integer (default: null). Определяет атрибут maxlength для ввода.

  inputPlaceholder: // String (default: ''). Поле для заполнения, которое нужно использовать для ввода.

  cancelText: // String (default: 'Cancel'. Текст кнопки "Cancel".

  cancelType: // String (default: 'button-default'). Тип кнопки "Cancel".

  okText: // String (default: 'OK'). Текст кнопки "OK".

  okType: // String (default: 'button-positive'). Тип кнопки "OK".

}

  • Возвращает:
    object  Обещание, которое разрешено, когда всплывающее окно закрыто. Имеет дополнительную
    функцию close, которая может быть вызвана любым значением для того, чтобы программным способом закрыть всплывающее окно с помощью данного значения.

See the Pen by Ionic (@ionic) on CodePen.

Читать далее

Прокрутка

Читать далее

ion-scroll

Delegate: $ionicScrollDelegate

Создает контейнер с возможностью прокрутки для всего содержимого, которое будет находиться внутри него.

Применение

Основное применение:

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
  <div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
 </ion-scroll>

Обратите внимание на этот факт: важно задать высоту окна просмотра, так же как и высоту
контента, который будет находиться внутри этого окна, чтобы была возможность прокрутки. Этот элемент позволяет полностью контролировать зоны прокрутки.

Если же вам нужно, чтобы зона прокрутки была только для контента, расположенного по центру, используйте вместо этого  ionContent .

API

Атрибут

Тип

Описание

delegate-handle

(необязательный)

строка string

Метка, использующаяся для идентификации этого элемента ScrollView с помощью$ionicScrollDelegate.

direction

(необязательный)

строка string

Каким образом делать прокрутку. 'x' или 'y' или 'xy'. По умолчанию задан параметр 'y'.

locking

(необязательный)

boolean

Определяет, блокировать ли скроллинг в одном из направлений за один прием. Лучше поставить "false" при увеличении масштаба просмотра или прокрутке в двух направлениях. По умолчанию "true".

paging

(необязательный)

boolean

Определяет, делать прокрутку постраничной или нет.

on-refresh

(необязательный)

выражение expression

Вызывается при осуществлении функции обновления данных pull-to-refresh, запускается посредством ionRefresher.

on-scroll

(необязательный)

выражение expression

Вызывается, когда бы пользователь ни начал выполнять прокрутку.

scrollbar-x

(необязательный)

boolean

Определяет, отображать ли горизонтальную полосу прокрутки. По умолчанию "true".

scrollbar-y

(необязательный)

boolean

Определяет, отображать ли вертикальную полосу прокрутки. По умолчанию "true".

zooming

(необязательный)

boolean

Определяет, поддерживать или нет функцию "pinch-to-zoom" (масштабирование двумя пальцами)

min-zoom

(необязательный)

целое число (integer)

Самая маленькая допустимая величина масштабирования (по умолчанию 0.5)

max-zoom

(необязательный)

целое число (integer)

Самая большая допустимая величина масштабирования (по умолчанию 3).

has-bouncing

(необязательный)

boolean

Определяет, разрешать ли прокрутку для того чтобы отскочить от краев контента. По умолчанию "true" в iOS, "false" в Android.

Читать далее

ion-infinite-scroll

Дочерний элемент ionContent или ionScroll

Директива ionInfiniteScroll позволяет вызывать функцию каждый раз,
когда пользователь достигает нижней части страницы или находится рядом с нижней частью страницы.

Выражение, которое вы передаете для on-infinite , вызывается, когда пользователь
прокрутил экран на большую величину, чем  
distance  до нижней границы контента. Как только on-infinite
закончит загрузку новых данных, он должен транслировать событие 
scroll.infiniteScrollComplete
из вашего контроллера (см. пример, данный ниже).

Применение

<ion-content ng-controller="MyController">
  <ion-list>
  ....
  ....
  </ion-list>

  <ion-infinite-scroll
    on-infinite="loadMore()"
    distance="1%">
  </ion-infinite-scroll>
</ion-content>
function MyController($scope, $http) {
  $scope.items = [];
  $scope.loadMore = function() {
    $http.get('/more-items').success(function(items) {
      useItems(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };

  $scope.$on('$stateChangeSuccess', function() {
    $scope.loadMore();
  });
}

Легкий способ прекратить бесконечную прокрутку, если больше нет данных для загрузки, это
воспользоваться директивой  ng-if , имеющейся в Angular:

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API

Атрибут

Тип

Описание

on-infinite

выражение expression

Определяет, что должно быть вызвано, когда полоса прокрутки достигает нижнего предела.

distance

(необязательный)

строка string

Расстояние снизу, которого нужно достичь при прокрутке, чтобы сработало выражение on-infinite. По умолчанию: 1%.

spinner

(необязательный)

строка string

ionSpinner для отображения во время процеса загрузки. ionSpinner стандарта SVG теперь является дефолтным, он замещает вращающиеся шрифтовые иконки.

icon

(необязательный)

строка string

Иконка, которая должна отображаться во время процесса загрузки. По умолчанию: 'ion-load-d'. Это устаревший вариант, он замененionSpinner стандарта SVG.

immediate-check

(необязательный)

boolean

Определяет, нужно ли проверять границы бесконечной прокрутки сразу же после загрузки.

Читать далее

$ionicScrollDelegate

Делегирует управление элементом scrollViews (созданным директивами ionContent и ionScroll ).

Вызываемые напрямую методы сервиса $ionicScrollDelegate будут управлять всеми видами прокрутки. Используйте метод $getByHandle для управления определенными видами прокрутки (scrollViews).

Применение

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">Scroll to Top!</button>
  </ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}

Пример расширенного применения, когда имеются две зоны прокрутки и для более точного управления используется delegate-handle

<body ng-controller="MainCtrl">
  <ion-content delegate-handle="mainScroll">
    <button ng-click="scrollMainToTop()">
      Scroll content to top!
    </button>
    <ion-scroll delegate-handle="small" style="height: 100px;">
      <button ng-click="scrollSmallToTop()">
        Scroll small area to top!
      </button>
    </ion-scroll>
  </ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollMainToTop = function() {
    $ionicScrollDelegate.$getByHandle('mainScroll').scrollTop();
  };
  $scope.scrollSmallToTop = function() {
    $ionicScrollDelegate.$getByHandle('small').scrollTop();
  };
}

Методы

resize()

Сообщает scrollView о перерасчете размера своего контейнера.

scrollTop([shouldAnimate])

Параметр

Тип

Описание

shouldAnimate

(необязательный)

(boolean)

Определяет, должна ли прокрутка сопровождаться анимацией.

scrollBottom([shouldAnimate])

Параметр

Тип

Описание

shouldAnimate

(необязательный)

(boolean)

Определяет, должна ли прокрутка сопровождаться анимацией.

scrollTo(left, top, [shouldAnimate])

Параметр

Тип

Описание

left

число (number)

Значение x (x-value), до которого должна осуществляться прокрутка.

top

число (number)

Значение y (y-value), до которого должна осуществляться прокрутка.

shouldAnimate

(необязательный)

(boolean)

Определяет, должна ли прокрутка сопровождаться анимацией.

scrollBy(left, top, [shouldAnimate])

Параметр

Тип

Описание

left

число (number)

Параметр x-offset, определяющий позиции прокрутки.

top

число (number)

Параметр y-offset, определяющий позиции прокрутки.

shouldAnimate

(необязательный)

(boolean)

Определяет, должна ли прокрутка сопровождаться анимацией.

zoomTo(level, [animate], [originLeft], [originTop])

Параметр

Тип

Описание

level

число (number)

Уровень, ограничивающий величину масштабирования.

animate

(необязательный)

(boolean)

Определяет, должно ли масштабирование сопровождаться анимацией.

originLeft

(необязательный)

число (number)

Детализация (приближение) изображения в процессе масштабирования при заданной левой координате.

originTop

(необязательный)

число (number)

Детализация (приближение) изображения в процессе масштабирования при заданной верхней координате.

zoomBy(factor, [animate], [originLeft], [originTop])

Параметр

Тип

Описание

factor

число (number)

Коэффициент увеличения изображения.

animate

(необязательный)

(boolean)

Определяет, должно ли масштабирование сопровождаться анимацией.

originLeft

(необязательный)

число (number)

Детализация (приближение) изображения в процессе масштабирования при заданной левой координате.

originTop

(необязательный)

число (number)

Детализация (приближение) изображения в процессе масштабирования при заданной верхней координате.

getScrollPosition()

  • Возвращает:
    object  Позиция прокрутки этого вида, имеющая следующие свойства:
  • {number} left Расстояние слева, на которое пользователь прокрутил контент (начинается от 0).
  • {number} top  Расстояние от верхней границы, на которое пользователь прокрутил контент (начинается от 0).

anchorScroll([shouldAnimate])

Дает команду ScrollView прокрутить элемент с ID, который
соответствует window.location.hash.

Если подходящий элемент не найден, будет выполнена прокрутка до самой верхней позиции.

Параметр

Тип

Описание

shouldAnimate

(необязательный)

логическое значение (boolean)

Определяет, должна ли прокрутка сопровождаться анимацией.

freezeScroll([shouldFreeze])

Не позволяет этому виду прокручиваться по параметрам x или y.

Параметр

Тип

Описание

shouldFreeze

(необязательный)

логическое значение (boolean)

Определяет, позволить этому виду прокручиваться или нет.

  • Возвращает:
    boolean  Определяет, запрещен этому Scroll View режим прокрутки или нет.

freezeAllScrolls([shouldFreeze])

Не разрешает любому из Scroll View приложения прокручиваться по параметрам x или y.

Параметр

Тип

Описание

shouldFreeze

(необязательный)

логическое значение (boolean)

Определяет, следует ли предотвратить возможность прокрутки для всех элементов прокрутки в приложении или нет.

getScrollView()

  • Возвращает:
    object  Данный ScrollView ассоциируется с этим делегатом.

$getByHandle(handle)

Параметр

Тип

Описание

handle

строка (string)

 
  • Возвращает:
    delegateInstance Экземпляр делегата, который управляет только
    видами прокрутки ScrollViews с помощью  delegate-handle  в соответствие с данным обработчиком.

Пример: $ionicScrollDelegate.$getByHandle('my-handle').scrollTop();

Читать далее

Боковые меню

Читать далее

ion-side-menus

ion-side-menus 
Delegate: $ionicSideMenuDelegate

Элемент контейнера для бокового меню (боковых меню) и основного контента. Разрешает включение левого и/или правого бокового меню
с помощью перетаскивания зоны основного контента из стороны в сторону.

Чтобы автоматически закрыть открытое меню, вы можете добавить директиве атрибут menuClose .
Атрибут 
menu-close обычно добавляется к ссылкам и кнопкам в пределах ion-side-menu-content, так чтобы когда по элементу производится клик, открытое боковое меню закрылось бы автоматически.

Можно добавить в хедер переключатели в стиле “Burger Icon”, прописав директиве атрибут menuToggle.

Клик по такому переключателю будет открывать и закрывать боковое меню, как директива menu-close.
Боковое меню будет автоматически скрывать дочерние страницы, но такое поведение можно обойти с помощью
атрибута enable-menu-with-back-views, о котором упоминается ниже.

По умолчанию боковые меню скрыты под своим контентом боковых меню и могут быть открыты свайпом контента влево или вправо, или включением кнопки, отвечающей за функцию отображения бокового меню. К тому же, при добавлении
атрибута директивы exposeAsideWhen  элементу директивы ionSideMenu , боковое меню может получать инструкции о том,
"когда" меню должно раскрываться (быть всегда доступным для просмотра).

Side Menu

Для получения более подробной информации о боковых меню, см.:

Применение

Чтобы использовать боковые меню, добавьте родительский элемент <ion-side-menus>. Это охватит все страницы, у которых
есть боковое меню и которые имеют, по крайней мере, 2 дочерних элемента: 1 <ion-side-menu-content> для контента по центру и
еще одну или более директив <ion-side-menu> для каждого бокового меню (левого/правого), которые вы хотите разместить.

<ion-side-menus>
  
  <ion-side-menu side="left">
  </ion-side-menu>

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

  
  <ion-side-menu side="right">
  </ion-side-menu>

</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

API

Атрибут

Тип

Описание

enable-menu-with-back-views

(необязательный)

bool

Определяет, активировать боковое меню, когда отображается кнопка возврата. Когда установлено на false, любой элемент menuToggle будет скрыт, и пользователь не сможет открыть меню свайпом. При возвращении на корневую страницу бокового меню (страница, на которой не видно кнопки возврата), любые кнопки menuToggle будут отображаться снова, и снова будут активны меню.

delegate-handle

(необязательный)

строка (string)

Метка, используемая для идентификации этого бокового меню с помощью $ionicSideMenuDelegate.

Читать далее

ion-side-menu-content

Child of ionSideMenus

Контейнер для основного видимого контента, являющийся родственным одной или более директивам ionSideMenu 

Usage

<ion-side-menu-content
  edge-drag-threshold="true"
  drag-content="true">
</ion-side-menu-content>

Пример полного бокового меню можно посмотреть в документации ionSideMenus.

API

API

Атрибут

Тип

Описание

drag-content

(необязательный)

(boolean)

Определяет, можно ли перетаскивать контент. По умолчанию "true".

edge-drag-threshold

boolean|number

Определяет, может ли быть начато перетаскивание контента только в том случае, если контент находится ниже определенного порогового расстояния от края экрана. По умолчанию "false". Принимает три типа значений:

  • Если дается числовое значение, не равное 0, в качестве максимально допустимого расстояния от края берется столько пикселей, при котором запускается перетаскивание бокового меню.
  • Если стоит "true", количество пикселей по умолчанию для максимально допустимого расстояния равно 25.
  • Если стоит "false" или 0, перетаскивание при достижении порогового значения до края отключено, но разрешено перетаскивание с любого места на контенте.
Читать далее

ion-side-menu

Child of ionSideMenus

Контейнер для бокового меню, являющийся родственным директиве ionSideMenuContent .

Usage

<ion-side-menu
  side="left"
  width="myWidthValue + 20"
  is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>

Пример полного бокового меню см. в документации ionSideMenus.

API

API

Атрибут

Тип

Описание

side

(string)

Определяет, на какой стороне в данный момент находится боковое меню. Допустимые значения: 'left' или 'right'.

is-enabled

(необязательный)

(boolean)

Определяет, подключено ли это боковое меню.

width

(необязательный)

(number)

Определяет, сколько пикселей в ширину должно иметь боковое меню. По умолчанию 275.

Читать далее

expose-aside-when

Child of ionSideMenus

Является обычным элементом для планшетного приложения, служит для того, чтобы скрывать меню при переходе в портретный режим отображения, но отображает то же самое меню с левой стороны, когда планшет повернут в ландшафтный режим отображения. Атрибут директивы  exposeAsideWhen, который может быть использован для выполнения точно такого же интерфейса.

По умолчанию боковые меню скрыты под своим контентом боковых меню и могут быть открыты свайпом контента влево или вправо, или включением кнопки, отвечающей за функцию отображения бокового меню. Однако при добавлении
атрибута директивы
exposeAsideWhen элементу директивы  ionSideMenu , боковое меню может получать инструкции о том, "когда" меню должно раскрываться (быть всегда доступным для просмотра). Например, атрибут expose-aside-when="large" будет удерживать боковое меню в скрытом состоянии, когда ширина области просмотра будет менее  768px, но когда ширина области просмотра будет  768px и более, то меню будет отображаться всегда, и его нельзя будет открыть или закрыть, как это можно делать, если размер области просмотра будет меньше.

Использование  large в качестве значения атрибута является значением для ярлыка для (min-width:768px) , так как это самый распространенный use-case (сценарий использования). Однако для большей гибкости в качестве значения может быть добавлен любой действительный медиа-запрос, например, (min-width:600px); или даже несколько запросов, таких как (min-width:750px) и (max-width:1200px).

Usage

<ion-side-menus>
  
  <ion-side-menu-content>
  </ion-side-menu-content>

  
  <ion-side-menu expose-aside-when="large">
  </ion-side-menu>
</ion-side-menus>

Пример полного бокового меню см. в документации ionSideMenus .

Читать далее

menu-toggle

Переключает боковое меню на данную сторону.

Применение

Ниже дается пример связи внутри навигационной панели. Касание этой кнопки откроет данное боковое меню, повторное касание кнопки закроет его.

<ion-nav-bar>
  <ion-nav-buttons side="left">
   
   <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-nav-buttons side="right">
   
   <button menu-toggle="right" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
</ion-nav-bar>

Кнопка, скрытая на дочерних представлениях вида

По умолчанию кнопка переключения меню будет появляться только на корневой странице бокового меню. Перемещение к дочерним видам будет скрывать кнопку переключения меню. Их можно сделать видимыми на дочерних страницах, если установить атрибут enable-menu-with-back-views директивы ionSideMenus на значение "true".

<ion-side-menus enable-menu-with-back-views="true">
Читать далее

menu-close

menu-close  является атрибутом директивы, которая закрывает открытое в текущий момент боковое меню. Примите во внимание тот факт, что по умолчанию навигационные переходы между видами не будут сопровождаться анимацией, когда меню открыто. К тому же, эта директива заново установит стек истории входящего вида, делая новую страницу корневой в стеке истории. Это сделано для того чтобы продублировать пользовательский опыт в большинстве реализаций бокового меню, которые не должны отображать кнопку возврата в корне стека, а должны отображать только кнопку меню. Мы рекомендуем вам также использовать атрибут enable-menu-with-back-views="false" ionSideMenus , когда применяется директива menuClose.

Применение

Ниже дан пример связи, существующей внутри бокового меню. Тап по этой ссылке автоматически закроет открытое в данный момент меню.

<a menu-close href="#/home" class="item">Home</a>

Имейте в виду, что если ваше состояние назначения использует разрешение, и разрешение, происходящее асинхронно, занимает времени больше, чем стандартный переход (300 мс), вам нужно будет вручную установить nextViewOptions , как только ваше разрешение будет выполнено.

$ionicHistory.nextViewOptions({
 historyRoot: true,
 disableAnimate: true,
 expire: 300
});
Читать далее

$ionicSideMenuDelegate

Делегирует управление директиве ionSideMenus .

Вызываемые напрямую методы сервиса $ionicSideMenuDelegate будут управлять всеми боковыми меню. Используйте метод $getByHandle метод, используемый для управления указанными экземплярами ionSideMenus.

Применение

<body ng-controller="MainCtrl">
  <ion-side-menus>
    <ion-side-menu-content>
      Content!
      <button ng-click="toggleLeftSideMenu()">
        Toggle Left Side Menu
      </button>
    </ion-side-menu-content>
    <ion-side-menu side="left">
      Left Menu!
    <ion-side-menu>
  </ion-side-menus>
</body>
function MainCtrl($scope, $ionicSideMenuDelegate) {
  $scope.toggleLeftSideMenu = function() {
    $ionicSideMenuDelegate.toggleLeft();
  };
}

Методы

toggleLeft([isOpen])

Переключает на левостороннее меню (если оно существует).

Параметр

Тип

Описание

isOpen

(необязательный)

(boolean)

Определяет, нужно ли открыть или закрыть меню. По умолчанию: Переключает меню.

toggleRight([isOpen])

Переключает на правостороннее меню (если оно существует).

Параметр

Тип

Описание

isOpen

(необязательный)

(boolean)

Определяет, нужно ли открыть или закрыть меню. По умолчанию: Переключает меню.

getOpenRatio()

Получает коэффициент, определяющий размер открытого меню. Например, меню шириной 100, которое открыто в размере на 50 пикселей, получается открытым на 50% и вернет коэффициент, равный 0.5.

  • Возвращает:
    float  0, если ничего не открыто; между 0 и 1, если открыто/открывается левое меню;
    и между 0 и -1, если открыто/открывается правое меню.

isOpen()

  • Возвращает:
    boolean  Определяет, какое меню открыто в данный момент - левое или правое.

isOpenLeft()

  • Возвращает:
    boolean  Определяет, открыто ли в данный момент левое меню.

isOpenRight()

  • Возвращает:
    boolean  Определяет, открыто ли в данный момент правое меню.

canDragContent([canDrag])

Параметр

Тип

Описание

canDrag

(необязательный)

(boolean)

Определяет, может или не может перетаскиваться контент для открытия боковых меню.

  • Возвращает:
    boolean  Определяет, можно ли перетаскивать контент для открытия боковых меню.

edgeDragThreshold(value)

Параметр

Тип

Описание

value

boolean|number

Определяет, может ли быть начато перетаскивание контента только в том случае, если контент находится ниже определенного порогового расстояния от края экрана. Принимает три типа значений:

  • Если дается числовое значение, не равное 0, в качестве максимально допустимого расстояния от края берется столько пикселей, при котором запускается перетаскивание бокового меню.
  • Если стоит "true", количество пикселей по умолчанию для максимально допустимого расстояния равно 25.
  • Если стоит "false" или 0, перетаскивание при достижении порогового значения до края отключено, но разрешено перетаскивание с любого места на контенте.
  • Возвращает:
    boolean  Определяет, может ни быть начато перетаскивание только в пределах границ, определяемых краями экрана.

$getByHandle(handle)

Параметр

Тип

Описание

handle

строка (string)

 
  • Возвращает:
    delegateInstance Экземпляр делегата, который управляет только
    директивами ionSideMenus приведением  delegate-handle  в соответствие
    данным обработчиком.

Пример: $ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();

Читать далее

Слайд-бокс

Читать далее

ion-slides

ion-slides 
Delegate: $ionicSlideBoxDelegate

Новая версия Ionic Slide Box, базирующаяся на Swiper виджет от idangerous.

SlideBox

Применение

<ion-slides  options="options" slider="data.slider">
  <ion-slide-page>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide-page>
  <ion-slide-page>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide-page>
  <ion-slide-page>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide-page>
</ion-slides>
$scope.options = {
  loop: false,
  effect: fade,
  speed: 500,
}
$scope.data = {};
$scope.$watch('data.slider', function(nv, ov) {
  $scope.slider = $scope.data.slider;
})
Читать далее

ion-slide-box

Устаревший API

будет удален в следующем релизе Ionic, на смену придет новый компонент ion-slides. Не зависит от внутреннего поведения этого виджета.

Применение

<ion-slide-box on-slide-changed="slideHasChanged($index)">
  <ion-slide>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide>
  <ion-slide>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide>
</ion-slide-box>

API

Атрибут

Тип

Описание

delegate-handle

(необязательный)

строка (string)

Метка, используемая для идентификации этого слайд-бокса с помощью $ionicSlideBoxDelegate.

does-continue

(необязательный)

(boolean)

Определяет, должен ли быть закольцован данный слайд-бокс.

auto-play

(необязательный)

(boolean)

Определяет, должен ли слайд-бокс выкатываться автоматически. По умолчанию "true", если для does-continue задан параметр "true".

slide-interval

(необязательный)

число (number)

Определяет, сколько миллисекунд длится ожидание между сменой слайдов (если для does-continue установлен параметр "true"). По умолчанию 4000.

show-pager

(необязательный)

(boolean)

Определяет, должен ли отображаться пейджер для данного слайд-бокса. Принимает выражения через show-pager="". По умолчанию "true".

pager-click

(необязательный)

выражение (expression)

Выражение, которое должно вызываться, когда происходит клик по пейджеру (если для show-pager установлен параметр "true"). Передается переменная 'index'.

on-slide-changed

(необязательный)

выражение (expression)

Выражение, которое вызывается всякий раз, когда меняется слайд. Передается переменная '$index'.

active-slide

(необязательный)

выражение (expression)

Модель, к которой должен быть привязан индекс текущего слайда.

Читать далее

ion-slide

Дочерний элемент ionSlideBox

Отображает слайд внутри слайд-бокса.

Большее количество примеров находится в разделе ionSlideBox.

Применение

<ion-slide-box>
  <ion-slide>1</ion-slide>
  <ion-slide>2</ion-slide>
</ion-slide-box>
Читать далее

$ionicSlideBoxDelegate

Делегирует, что управляет директивой ionSlideBox .

Вызываемые напрямую методы сервиса $ionicSlideBoxDelegate будут управлять всеми слайд-боксами. Используйте метод $getByHandle метод, управляющий указанными экземплярами слайд-бокса.

Применение

<ion-view>
  <ion-slide-box>
    <ion-slide>
      <div class="box blue">
        <button ng-click="nextSlide()">Next slide!</button>
      </div>
    </ion-slide>
    <ion-slide>
      <div class="box red">
        Slide 2!
      </div>
    </ion-slide>
  </ion-slide-box>
</ion-view>
function MyCtrl($scope, $ionicSlideBoxDelegate) {
  $scope.nextSlide = function() {
    $ionicSlideBoxDelegate.next();
  }
}

Методы

update()

Обновляет слайд-бокс (например, если использовать Angular ng-repeat,
меняет размер слайд-бокса в соответствии с элементами, расположенными внутри него).

slide(to, [speed])

Параметр

Тип

Описание

to

число (number)

Индекс, к которому нужно переместиться.

speed

(необязательный)

число (number)

Количество миллисекунд, за которые должно происходить изменение.

enableSlide([shouldEnable])

Параметр

Тип

Описание

shouldEnable

(необязательный)

логическое значение (boolean)

Определяет, активировать ли переходы в слайд-боксе.

  • Возвращает:
    boolean 

previous([speed])

Переход к предыдущему слайду. Разворачивается в обратную сторону, если попадает на начало.

Параметр

Тип

Описание

speed

(необязательный)

число number

Количество миллисекунд, за которые должно происходить изменение.

next([speed])

Переход к следующему слайду. Заворачивается назад, если это конец.

Параметр

Тип

Описание

speed

(необязательный)

число (number)

Количество миллисекунд, за которые должно происходить изменение.

stop()

Прекращение переходов (слайдинга). slideBox останется без движения, пока
не получит команду возобновить возможность переходов.

start()

Снова начинаются переходы после того, как slideBox был остановлен.

currentIndex()

  • Возвращает:
    число number Индекс текущего слайда.

slidesCount()

  • Возвращает:
    number Число слайдов, имеющихся на данный момент.

$getByHandle(handle)

Параметр

Тип

Описание

handle

строка (string)

 
  • Возвращает: delegateInstance Экземпляр делегата, который управляет только директивами ionSlideBox  приведением  delegate-handle в соответствие с данным обработчиком.

Пример: $ionicSlideBoxDelegate.$getByHandle('my-handle').stop();

Читать далее

Спиннер

Читать далее

ion-spinner

Директива ionSpinner предоставляет целый набор анимированных вращающихся элементов (спиннеров).
Вращающиеся иконки позволяют вам организовать с пользователями что-то типа обратной связи, чтобы они видели, что приложение работает/что-то обрабатывает/загружает. Вы можете отображать прохождение какого угодно процесса внутри приложения с помощью вращающейся иконки.
По умолчанию функция ionRefresher  использует этот спиннер, а не вращающиеся шрифтовые иконки (которые раньше были в составе ionicons).
Шрифтовые иконки прекрасно смотрятся вместе с простой графикой или с изображениями разных канцелярских предметов, но они не подходят для анимации более продвинутого уровня, поэтому Ionic теперь использует SVG-графику.

Ionic предлагает 10 готовых спиннеров. По умолчанию будет использоваться тот, который лучше всего подходит для той платформы, на которой он должен запускаться. Директива ionSpinner  динамически создает требуемый SVG-элемент, который позволяет фреймворку Ionic задействовать все десять анимированных SVG, чтобы размер не превышал 3 Кбайт.

В каждом вращающемся элементе (спиннере) используется анимация SVG (SMIL). Но для Android-спиннера также используется JavaScript.
Поэтому спиннеры работают и на  Android 4.0-4.3. Кроме того, каждый спиннер может быть стилизован с помощью CSS
и отмасштабирован до любого размера.

Применение

Применение следующего кода будет запускать дефолтный спиннер для платформы, на которой ему нужно будет запускаться. Если это не iOS и не Android, то по умолчанию будет использоваться ios.

<ion-spinner></ion-spinner>

Установкой атрибута icon  вы можете точно определить, какой спиннер нужно использовать, не обращая внимания на
платформу.

<ion-spinner icon="spiral"></ion-spinner>

Цвета

Как и в случае со многими другими компонентами Ionic, можно менять стиль спиннеров с
помощью стандартных кодов цвета, соответствующих соглашению о назначении имен. Например:

<ion-spinner class="spinner-energized"></ion-spinner>

Создание стиля SVG с помощью CSS

Есть одна очень приятная черта в SVG - это то, что можно менять стиль с помощью CSS! Некоторые свойства имеют разные названия, например, SVG использует термин stroke вместо border и fill вместо background-color.

.spinner svg {
  width: 28px;
  height: 28px;
  stroke: #444;
  fill: #444;
}
Читать далее

Вкладки

Читать далее

ion-tabs

Делает возможным использование интерфейса с вкладками и панелью вкладок, а также устанавливает "страницы", которые будут отображаться в виде вкладок.

Назначает элементу любой  tabs class , чтобы определить, как он будет выглядеть и ощущаться.

В iOS вкладки появятся в нижней части экрана. В Android вкладки появятся в верхней части экрана под навигационной панелью. Должно быть соответствие дизайну каждой ОС, но можно менять конфигурацию с помощью $ionicConfigProvider.

Более подробную информацию о вкладках см. в документации в разделе ionTab . 

individual tabs.

Примечание: не помещайте ion-tabs внутри элемента ion-content; есть информация, что это может
вызвать ошибку CSS.

Применение

<ion-tabs class="tabs-positive tabs-icon-top">

  <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-clock" icon-off="ion-ios-clock-outline">
    
  </ion-tab>

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

</ion-tabs>

API

Атрибут

Тип

Описание

delegate-handle

(необязательный)

(string)

Метка, используемая для идентификации этих вкладок с помощью $ionicTabsDelegate.

Читать далее

ion-tab

Содержит контент вкладки. Контент существует, пока выбрана данная вкладка.

Каждая ionTab имеет свою историю видов представления.

Применение

<ion-tab
  title="Tab!"
  icon="my-icon"
  href="#/tab/tab-link"
  on-select="onTabSelected()"
  on-deselect="onTabDeselected()">
</ion-tab>

Полностью рабочий пример панели вкладок можно посмотреть в документации, в разделе ionTabs .

API

Атрибут

Тип

Описание

title

(string)

Заголовок вкладки.

href

(необязательный)

(string)

Ссылка, после тапа, по которой будет осуществлен переход на эту вкладку.

icon

(необязательный)

(string)

Иконка вкладки. Если иконка есть, она станет дефолтной для icon-on и icon-off.

icon-on

(необязательный)

(string)

Иконка вкладки, если она выбрана.

icon-off

(необязательный)

(string)

Иконка (отсутствует).

badge

(необязательный)

(expression)

Значок (badge), который нужно поместить на эту вкладку (обычно это число).

badge-style

(необязательный)

expression

Стиль значка, который нужно добавить на эту вкладку (пример: badge-positive).

on-select

(необязательный)

expression

Вызывается, когда выбрана эта вкладка.

on-deselect

(необязательный)

expression

Вызывается, когда отменен выбор этой вкладки.

ng-click

(необязательный)

expression

По умолчанию вкладка выбирается кликом. Если установлен параметр ngClick, выбор вкладки не произойдет. Вы можете явно включить вкладки, используя $ionicTabsDelegate().

hidden

(необязательный)

expression

к атрибуту hidden.

disabled

(необязательный)

expression

к атрибуту disabled.

 

Читать далее

$ionicTabsDelegate

Делегат для управления директивой ionTabs .

Вызываемые напрямую методы сервиса $ionicTabsDelegate будут управлять всеми директивами вкладок ionTabs.
директивы. Используйте метод 
$getByHandle
чтобы управлять указанными экземплярами ionList.

Применение

<body ng-controller="MyCtrl">
  <ion-tabs>

    <ion-tab title="Tab 1">
      Hello tab 1!
      <button ng-click="selectTabWithIndex(1)">Select tab 2!</button>
    </ion-tab>
    <ion-tab title="Tab 2">Hello tab 2!</ion-tab>

  </ion-tabs>
</body>
function MyCtrl($scope, $ionicTabsDelegate) {
  $scope.selectTabWithIndex = function(index) {
    $ionicTabsDelegate.select(index);
  }
}

Методы

select(index)

Выберите вкладку, подходящую к данному индексу.

Параметр

Тип

Описание

index

(number)

Индекс вкладки, которую нужно выбрать.

selectedIndex()

  • Возвращает:
    number  Индекс выбранной вкладки, или -1.

showBar(show)

Set/get, определяющие отображается ionTabs или нет.

Параметр

Тип

Описание

show

(boolean)

Определяет, отображать строку или нет.

  • Возвращает:
    boolean  Определяет, отображать строку или нет.

$getByHandle(handle)

Параметр

Тип

Описание

handle

(string)

 
  • Возвращает:
    delegateInstance Экземпляр делегата, который управляет только
    директивами ionTabs приведением delegate-handle в соответствие с
    данным обработчиком.

Пример: $ionicTabsDelegate.$getByHandle('my-handle').select(0);

Читать далее

Тап и клик

Читать далее

тап (tap)

На сенсорных устройствах, таких как смартфоны и планшеты, некоторые браузеры делают задержку, равную 300 мс, от момента, когда пользователь прекращает касаться дисплея до момента, когда браузер выполняет клик. Эта задержка была изначально введена для того, чтобы браузер мог понять, хочет ли пользователь детализировать изображение с помощью двойного клика по веб-странице. Обычно браузер ждет приблизительно 300 мс, чтобы определить,
будет ли пользователь делать двойной тап или же он коснулся экрана один раз.

Ionic (в своем виде "из коробки") автоматически убирает задержку в 300 мс, чтобы Ionic-приложения
чувствовали себя более "по-нативному". В результате, другие решения, такие как
fastclick и в Angular
ngTouch не должны использоваться, чтобы не вызывать конфликтов.

Некоторые браузеры уже умеют убирать задержку с помощью настроек, таких как свойство CSS
touch-events: none или с помощью особых значений метатегов области просмотра. Однако каждый из этих
браузеров до сих пор обрабатывает клики по-разному, например, определяет, когда отменить или прекратить событие
(такое как прокрутка, когда целью является кнопка или долгое удерживание кнопки).
Для браузеров, в которых уже нет задержки в 300 мс, рассмотрите как вариант систему тапов Ionic.
Она может привести в норму то, как будут обрабатываться клики на разных устройствах - то есть, будет ожидаться ответ,
неважно, какое это устройство, платформа или версия. К тому же, Ionic будет предотвращать
 "призрачные клики" (ghostclicks), которые случаются даже в тех браузерах, в которых убрана задержка.

В некоторых случаях третьесторонние библиотеки могут также работать, пока не будет касаний - touch events, которые могут
вступать в конфликт с tap-системой. Например, mapping-библиотеки, такие как Google или Leaflet Maps часто
запускают систему обнаружения касания, которая конфликтует с tap-системой Ionic.

Отключение tap-системы

Чтобы отключить тап для какого-то элемента и всего его дочерних элементов,
добавьте атрибут 
data-tap-disabled="true".

<div data-tap-disabled="true">
    <div id="google-map"></div>
</div>

Дополнительная информация:

  • Тап Ionic работает с JavaScript-прокруткой Ionic.
  • Элементы могут приходить и уходить из DOM, а тап Ionic не будет продолжать добавлять и убирать
    слушателей.
  • Не будет задержки тапа “tap delay” после первого "тапа" (вы можете "тапать" по экрану так быстро, как вы этого хотите, все касания будут считаться кликами)
  • Слушатели минимальных событий добавляются только в документ
  • Корректный фокус для каждого типа ввода ((select, textearea, range) на каждой платформе/устройстве
  • Корректно отображает и прячет виртуальную клавиатуру для каждой платформы/устройства
  • Работает с метками окружающих входных значений
  • Не игнорирует клик, если пользователь сдвигает указатель мыши слишком далеко
  • Добавляет и убирает "активированный" css-класс
  • Многократное  модульное тестирование  для каждого сценария
Читать далее

Utility (Сервисная программа)

Читать далее

$ionicConfigProvider

Ionic автоматически подхватывает конфигурации платформы, чтобы выполнить настройки параметров и
определить, какой стиль переходов нужно использовать, какие иконки вкладок отображать вверху или внизу. Например,
iOS будет идти вперед с помощью перехода во входящий вид по направлению справа к центру, а
выход из вида будет осуществляться из центра в левую сторону. На Android переходы будут выполняться по-другому: во входящий вид по направлению снизу к центру, закрывая предыдущий вид, который останется на месте. Следует отметить,
что когда платформа и не iOS, и не Android, то по умолчанию будет все происходить так, как для iOS. Поэтому если вы
разрабатываете десктопный браузер, в нем будет дефолтная конфигурация для iOS.

Эти конфигурации можно менять с помощью $ionicConfigProvider во время фазы настройки
вашего приложения. Кроме того, 
$ionicConfig  может так же установить и получить требуемые для конфигурации значения во время фазы первого прогона приложения.

По умолчанию все базовые переменные для конфигурации устанавливаются как 'platform', что означает, что
будут подхвачены параметры конфигурации, дефолтные для той платформы, на которой запущено приложение. Параметры конфигурации могут быть настроены на этом
уровне, и получится, что на всех платформах будут одинаковые настройки, а не разные конфигурации для каждой из них.
Установить одинаковые переменные конфигурации для всех платформ можно с помощью этого кода:

$ionicConfigProvider.views.maxCache(10);

Кроме того, каждая платформа может иметь собственную конфигурациб в пределах свойства $ionicConfigProvider.platform
. Конфигурация, приведенная ниже, подойдет только для Android-устройств.

$ionicConfigProvider.platform.android.views.maxCache(5);

Применение

var myApp = angular.module('reallyCoolApp', ['ionic']);

myApp.config(function($ionicConfigProvider) {
  $ionicConfigProvider.views.maxCache(5);

  // note that you can also chain configs
  $ionicConfigProvider.backButton.text('Go Back').icon('ion-chevron-left');
});

Методы

 

Методы

views.transition(transition)

Стиль анимации при переходе между видами представления. Дефолтная платформа (platform).

Параметр

Тип

Описание

transition

строка (string)

Определяет, какой стиль перехода от вида к виду использовать.

  • platform: Динамически выбирает корректный стиль перехода в зависимости от платформы, на которой запущено приложение. Если платформа не ios и не android, то по умолчанию берется  ios.
  • ios: Переход в стиле iOS.
  • android: Стиль перехода Android
  • none: Не выполняет анимированные переходы.
  • Возвращает:
    string значение

views.maxCache(maxNumber)

Максимальное число элементов вида, которое нужно кэшировать в DOM. Когда максимальное число превышено,
вид, к которому дольше всего не было доступа, будет убран. У видов представления, которые
остаются в DOM, кэшируется область видимости, текущее состояние и положение прокрутки. Область видимости
отключается от цикла $watch, когда она сохраняется в кэше и подключается снова, когда она опять входит.
Когда максимальный кэш - 0, элемент уходящего вида будет убираться из DOM после
каждого перехода. В следующий раз будет отображаться тот же самый вид, он будет скомпилирован заново,
подключен к DOM, и элемент снова будет в его структуре. На самом деле кэширования происходить не будет.

Параметр

Тип

Описание

maxNumber

число (number)

Максимальное число видов, которое нужно сохранять. По умолчанию 10.

  • Возвращает:
    number  Сколько видов Ionic будет сохранять пока вид не будет убран.

views.forwardCache(value)

По умолчанию, во время осуществления навигации виды, которые недавно были активными, будут помещаться в кэш,
а те же самые данные экземпляра и элементы DOM получат ссылки, по которым к ним можно будет вернуться еще раз. Однако, когда будет совершаться переход к предыдущим видам, сохраненным в истории, "следующие" за ними виды будут убраны из кэша. Если вы переходите вперед, к тому же самому виду, будет создано новый элемент DOM и экземпляр
контроллера. В основном, любые последующие виды каждый раз переустанавливаются. Установите для данной конфигурации параметр true, чтобы "следующие" виды помещались в кэш и не устанавливались заново при каждой загрузке.

Параметр

Тип

Описание

value

(boolean)

 
  • Возвращает:
    логическое значение (boolean)

scrolling.jsScrolling(value)

Определяет, использовать прокрутку JS или нативную. По умолчанию задается нативная прокрутка. Настройка на
true будет иметь тот же самый эффект, что и настройка каждого ion-content на overflow-scroll='false'.

Параметр

Тип

Описание

value

(boolean)

По умолчанию используется  false как в Ionic 1.2

  • Возвращает:
    логическое значение (boolean)

backButton.icon(value)

Иконка кнопки возврата.

Параметр

Тип

Описание

value

строка (string)

 
  • Возвращает:
    строка (string)

backButton.text(value)

Текст кнопки возврата.

Параметр

Тип

Описание

value

строка (string)

По умолчанию Back.

  • Возвращает:
    строка (string)

backButton.previousTitleText(value)

Если текст предыдущего заголовка должен стать текстом кнопки возврата. Это
является параметром по умолчанию для iOS.

Параметр

Тип

Описание

value

(boolean)

 
  • Возвращает:
    логическое значение (boolean)

form.checkbox(value)

Стиль оформления чекбокса. По умолчанию в Android используются квадратики, в iOS  кружочки.

Параметр

Тип

Описание

value

строка (string)

 
  • Возвращает:
    строка (string)

form.toggle(value)

Стиль toggle-переключателя. В Android по умолчанию используется small, а в iOS по умолчанию используется large.

Параметр

Тип

Описание

value

строка (string)

 
  • Возвращает:
    строка (string)

spinner.icon(value)

Иконка вращающегося элемента, которая должна использоваться по умолчанию.

Параметр

Тип

Описание

value

строка (string)

Может быть:android, ios, ios-small, bubbles, circles, crescent, dots, lines, ripple, or spiral.

  • Возвращает:
    строка (string)

tabs.style(value)

Стиль оформления вкладки. В Android по умолчанию используется striped, а в iOS по умолчанию используется standard.

Параметр

Тип

Описание

value

строка (string)

Доступные значения это striped и standard.

  • Возвращает:
    строка (string)

tabs.position(value)

Позиция вкладки. В Android по умолчанию используется top , а в iOS по умолчанию используется bottom.

Параметр

Тип

Описание

value

строка (string)

Возможные значения – это top и bottom.

  • Возвращает:
    строка (string)

templates.maxPrefetch(value)

Устанавливает максимальное число шаблонов, которые будут предварительно выбраны из templateUrls, заданного в
$stateProvider.state. Если настроено на 0, пользователю придется ждать,
пока будет произведена первая выборка шаблона при переходе на новую страницу. По умолчанию 30.

Параметр

Тип

Описание

value

(integer)

Максимальное число шаблонов, которые будут предварительно выбраны из templateUrls, заданного в $stateProvider.state().

  • Возвращает:
    целое число (integer)

navBar.alignTitle(value)

Определяет, по какой стороне навигационной панели выравнивать заголовок. По умолчаниюcenter (по центру).

Параметр

Тип

Описание

value

(string)

сторона навигационной панели, по которой нужно выравнивать заголовок.

  • платформа: Динамически выбирает корректный стиль заголовка в зависимости от платформы, на которой запущено приложение. Если платформа ios, по умолчанию будет выбран параметр center. Если платформа android, по умолчанию будет выбран параметр left. Если платформа не ios и не android, по умолчанию будет выбран параметр center.
  • left: Выравнивание заголовка по левому краю навигационной панели
  • center: Выравнивание заголовка по центру навигационной панели
  • right: Выравнивание заголовка по правому краю навигационной панели.
  • Возвращает:
    значение string (строка)

navBar.positionPrimaryButtons(value)

По какой стороне навигационной панели выравнивать основные кнопки этой панели. По умолчаниюleft.

Параметр

Тип

Описание

value

 (string)

сторона навигационной панели, по которой нужно выравнивать основные кнопки навигационной панели.

  • platform: Динамически выбирает корректный стиль заголовка в зависимости от платформы, на которой запущено приложение. Если платформа ios, по умолчанию будет выбран параметр left. Если платформа android, по умолчанию будет выбран параметр right. Если платформа не ios и не android, по умолчанию будет выбран параметр left.
  • left: Выравнивание основных кнопок навигационной панели по левому краю навигационной панели
  • right: Выравнивание основных кнопок навигационной панели по правому краю навигационной панели
  • Возвращает:
    значение string (строка)

navBar.positionSecondaryButtons(value)

По какой стороне навигационной панели нужно выравнивать второстепенные кнопки навигационной панели. По умолчанию  right.

Параметр

Тип

Описание

value

(string)

сторона навигационной панели, по которой нужно выравнивать второстепенные кнопки навигационной панели.

  • platform: Динамически выбирает корректный стиль заголовка в зависимости от платформы, на которой запущено приложение. Если платформа  ios, по умолчанию будет выбран параметр right. Если платформа android, по умолчанию будет выбран параметр right. Если платформа не ios и не android, по умолчанию будет выбран параметр right.
  • left: Выравнивание второстепенных кнопок навигационной панели по левому краю навигационной панели
  • right: Выравнивание второстепенных кнопок навигационной панели по правому краю навигационной панели
  • Возвращает:
    string значение
Читать далее

ionic.Platform

Набор методов сервисной программы, которые могут быть использованы для того чтобы подготовить устройство и
извлечь много другой информации, например, что это за платформа, на которой в текущий момент устанавливается приложение.

Применение

angular.module('PlatformApp', ['ionic'])
.controller('PlatformCtrl', function($scope) {

  ionic.Platform.ready(function(){
    // will execute when device is ready, or immediately if the device is already ready.
  });

  var deviceInformation = ionic.Platform.device();

  var isWebView = ionic.Platform.isWebView();
  var isIPad = ionic.Platform.isIPad();
  var isIOS = ionic.Platform.isIOS();
  var isAndroid = ionic.Platform.isAndroid();
  var isWindowsPhone = ionic.Platform.isWindowsPhone();

  var currentPlatform = ionic.Platform.platform();
  var currentPlatformVersion = ionic.Platform.version();

  ionic.Platform.exitApp(); // stops the app
});

Методы

ready(callback)

Запускает обратный вызов (callback), как только устройство готово, или немедленно,
если устройство уже готово. Этот метод может быть запущен
откуда угодно и не требует "заворачивания" в какие-то другие дополнительные методы.
Когда приложение находится в пределах WebView (Cordova), оно запустит
обратный вызов (callback) сразу же, как только устройство будет готово. Если приложение находится в
веб-браузере, оно запустить обратный вызов (callback) после window.load.
Пожалуйста, не забывайте о том, что компоненты Cordova (Camera, FileSystem и т.д.) пока
не работают в веб-браузере.

Параметр

Тип

Описание

callback

function

Функция, которую нужно вызвать.

setGrade(grade)

Устанавливает ранг устройства: ‘a’, ‘b’ или ‘c’. ‘a’ является лучшим
(активно большинство css-функций), ‘c’ является худшим. По умолчанию устанавливает ранг
в зависимости от текущего устройства.

Параметр

Тип

Описание

grade

строка string

Новый ранг, который нужно установить.

device()

Возврат текущего устройства (дается по cordova).

  • Возвращает: 
    object Объект устройства.

isWebView()

  • Возвращает: 
    boolean Проверяет, не происходит ли работа в пределах WebView (как, например, Cordova).

isIPad()

  • Возвращает: 
    boolean Определяет, не осуществляется ли работа приложения на iPad.

isIOS()

  • Возвращает: 
    boolean 

isAndroid()

  • Возвращает: 
    boolean  Определяет, не осуществляется ли работа приложения на Android.

isWindowsPhone()

  • Возвращает: 
    boolean  Определяет, не осуществляется ли работа приложения на Windows Phone.

isEdge()

  • Возвращает: 
    boolean  Определяет, не осуществляется ли работа приложения наMS Edge/Windows 10 (в том числе Phone)

platform()

  • Возвращает: 
    string  Название текущей платформы.

version()

  • Возвращает: 
    number Версия платформы текущего устройства.

is(Platform)

Параметр

Тип

Описание

Platform

строка string

name.

  • Возвращает: 
    boolean Определяет, принято ли предоставленное название платформы.

exitApp()

Выходит из приложения.

showStatusBar(shouldShow)

Отображает или скрывает строку статуса устройства (в Cordova). Требует cordova plugin add org.apache.cordova.statusbar

Параметр

Тип

Описание

shouldShow

логическое значение boolean

Определяет, отображать или нет строку статуса.

fullScreen([showFullScreen], [showStatusBar])

Устанавливает, работает ли приложение в полноэкранном режиме или нет (в Cordova).

Параметр

Тип

Описание

showFullScreen

(необязательный)

логическое значение boolean

Определяет, настраивать ли приложение для работы в полноэкранном режиме. По умолчанию "true". Требуетcordova plugin add org.apache.cordova.statusbar

showStatusBar

(необязательный)

логическое значение boolean

Определяет, отображать или нет строку статуса устройства. По умолчанию "false".

Свойства

·         boolean isReady

Определяет, готово ли устройство.

·         boolean isFullScreen

Определяет, работает ли устройство в полноэкранном режиме.

·         Array(string) platforms

Массив всех найденных платформ.

·         string grade

К какому рангу принадлежит текущая платформа.

Читать далее

ionic.DomUtil

Методы

requestAnimationFrame(callback)(альтернативное имя: ionic.requestAnimationFrame)

ВызываетrequestAnimationFrameили полизаполнение, если это не доступно.

Параметр

Тип

Описание

callback

function

Функция, которая будет вызвана, когда произойдет следующий кадр.

animationFrameThrottle(callback)(альтернативное имя: ionic.animationFrameThrottle)

При осуществлении обратного вызова, если эта операция происходит 100 раз между
кадрами анимации, добавление Throttle (дросселя) сделает так, что будет выполнен последний
из 100 вызовов.

Параметр

Тип

Описание

callback

function

функция, которую нужно регулировать к requestAnimationFrame

  • Возвращает:
    function  Функция, которая затем вызовет переданную в обратном вызове.
    Переданная в обратном вызове получит контекст, с помощью которого была вызвана
    возвращенная функция.

getPositionInParent(element)

Находит смещение прокрутки элемента в пределах контейнера.

Параметр

Тип

Описание

element

DOMElement

Элемент, смещение которого нужно найти.

  • Возвращает:
    object Объект положения со следующими свойствами:
    • {number} left Сдвиг элемента влево.
    • {number} top Сдвиг элемента вверх.

ready(callback)

Вызывает функцию, когда DOM готов, или если он уже готов,
вызывает функцию немедленно.

Параметр

Тип

Описание

callback

function

Функция, которую нужно вызвать.

getTextBounds(textNode)

Получает rect-функцию, представляющую границы данного textNode.

Параметр

Тип

Описание

textNode

DOMElement

textNode, границы которого нужно найти.

  • Возвращает:
    object Объект, представляющий границы узла. Свойства:
    • {number} left Левая позиция textNode.
    • {number} right Правая позиция textNode.
    • {number} top Верхняя позиция textNode.
    • {number} bottom Нижняя позиция textNode.
    • {number} width Ширина textNode.
    • {number} height Высота textNode.

getChildIndex(element, type)

Получает первый индекс дочернего узла в пределах данного элемента
заданного типа.

Параметр

Тип

Описание

element

DOMElement

Элемент, индекс которого нужно найти.

type

строка string

nodeName, по которому нужно согласовывать дочерние элементы.

  • Возвращает:
    number Индекс, или -1 дочернего элемента с nodeName соответствующего типа.

getParentWithClass(element, className)

Параметр

Тип

Описание

element

DOMElement

 

className

строка string

 
  • Возвращает:
    DOMElement Самый близкий родительский элемент, подходящий по параметру
    className или пустое значение.

getParentOrSelfWithClass(element, className)

Параметр

Тип

Описание

element

DOMElement

 

className

строка string

 
  • Возвращает:
    DOMElement Самый близкий родительский или свой элемент, подходящий по параметру
    className или пустое значение.

rectContains(x, y, x1, y1, x2, y2)

Параметр

Тип

Описание

x

число number

 

y

число number

 

x1

число number

 

y1

число number

 

x2

число number

 

y2

число number

 
  • Возвращает:
    boolean Определяет, вписывается ли {x,y} в границы прямоугольника, определяемого
    {x1,y1,x2,y2}.

blurAll()

Затемняет любой текущий элемент ввода, который находится в фокусе

  • Возвращает:
    DOMElement Затемненный элемент или пустое значение
Читать далее

ionic.EventController

Методы

trigger(eventType, data, [bubbles], [cancelable])(альтернативное имя: ionic.trigger)

Параметр

Тип

Описание

eventType

строка string

Событие, которое нужно запустить.

data

объект object

Данные для события. Подсказка: передает{target: targetElement}

bubbles

(необязательный)

логическое значение boolean

Определяет, должно ли событие перенаправляться в DOM.

cancelable (отменяемое)

(необязательный)

логическое значение boolean

Определяет, должно ли событие быть отменяемым.

on(type, callback, element)(альтернативное имя: ionic.on)

Слушает событие на элементе.

Параметр

Тип

Описание

type

строка string

Событие, которое нужно слушать.

callback

function

Слушатель, который нужно вызвать.

element

DOMElement

Элемент, на который нужен слушатель событий.

off(type, callback, element)(альтернативное имя: ionic.off)

Убирает слушатель событий.

Параметр

Тип

Описание

type

строка string

 

callback

function

 

element

DOMElement

 

onGesture(eventType, callback, element, options)(альтернативное имя: ionic.onGesture)

Добавляет на элемент слушатель событий для жеста.

Доступные типы eventTypes (из hammer.js):

hold, tap, doubletap, drag, dragstart, dragend, dragup, dragdown, 

dragleft, dragright, swipe, swipeup, swipedown, swipeleft, swiperight, 

transform, transformstart, transformend, rotate, pinch, pinchin, pinchout, 

touch, release

Параметр

Тип

Описание

eventType

строка string

Событие жеста, которое нужно слушать.

callback

function(e)

Функция, которая будет вызвана, когда произойдет жест.

element

DOMElement

Элемент Angular для слушания размещенного на нем события.

options

объект object

объект object.

  • Возвращает:
    ionic.Gesture  Объект жеста (используйте это для того, чтобы потом убрать жест).

offGesture(gesture, eventType, callback)(альтернативное имя: ionic.offGesture)

Убирает слушатель события для жеста, созданный на элементе.

Параметр

Тип

Описание

gesture

ionic.Gesture

Жест, который нужно убрать.

eventType

строка string

Событие жеста, для которого нужно убрать слушатель.

callback

function(e)

Слушатель, который нужно убрать.

Читать далее

$ionicPosition

Набор методов сервисной программы, которые могут быть использованы для того чтобы извлечь позицию элементов DOM.
Предполагается, что это будет использовано там, где нам нужно будет узнать абсолютную позицию элементов DOM по
отношению к другим, существующим элементам (это случай, актуальный для справочных надписей, вспомогательных экранов и т.д.).

Взято из AngularUI Bootstrap,
(лицензия)

Методы

position(element)

Получает текущие координаты элемента относительно к сдвинутому элементу родителя.
Эквивалент read-only функции выбора позиции jQuery.

Параметр

Тип

Описание

element

element

element to.

  • Возвращает:
    object  Возвращает объект, содержащий свойства верх, лево, ширина и высота.

offset(element)

Получает текущие координаты элемента, по отношению к документу.
Эквивалент read-only функции сдвига jQuery’.

Параметр

Тип

Описание

element

element

Элемент, для которого нужно получить параметры сдвига.

  • Возвращает:
    object  Возвращает объект, содержащий свойства верх, лево, ширина и высота.
Читать далее