near_me
Inizia
keyboard_arrow_downlayers
Stile
keyboard_arrow_downwidgets
Componenti
keyboard_arrow_downlocal_mall
Risorse
keyboard_arrow_downÈ disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.
Toolbar
La Toolbar è un insieme di componenti disposti in orizzontale che può contenere elementi come testo, link, pulsanti, pulsanti con icona, ecc.
Modalità d'uso
Il componente toolbar è scritto in puro CSS, basta scrivere il codice HTML per renderlo effettivo.
Colori
Il valore predefinito è uno sfondo trasparente, aggiungendo la classe .mdui-color-[color] è possibile impostare il colore di sfondo.
Stile
Stili di base
Nella toolbar è possibile inserire:
- Testo:
<span>Titolo</span> - Link:
<a href="#">Link</a> - Button:
<a href="#" class="mdui-btn">button</a> - Icon Button:
<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a> - Icona:
<i class="mdui-icon material-icons">menu</i>
L'aggiunta di <div class="mdui-toolbar-spacer"></div> spingerà il contenuto su entrambi i lati di questo elemento verso i bordi.
Esempio
<div class="mdui-toolbar">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<span class="mdui-typo-title">Title</span>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>Esempio
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<span class="mdui-typo-title">Title</span>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>