È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Tab

Modalità d'uso

Chiamata tramite attributi personalizzati (se il componente è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione)
Chiamata via JavaScript

Letture correlate

Linee guida di design Material Design: Componenti - Tab

Stile

Stile di base

Di seguito è riportato un tab standard. Sui telefoni occupa il 100% della larghezza e ogni opzione ha la stessa larghezza; su tablet/PC è allineato a sinistra.

Esempio


        <div class="mdui-tab" mdui-tab>
          <a href="#example1-tab1" class="mdui-ripple">web</a>
          <a href="#example1-tab2" class="mdui-ripple">shopping</a>
          <a href="#example1-tab3" class="mdui-ripple">images</a>
        </div>
        <div id="example1-tab1" class="mdui-p-a-2">web content</div>
        <div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
        <div id="example1-tab3" class="mdui-p-a-2">images content</div>

Scorrevole

A <div class="mdui-tab"> aggiungendo la classe .mdui-tab-scrollable, il tab diventa scorrevole orizzontalmente e viene spesso usato in scenari mobili con molte opzioni.

Esempio


        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#example2-tab1" class="mdui-ripple">web</a>
          <a href="#example2-tab2" class="mdui-ripple">shopping</a>
          <a href="#example2-tab3" class="mdui-ripple">videos</a>
          <a href="#example2-tab4" class="mdui-ripple">images</a>
          <a href="#example2-tab5" class="mdui-ripple">news</a>
          <a href="#example2-tab6" class="mdui-ripple">maps</a>
          <a href="#example2-tab7" class="mdui-ripple">books</a>
          <a href="#example2-tab8" class="mdui-ripple">flights</a>
          <a href="#example2-tab9" class="mdui-ripple">apps</a>
          <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
        </div>

Allineamento centrato

All'elemento <div class="mdui-tab"></div> aggiungendo la classe .mdui-tab-centered, il tab viene centrato su tablet/PC.

Esempio


        <div class="mdui-tab mdui-tab-centered" mdui-tab>
          <a href="#example3-tab1" class="mdui-ripple">web</a>
          <a href="#example3-tab2" class="mdui-ripple">shopping</a>
          <a href="#example3-tab3" class="mdui-ripple">videos</a>
        </div>

100% di larghezza

All'elemento <div class="mdui-tab"></div> aggiungendo la classe .mdui-tab-full-width, il tab occupa sempre il 100% della larghezza e ogni tab ha la stessa larghezza.

Esempio


        <div class="mdui-tab mdui-tab-full-width" mdui-tab>
          <a href="#example4-tab1" class="mdui-ripple">web</a>
          <a href="#example4-tab2" class="mdui-ripple">shopping</a>
          <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>

Con icona

Esempio


        <div class="mdui-tab" mdui-tab>
          <a href="#example5-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
          </a>
          <a href="#example5-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
          </a>
          <a href="#example5-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
          </a>
        </div>

Con icona e testo

Esempio


        <div class="mdui-tab" mdui-tab>
          <a href="#example6-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example6-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example6-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Con colore di sfondo

All'elemento <div class="mdui-tab"></div> aggiungendo la classe .mdui-color-[color], è possibile assegnare un colore di sfondo al tab.

Esempio


        <div class="mdui-tab mdui-color-theme" mdui-tab>
          <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Opzione attivata per impostazione predefinita

All'elemento <a> aggiungendo la classe .mdui-tab-active, l'opzione risulta attiva per impostazione predefinita.

Esempio


        <div class="mdui-tab" mdui-tab>
          <a href="#example8-tab1" class="mdui-ripple">web</a>
          <a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
            >shopping</a
          >
          <a href="#example8-tab3" class="mdui-ripple">images</a>
        </div>

Opzione disabilitata

All'elemento <a> aggiungendo l'attributo disabled, l'opzione viene disabilitata.

Esempio


        <div class="mdui-tab" mdui-tab>
          <a href="#example9-tab1" class="mdui-ripple">web</a>
          <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
          <a href="#example9-tab3" class="mdui-ripple">images</a>
        </div>

Modalità d'uso

Chiamata via attributi

Con questo metodo non è necessario scrivere codice JavaScript: basta aggiungere l'attributo mdui-tab="options" all'elemento <div class="mdui-tab"></div> per attivare il componente.

Se il componente è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.

<div class="mdui-tab" mdui-tab>
...
</div>

Chiamata via JavaScript

Istanziazione del componente:

// selector è il selettore CSS o l'elemento DOM dell'elemento .mdui-tab
// options sono i parametri del plugin, vedi l'elenco dei parametri qui sotto
var inst = new mdui.Tab(selector, options);

Esegui

Parametro

Nome	Tipo	Predefinito	Descrizione
`trigger`	`string`	`click`	Metodo di attivazione per cambiare tab. `click`: Cambia al clic `hover`: Cambia al passaggio del mouse
`loop`	`boolean`	`false`	Se abilitare la commutazione ciclica. Se `true`, la chiamata al metodo next quando l'ultima opzione è attiva tornerà alla prima, e la chiamata a prev quando la prima opzione è attiva tornerà all'ultima.

Metodo

Nome metodo	Descrizione
`prev()`	Passa all'opzione precedente
`next()`	Passa all'opzione successiva
`show(index)`	Mostra l'opzione specificata. `index`: Numero di indice o id dell'opzione
`handleUpdate()`	Quando la larghezza dell'elemento genitore cambia, è necessario chiamare questo metodo per riposizionare l'indicatore. Quando nuove opzioni vengono aggiunte dinamicamente al tab, è necessario chiamare questo metodo per rendere effettive le nuove opzioni.

Evento

Nome evento	Descrizione	Target	Parametri
`change.mdui.tab`	L'evento verrà attivato quando si cambia opzione.	`<div class="mdui-tab"></div>`	`event._detail.inst`: Istanza `event._detail.index`: Numero di indice dell'opzione attivata `event._detail.id`: Id del contenuto del tab attivato
`show.mdui.tab`	L'evento verrà attivato quando si passa all'opzione specificata.	`<a></a>`	`event._detail.inst`: Istanza

Elenco classi CSS

Nome classe	Descrizione
`.mdui-tab`	Definisce un componente Tab.
`.mdui-tab-scrollable`	Componente Tab scorrevole.
`.mdui-tab-centered`	Componente Tab con allineamento centrato.
`.mdui-tab-full-width`	Componente Tab al 100% di larghezza.
`.mdui-tab-active`	Opzione in stato attivo.

Grid List

Toolbar