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 (необязательный) |
|
Дескриптор handle используется для идентификации списка посредством |
type (необязательный) |
|
Определяет тип списка, который нужно использовать (список-вставка или список-карточка) |
show-delete (необязательный) |
|
Определяет, нужно ли отобразить или спрятать на данный момент кнопки удаления для пунктов списка. |
show-reorder (необязательный) |
|
Определяет, нужно ли отобразить или спрятать на данный момент кнопки изменения порядка перечисления для пунктов списка. |
can-swipe (необязательный) |
|
Определяет, позволяется ли проводить пальцем по пунктам в списке, чтобы стали доступны кнопки опций. По умолчанию используется параметр true. |