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

Tabs

Modo de uso

Se puede invocar mediante atributos personalizados (si el componente se genera dinámicamente, es necesario llamar a mdui.mutation() para inicializarlo)
Llamada vía JavaScript

Lectura relacionada

Pautas de diseño de Material Design: componentes - Tabs

Estilo

Estilo base

Aquí tienes una pestaña estándar. En teléfonos ocupa el 100% del ancho y cada opción tiene el mismo ancho; en tabletas/PC se alinea a la izquierda.

Ejemplo


        <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>

Desplazable

Añade la clase .mdui-tab-scrollable a <div class="mdui-tab"> para que las pestañas puedan desplazarse horizontalmente, lo cual suele ser útil cuando hay muchas opciones en dispositivos móviles.

Ejemplo


        <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>

Alineación centrada

Añade la clase .mdui-tab-centered al elemento <div class="mdui-tab"></div> para que las pestañas se alineen al centro en tabletas/PC.

Ejemplo


        <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>

Ancho al 100%

Añade la clase .mdui-tab-full-width al elemento <div class="mdui-tab"></div> para que las pestañas ocupen siempre el 100% del ancho y cada una tenga el mismo tamaño.

Ejemplo


        <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 icono

Ejemplo


        <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 icono y texto

Ejemplo


        <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 color de fondo

Añade la clase .mdui-color-[color] al elemento <div class="mdui-tab"></div> para asignar un color de fondo a las pestañas.

Ejemplo


        <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>

Opción activa por defecto

Añade la clase .mdui-tab-active al elemento <a> para dejar esa opción activa por defecto.

Ejemplo


        <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>

Opción deshabilitada

Añade el atributo disabled al elemento <a> para deshabilitar esa opción.

Ejemplo


        <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>

Modo de uso

Llamada vía atributos

Con este método no necesitas escribir JavaScript. Solo debes añadir el atributo mdui-tab="options" al elemento <div class="mdui-tab"></div> para activar el componente.

Si el componente se genera dinámicamente, entonces es necesario llamar a mdui.mutation() para inicializarlo.

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

Llamada vía JavaScript

Instanciar el componente:

// selector es el selector CSS o un elemento DOM del elemento .mdui-tab
// options son los parámetros del plugin, consulte la lista de parámetros de abajo
var inst = new mdui.Tab(selector, options);

Ejecutar

Parámetro

Nombre	Tipo	Valor por defecto	Descripción
`trigger`	`string`	`click`	Modo de activación al cambiar de pestaña. `click`: cambiar al hacer clic `hover`: cambiar al pasar el cursor
`loop`	`boolean`	`false`	¿Activar cambio circular? Si es `true`, cuando la última opción está activa y se llama al método next, volverá a la primera; cuando la primera está activa y se llama a prev, volverá a la última.

Método

Nombre del método	Descripción
`prev()`	Cambiar a la pestaña anterior
`next()`	Cambiar a la pestaña siguiente
`show(index)`	Mostrar una pestaña concreta. `index`: el índice o el id de la opción
`handleUpdate()`	Cuando cambia el ancho del elemento padre, llama a este método para restablecer la posición del indicador. Cuando se agregan nuevas opciones a la pestaña de forma dinámica, también es necesario llamar a este método para que las nuevas opciones entren en vigor.

Evento

Nombre del evento	Descripción	Objetivo	Parámetros
`change.mdui.tab`	Se dispara el evento cuando cambia la pestaña.	`<div class="mdui-tab"></div>`	`event._detail.inst`: la instancia `event._detail.index`: el índice de la opción activada `event._detail.id`: el id del contenido de la pestaña activada
`show.mdui.tab`	Se dispara el evento cuando se cambia a una pestaña concreta.	`<a></a>`	`event._detail.inst`: la instancia

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-tab`	Definir un componente de pestañas.
`.mdui-tab-scrollable`	Componente de pestañas desplazable.
`.mdui-tab-centered`	Componente de pestañas alineadas al centro.
`.mdui-tab-full-width`	Componente de pestañas de ancho al 100%.
`.mdui-tab-active`	Una opción en estado activo.

Lista de cuadrícula

Toolbar