Liste, bottoni e swipe sugli elementi

16 novembre 2015

L’organizzazione dei contenuti in lista è diventato uno standard per le applicazioni mobile. Come abbiamo avuto modo di vedere nei diversi esempi presentati fin qui, in Ionic praticamente qualsiasi elemento HTML può diventare una lista o un elemento di una lista, è sufficiente assegnare:

  • la classe list all’elemento che rappresenta la lista
  • la classe item agli elementi della lista.

I seguenti sono esempi validi di markup che visualizzano il contenuto come una lista:

<ul class="list">
	<li class= "item">Elemento 1</li>
	<li class= "item">Elemento 2</li>
	<li class= "item">Elemento 3</li>
</ul>
<div class="list">
	<div class= "item">Elemento 1</div>
	<div class= "item">Elemento 2</div>
	<div class= "item">Elemento 3</div>
</div>

ion-list e ion-item

Ionic, oltre a gestirne la visualizzazione, prevede direttive specifiche per le liste che consentono l’aggiunta di funzionalità per la gestione degli elementi. Stiamo parlando delle direttive ion-list e ion-item: la prima individua la lista globalmente mentre la seconda rappresenta ciascun elemento.

L’esempio più semplice di utilizzo delle direttive è quello mostrato dal seguente markup:

<ion-list> 
	<ion-item>Elemento 1</ion-item> 
	<ion-item>Elemento 2</ion-item> 
	<ion-item>Elemento 3</ion-item> 
</ion-list>

Naturalmente l’effetto di questo markup è esattamente identico a quello ottenuto utilizzando semplicemente le classi CSS list e item. Consideriamo invece il seguente markup:

<div ng-controller="listController"> 
<ion-list show-delete="true"> 
	<ion-item ng-repeat="citta in elencoCitta"> 
		<ion-delete-button   
			class="ion-minus-circled"   
			ng-click="eliminaCitta($index)"></ion-delete-button> 
		{{citta}} 
	</ion-item> 
</ion-list> 
</div> 

con il corrispondente controller Angular:

app.controller('listController', function($scope) { 

	$scope.elencoCitta = ['Roma', 'Firenze', 'Milano', 'Napoli']; 
	
	$scope.eliminaCitta = function(i) {
		$scope.elencoCitta.splice(i, 1); 
	}; 
}); 

In questo caso generiamo dinamicamente gli elementi della lista sfruttando la direttiva Angular ng-repeat ed inseriamo all’interno di ciascun elemento la direttiva ion-delete-button. Questa direttiva rappresenta un pulsante da utilizzare per l’eliminazione dell’elemento corrente: assegnando la classe CSS ion-minus-circled determiniamo l’icona da visualizzare, mentre l’assegnamento a ng-click della chiamata a eliminaCitta() implementa l’eliminazione effettiva.

Il risultato visivo di questo codice è mostrato dalla seguente figura:

Come è facile intuire, di per sè la direttiva ion-delete-button in realtà non effettua alcuna eliminazione di elementi dalla lista: la responsabilità dell’operazione è tutta a carico del programmatore che, come abbiamo visto, la implementa assegnando il codice JavaScript opportuno alla direttiva Angular ng-click.

Tuttavia, la visibilità dei pulsanti di eliminazione è legata ad un attributo della direttiva ion-list: l’attributo show-delete. Questo attributo prevede un valore booleano che indica se visualizzare o meno i pulsanti di eliminazione.

Nell’esempio abbiamo impostato esplicitamente il valore true, ma avremmo potuto scegliere di visualizzare i pulsanti di eliminazione in seguito ad un evento, come ad esempio la selezione di un apposito pulsante generale o in seguito alla pressione continuata su un elemento della lista.

ion-reorder-button, ordinare gli elementi della lista

Oltre al pulsante di eliminazione, Ionic mette a disposizione un pulsante per il riordino degli elementi della lista, cioè per lo spostamento della loro posizione all’interno della lista. Per questo scopo possiamo sfruttare l’attributo show-reorder della direttiva ion-list e la direttiva ion-reorder-button, in modo del tutto analogo a come abbiamo visto prima per il pulsante di eliminazione:

<div ng-controller="listController"> 
<ion-list show-reorder="true"> 
	<ion-item ng-repeat="citta in elencoCitta"> 
		{{citta}} 
		<ion-reorder-button   
			class="ion-navicon"   
			on-reorder="spostaCitta($index, $toIndex)"></ion-reorder-button> 
	</ion-item> 
</ion-list> 
</div> 
app.controller('listController', function($scope) { 
	
	$scope.elencoCitta = ['Roma', 'Firenze', 'Milano', 'Napoli']; 

	$scope.spostaCitta = function(i, toi) {
	
		var item = $scope.elencoCitta[i];
		
		$scope.elencoCitta.splice(i, 1);
		$scope.elencoCitta.splice(toi, 0, item);
	}; 
}); 

Con questo codice otterremo una lista come quella visualizzata nella seguente figura:

Puntando il dito sull’icona a destra dell’elemento e spostandolo sullo schermo avremo la possibilità di decidere l’ordine degli elementi della lista. Come possiamo intuire, l’attributo on-reorder della direttiva ion-reorder-button è l’aggancio per la funzione che implementa lo spostamento degli elementi associati alla lista.

ion-option-button, mostrare opzioni per gli elementi della lista

È possibile assegnare a ciascun elemento di una lista Ionic uno o più pulsanti per operazioni specifiche tramite la direttiva ion-option-button, come mostrato dal seguente esempio di codice:

<div ng-controller="listController"> 
<ion-list> 
	<ion-item ng-repeat="citta in elencoCitta"> 
		{{citta}} 
		<ion-option-button ng-click="condividi($index)" class="button-positive"> 
			Condividi 
		</ion-option-button>
		<ion-option-button ng-click="modifica($index)" class="button-assertive"> 
			Modifica 
		</ion-option-button> 
	</ion-item> 
</ion-list> 
</div> 

Questi pulsanti verranno mostrati in seguito allo swiping dell’elemento della lista, cioè quando l’elemento viene trascinato verso sinistra:

Lo swiping degli elementi della lista è abilitato per impostazione predefinita. È possibile disabilitarlo impostando a false l’attributo can-swipe della direttiva ion-list:

<ion-list can-swipe="false">

...

</ion-list>

Tutte le lezioni

1 ... 11 12 13 ... 29

Se vuoi aggiornamenti su Liste, bottoni e swipe sugli elementi inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Liste, bottoni e swipe sugli elementi

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing