near_me
Primeros pasos
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downlocal_mall
Recursos
keyboard_arrow_downEl nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.
Toolbar
La barra de herramientas es un conjunto de componentes dispuestos horizontalmente que puede incluir texto, enlaces, botones, botones de icono y otros elementos.
Modo de uso
El componente de barra de herramientas está escrito solo con CSS; basta con escribir el código HTML para que funcione.
Color
Por defecto tiene un fondo transparente. Añade la clase .mdui-color-[color] para establecer un color de fondo.
Estilo
Estilo base
En la barra de herramientas se pueden colocar:
- Texto:
<span>Título</span> - Enlaces:
<a href="#">Enlace</a> - Botones:
<a href="#" class="mdui-btn">botón</a> - Botones de icono:
<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a> - Iconos:
<i class="mdui-icon material-icons">menu</i>
Añadir <div class="mdui-toolbar-spacer"></div> empujará los elementos a ambos lados de este elemento hacia los extremos.
Ejemplo
<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>Ejemplo
<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>