Sezione 6 Liste e navigazione

Sezione 6.1 Action list

Una lista di possibili azioni. È utilzzata nel menu di Inbank ma può essere presente anche all'interno di alcune funzioni come un normale lista di link. Può essere estesa tramite le classi .c-action-list--narrow (che la rende più compatta) e .c-action-list--goto (che aggiunge l'icona freccia per indicare un link diretto).

Stili default

Estensioni e modificatori

Markup 
<ul class="c-action-list [modifier class]">
    <li><a href="#">Menù link 1</a></li>
    <li><a href="#">Menù link 2</a></li>
    <li><a href="#">Menù link 3</a></li>
</ul>

Sezione 6.1.1 Indicatore categoria action list

L'attributo data-action-list-parents indica l'appertenenza della voce ad una specifica categoria. Lo stile e l'elemento vengono inseriti via javascript alla ricerca.

Stili default

Markup 
<ul class="c-action-list">
     <li data-action-list-parents="I tuoi conti correnti"><a href="#">Lista movimenti</a></li>
</ul>

Sezione 6.1.2 Action list con eliminazione

La classe .c-action-list__delete sull'elemento em interno agli elementi della lista permette di aggiungere un controllo di tipo elimina che una volta gestito lato server consente l'eliminazione della riga dalla lista. Attualmente è utilzzata dalle operazioni veloci nel menu principale di Inbank.

Stili default

Markup 
<ul class="c-action-list">
    <li><a href="#">Menù link 1 <em title="Delete" data-href="?delete" data-confirm="Vuoi eliminare il link?" class="c-action-list__delete" aria-label="Elimina il link">×</em></a></li>
    <li><a href="#">Menù link 2 <em title="Delete" data-href="?delete" data-confirm="Vuoi eliminare il link?" class="c-action-list__delete" aria-label="Elimina il link">×</em></a></li>
    <li><a href="#">Menù link 3 <em title="Delete" data-href="?delete" data-confirm="Vuoi eliminare il link?" class="c-action-list__delete" aria-label="Elimina il link">×</em></a></li>
</ul>

Sezione 6.1.3 Action list con figli

La classe .c-action-list__sub sui figli della lista indica la presenza di un sotto-menu all'interno del quale è possibile inserire un'ulteriore elemento .c-action-list.

Stili default

Markup 
<ul class="c-action-list">
    <li class="c-action-list__sub">
        <b>Sub menù 1</b>
        <ul class="c-action-list">
            <li><a href="#">Menù link 1</a></li>
            <li><a href="#">Menù link 2</a></li>
            <li><a href="#">Menù link 3</a></li>
            <li><a href="#">Menù link 4</a></li>
            <li><a href="#">Menù link 5</a></li>
        </ul>
    </li>
    <li class="c-action-list__sub">
        <b>Sub menù 2</b>
        <ul class="c-action-list">
            <li><a href="#">Menù link 1</a></li>
            <li><a href="#">Menù link 2</a></li>
            <li><a href="#">Menù link 3</a></li>
            <li><a href="#">Menù link 4</a></li>
            <li><a href="#">Menù link 5</a></li>
        </ul>
    </li>
    <li class="c-action-list__sub">
        <b>Sub menù 3</b>
        <ul class="c-action-list">
            <li><a href="#">Menù link 1</a></li>
            <li><a href="#">Menù link 2</a></li>
            <li><a href="#">Menù link 3</a></li>
            <li><a href="#">Menù link 4</a></li>
            <li><a href="#">Menù link 5</a></li>
        </ul>
    </li>
</ul>

Sezione 6.2 Details bar

Barra di dettaglio che riepiloga i dati informativi più importanti. Viene utilizzata principalmente nelle funzioni in cui è presente una datatable.

La componente prevede anche un pulsante di "back" tramite l'elemento li class="c-details-bar__prev" (vedi secondo esempio). Nel caso in cui si vuole che un valore sia all'opposto della barra si può utilizzare li class="c-details-bar__opposite".

Stili default

  • offline
  • Banca: orelma bensussan grande pure staccare offrire sacro sotto accorgersi infatti accanto spegnere |:+"^,-(
  • BIC: 85636
  • Conto:sicurezza ./'^,+""
  • IBAN: IT93N0000000000100000123451
  • +339.151.739,30 XYZ Importo pagamenti
  • Data esecuzione: 21/04/2016
  • Conto ordinante: DE11200905000007715900
  • Tipologia: gelmiro olerzi sangue infatti
  • - Disposizioni
Markup 
<ul class="c-details-bar">
    <li class="c-details-bar__icon">
        <i class="c-icon-s c-icon--bank"></i>
        <span data-dtb-header=""><span class="c-badge c-badge--tertiary">offline</span></span>
    </li>
    <li><strong>Banca:</strong> <span data-dtb-header="">orelma bensussan grande pure staccare offrire sacro sotto accorgersi infatti accanto spegnere |:+"^,-(</span></li>
    <li><strong>BIC:</strong> <span data-dtb-header="">85636</span></li>
    <li><strong>Conto:</strong><span data-dtb-header=""><span title="odore .#&quot;&amp;:&amp;+'">sicurezza ./'^,+""</span></span></li>
    <li><strong>IBAN:</strong> <span data-dtb-header="">IT93N0000000000100000123451 <i class="c-icon-s c-icon--exclamation-triangle"></i> </span></li>
