El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

App Bar

La barra de aplicaciones suele ubicarse en la parte superior de la página y puede incluir componentes como barras de herramientas o pestañas, entre otros. Una página solo puede tener una barra de aplicaciones.

Modo de uso

El componente de barra de aplicaciones está escrito solo con CSS; basta con escribir el código HTML para que funcione.

Color

La barra de aplicaciones no incluye un color de fondo. Se puede establecer un color de fondo para los elementos secundarios de la barra de aplicaciones (barras de herramientas, pestañas, etc.).

Lectura relacionada

Pautas de diseño de Material Design: Estructura - Barra de aplicaciones

Estilo

Solo con barra de herramientas

Ejemplo

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
</div>

Solo con pestañas

Ejemplo

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

Con barra de herramientas y pestañas

Ejemplo

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

Ejemplo

<div class="mdui-appbar">
  <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>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

Fondo transparente

Es necesario agregar la clase .mdui-shadow-0 para eliminar la sombra de la barra de aplicaciones.

Ejemplo

<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <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>
</div>

Fijar en la parte superior de la página

Agregar la clase .mdui-appbar-fixed al elemento <div class="mdui-appbar"></div> para fijar la barra de aplicaciones en la parte superior de la página y evitar que se desplace con el desplazamiento.

Para que la barra de aplicaciones no cubra el contenido de la página, es necesario agregar una clase al body para aplicar padding-top al body:

.mdui-appbar-with-toolbar: se necesita esta clase cuando la barra de aplicaciones contiene una barra de herramientas.
.mdui-appbar-with-tab: se necesita esta clase cuando la barra de aplicaciones contiene pestañas.
.mdui-appbar-with-tab-larger: se necesita esta clase cuando la barra de aplicaciones contiene pestañas con iconos y texto.

Si la barra de aplicaciones contiene elementos distintos de la barra de herramientas y de las pestañas, deberás añadir manualmente el padding-top adecuado al body.

Ejemplo 1 Ejemplo 2 Ejemplo 3

Ocultar automáticamente la barra de aplicaciones

Agregar la clase .mdui-appbar-scroll-hide al elemento <div class="mdui-appbar"></div> para ocultar la barra de aplicaciones al desplazarse hacia abajo por la página y mostrarla al desplazarse hacia arriba.

Si el elemento se genera dinámicamente, debes llamar a mdui.mutation() para inicializarlo.

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>
  </div>
</body>

Ejecutar

Ocultar automáticamente la barra de herramientas dentro de la barra de aplicaciones

Agregar la clase .mdui-appbar-scroll-toolbar-hide al elemento <div class="mdui-appbar"></div> y, cuando la barra de aplicaciones contenga tanto una barra de herramientas como pestañas, ocultar la barra de herramientas al desplazarse hacia abajo y mostrarla al desplazarse hacia arriba.

Si el elemento se genera dinámicamente, debes llamar a mdui.mutation() para inicializarlo.

<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
    <div class="mdui-toolbar">
      ......
    </div>
    <div class="mdui-tab">
      ......
    </div>
  </div>
</body>

Ejecutar

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-appbar`	Definir una barra de aplicaciones.
`.mdui-appbar-fixed`	Hacer que la barra de aplicaciones quede fija en la parte superior de la página.
`.mdui-appbar-with-toolbar`	Se necesita esta clase en el `body` cuando la barra de aplicaciones contiene una barra de herramientas.
`.mdui-appbar-with-tab`	Se necesita esta clase en el `body` cuando la barra de aplicaciones contiene pestañas.
`.mdui-appbar-with-tab-larger`	Se necesita esta clase en el `body` cuando la barra de aplicaciones contiene pestañas con iconos y texto.
`.mdui-appbar-scroll-hide`	Ocultar la barra de aplicaciones al desplazarse hacia abajo por la página y mostrarla al desplazarse hacia arriba.
`.mdui-appbar-scroll-toolbar-hide`	Cuando la barra de aplicaciones contiene tanto una barra de herramientas como pestañas, ocultar la barra de herramientas al desplazarse hacia abajo y mostrarla al desplazarse hacia arriba.

Toolbar

Navigation Drawer