Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Personalizzare le list view

Modificare l'aspetto delle liste e aggiungere le icone
Modificare l'aspetto delle liste e aggiungere le icone
Link copiato negli appunti

Come per gli altri elementi, anche per le list view sono previsti degli swatch predefiniti: lo swatch 'c' è utilizzato per gli elementi della lista e lo swatch 'b' per i divisori (divider). È possibile specificare un diverso swatch sia a livello di intera lista che a livello di singolo elemento, come evidenziato nel seguente esempio:

<ul data-role="listview" data-theme="d">
	<li data-role="list-divider">Divider</li>
	<li><a href="inbox.html">Inbox</a></li>
	<li><a href="outbox.html">Outbox</span></a></li>
	<li><a href="sent.html">Sent</a></li>
	<li data-theme="a"><a href="trash.html">Trash</a></li>
</ul>

È inoltre possibile indicare lo swatch da applicare ai vari elementi tipici delle list view, come divisori (divider), contatori (count bubble) e pulsanti separatori (split button) utilizzando degli attributi specifici dell'elemento <ul>:

<ul data-role="listview" data-theme="d" data-divider-theme="e" data-count-theme="b" data-split-theme="a">
	<li data-role="list-divider">Divider</li>
	<li><a href="inbox.html">Inbox<span class="ui-li-count">12</span></a></li>
	<li><a href="outbox.html">Outbox</span></a></li>
	<li><a href="sent.html">Sent</a></li>
	<li><a href="trash.html">Trash</a><a href="trash.html">Go to trash</a></li>
</ul>

Se si desidera sostituire l'icona standard associata a ciascun elemento della lista, è possibile specificare l'attributo data-icon per l'elemento <li> indicando l'icona da visualizzare:

<li data-icon="home"><a href="#">Home page</a></li>
<li data-icon="info"><a href="#">Informazioni</a></li>
<li data-icon="alert"><a href="#">Avvisi</a></li>
<li data-icon="search"><a href="#">Cerca</a></li>

Avremo un risultato simile al seguente:

Figura 8. Icone personalizzate nelle liste
Icone personalizzate nelle liste

Per non visualizzare alcuna icona è sufficiente specificare il valore false:

<li data-icon="false"><a href="#">Nessuna icona</a></li>

Anche per i pulsanti separatori (split button) è possibile specificare un'icona personalizzata indicando l'attributo data-split-icon dell'elemento <ul>:

<ul data-role="listview"
    data-theme="d"
    data-split-theme="a"
	data-split-icon="delete">

Il risultato di sarà analogo a quanto mostrato dalla seguente figura:

Figura 9. Icone personalizzate nei pulsanti separatori
Icone personalizzate nei pulsanti separatori


Ti consigliamo anche