</ul>
<ul class="c-details-bar">
    <li class="c-details-bar__prev" data-dtb-header=""><a href="#" title="Torna alla lista distinte" aria-label="Torna alla lista distinte"><i class="c-icon-r c-icon--angle-double-left"></i> </a></li>
    <li><strong class="h4" data-dtb-header=""><span class="is-pos">+339.151.739,30&nbsp;XYZ</span></strong> <span>Importo pagamenti</span></li>
    <li><strong>Data esecuzione:</strong> <span data-dtb-header="">21/04/2016</span></li>
    <li><strong>Conto ordinante:</strong> <span data-dtb-header="">DE11200905000007715900</span></li>
    <li><strong>Tipologia:</strong> <span data-dtb-header=""><span title="comita zanzi già">gelmiro olerzi sangue infatti</span></span></li>
    <li class="c-details-bar__opposite"><strong data-dtb-header="">-</strong> <span>Disposizioni</span></li>
</ul>

Sezione 6.4 Header page

Componente di intestazione in tutte le funzioni. Se al suo interno è presente la componente .c-progress, .c-header-page deve essere estesa con la classe .c-header-page--plain come nel primo esempio.

Stili default

Bonifico Prepagate

  1. 1. Compila
  2. 2. Visualizza
  3. 3. Sicurezza
  4. 4. Esito
Conferma i dati del bonifico

Bonifico Prepagate

  1. 1. Compila
  2. 2. Visualizza
  3. 3. Sicurezza
  4. 4. Esito
Markup 
<header class="c-header-page c-header-page--plain">
    <div class="o-grid o-grid--half@ls o-bridge-horizontal-half u-align-items-center">
        <h2 class="h5 h3@xls">Bonifico Prepagate</h2>
        <ol class="o-inline-list o-inline-list--step u-right@ls">
            <li>1. Compila</li>
            <li><strong>2. Visualizza</strong></li>
            <li>3. Sicurezza</li>
            <li>4. Esito</li>
        </ol>
    </div>
    <progress class="c-progress" value="50" max="100">Conferma i dati del bonifico</progress>
</header>
<header class="c-header-page">
    <div class="o-grid o-grid--half@ls o-bridge-horizontal-half u-align-items-center">
        <h2 class="h5 h3@xls">Bonifico Prepagate</h2>
        <ol class="o-inline-list o-inline-list--step u-right@ls">
            <li>1. Compila</li>
            <li><strong>2. Visualizza</strong></li>
            <li>3. Sicurezza</li>
            <li>4. Esito</li>
        </ol>
    </div>
</header>

Sezione 6.5 Menu toggler

Toggler per apertura-chiusura del menu su dispositivi < a 768px. La componente è inserita via javascript tramite media query.

Stili default

Menu
Markup 
<span class="c-menu-toggler">Menu</span>

Sezione 6.6 Progress

Basata sul tag progress, la componente mostra in maniera grafica la percentuale di avanzamento durante il processo di compilazione di una funzione dispositiva. Può essere utilizata anche in modo asincrono per mostrare la percentuale di caricamento di un file.

Stili default

50%

Estensioni e modificatori

.c-progress--success

Stato positivo

50%

.c-progress--warning

Stato in allerta

50%

.c-progress--error

Stato di errore

50%
Markup 
<progress class="c-progress [modifier class]" value="50" max="100">50%</progress>

Sezione 6.9 Roster

Lista di oggetti con etichette ( c-roster__name ) contrapposte ai relativi valori ( c-roster__value ). Ogni riga è contrassegnata dall'elemento c-roster__item.

Può essere utilizzata in vari contesti come ad esempio all'interno della componente c-dropdown.

Stili default

  • Pagamenti (x5) -16.000 €
  • Incassi (x3) +16.000 €
  • Valore 3 +16.000 €
  • Valore 3 +16.000 €
Markup 
<ul class="c-roster">
    <li class="c-roster__item"><em class="c-roster__name">Pagamenti (x5)</em> <span class="c-roster__value is-neg">-16.000 €</span></li>
    <li class="c-roster__item"><em class="c-roster__name">Incassi (x3)</em> <span class="c-roster__value is-pos">+16.000 €</span></li>
    <li class="c-roster__item"><em class="c-roster__name">Valore 3</em> <span class="c-roster__value is-pos">+16.000 €</span></li>
    <li class="c-roster__item"><em class="c-roster__name">Valore 3</em> <span class="c-roster__value is-pos">+16.000 €</span></li>
</ul>

Sezione 6.10 Stairs

La componente è utilizzata nei servizi Info SMS e Informazioni utili e permette di mostrare delle informazioni in base alla scelta effettuata. Il tag utilizzato è ol che ne definisce la gerarchia.

Stili default

  1. Step 1
  2. Step 2
  3. Step 3
  4. Step 4
  5. Ultimo step
Markup 
<ol class="c-stair">
    <li class="c-stair__step">Step 1</li>
    <li class="c-stair__step">Step 2</li>
    <li class="c-stair__step">Step 3</li>
    <li class="c-stair__step">Step 4</li>
    <li class="c-stair__step last_step">Ultimo step</li>
</ol>

Sezione 6.11 Tabs

Componente di navigazione a tabs. Può essere utilizzata come link ad ancore interne alla pagina oppure per link a pagine esterne. Dispone di due estensioni che ne riducono le dimensioni .c-tabs--narrow e che ne capovolgono l'aspetto .c-tabs--reverse.

Stili default

Estensioni e modificatori

Markup 
<ul class="c-tabs [modifier class]">
    <li class="is-active"><a href="#ancora1">Ancora 1</a></li>
    <li><a href="#ancora2">Ancora 2</a></li>
    <li><a href="#ancora3">Ancora 3</a></li>
</ul>

Sezione 6.12 Feed list

Sezione 6.12 Info list

Deprecated: utilizzata solo dal trading

Sezione 6.13 Service nav

Deprecated: componente deprecata