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

Collapse

El complemento Collapse se utiliza para plegar o expandir bloques de contenido.

El propio complemento no incluye ningún estilo; tendrás que escribir tus propios estilos o combinarlo con otros componentes.

Modo de uso

(Si el componente se genera dinámicamente, será necesario llamar a mdui.mutation() para inicializarlo)
Llamada vía JavaScript

Estructura HTML

Esta es la estructura HTML más básica:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Agregar la clase .mdui-collapse-item-open hará que el bloque de contenido esté expandido por defecto:

<div class="mdui-collapse">
  <div class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header"></div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Los elementos que incluyan la clase .mdui-collapse-item-arrow girarán 180 grados cuando el bloque de contenido se expanda:

<div class="mdui-collapse">
  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <div class="mdui-collapse-item-arrow"></div>
    </div>
    <div class="mdui-collapse-item-body"></div>
  </div>
</div>

Modo de uso

Llamada vía atributos

No necesitas escribir código JavaScript con este método. Solo debes agregar el atributo mdui-collapse="options" al elemento <div class="mdui-collapse"></div> para activar este complemento.

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

Ejemplo

<div class="mdui-collapse" mdui-collapse>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item1</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item1 content</p>
      <p>item1 content</p>
      <p>item1 content</p>

      <!-- Elementos anidados -->
      <div class="mdui-collapse" mdui-collapse>
        <div class="mdui-collapse-item">
          <div class="mdui-collapse-item-header">
            <p><a href="javascript:;">subitem1</a></p>
          </div>
          <div class="mdui-collapse-item-body">
            <p>subitem1 content</p>
            <p>subitem1 content</p>
            <p>subitem1 content</p>
          </div>
        </div>
      </div>

    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item2</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item2 content</p>
      <p>item2 content</p>
      <p>item2 content</p>
    </div>
  </div>

  <div class="mdui-collapse-item">
    <div class="mdui-collapse-item-header">
      <p><a href="javascript:;">item3</a></p>
    </div>
    <div class="mdui-collapse-item-body">
      <p>item3 content</p>
      <p>item3 content</p>
      <p>item3 content</p>
    </div>
  </div>

</div>

Dentro de Collapse, se pueden agregar algunos atributos a los elementos para vincular eventos; estos atributos también se pueden utilizar al usar el método de llamada con JavaScript.

Atributo	Descripción
`mdui-collapse-item-close`	Al hacer clic en este elemento se disparará el evento `close.mdui.collapse` y se cerrará el panel al que pertenece el elemento.

Llamada vía JavaScript

Instanciar el complemento:

// selector es el selector CSS del elemento o un elemento DOM
// options son los parámetros del complemento; consulta la lista de parámetros a continuación
var inst = new mdui.Collapse(selector, options);

demo

Parámetro

Nombre	Tipo	Valor por defecto	Descripción
`accordion`	`boolean`	`false`	Activar el efecto acordeón. Cuando es `true`, como máximo puede haber un bloque de contenido abierto; al abrir uno, se cierran los demás. Cuando es `false`, se pueden abrir varios bloques de contenido a la vez.

Método

Nombre del método	Descripción
`open(item)`	Abrir un bloque de contenido. `item`: el índice, el elemento DOM o el selector CSS del bloque de contenido.
`close(item)`	Cerrar un bloque de contenido. `item`: el índice, el elemento DOM o el selector CSS del bloque de contenido.
`toggle(item)`	Cambiar el estado de un bloque de contenido. `item`: el índice, el elemento DOM o el selector CSS del bloque de contenido.
`openAll()`	Abrir todos los bloques de contenido. Este método solo es válido cuando `accordion` es `false`.
`closeAll()`	Cerrar todos los bloques de contenido.

Evento

Nombre del evento	Descripción	Objetivo	Parámetros
`open.mdui.collapse`	El evento se disparará cuando comience la animación de apertura del bloque de contenido.	`<div class="mdui-collapse-item"></div>`	`event._detail.inst`: la instancia
`opened.mdui.collapse`	El evento se disparará cuando finalice la animación de apertura del bloque de contenido.
`close.mdui.collapse`	El evento se disparará cuando comience la animación de cierre del bloque de contenido.
`closed.mdui.collapse`	El evento se disparará cuando finalice la animación de cierre del bloque de contenido.

Más ejemplos

Sublista

Ejemplo

<ul class="mdui-list" mdui-collapse="{accordion: true}">

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">home</i>
    <div class="mdui-list-item-content">Home</div>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">dashboard</i>
    <div class="mdui-list-item-content">Dashboard</div>
  </li>

  <li class="mdui-collapse-item mdui-collapse-item-open">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">people</i>
      <div class="mdui-list-item-content">Audience</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">Language</li>
      <li class="mdui-list-item mdui-ripple">Location</li>
      <li class="mdui-list-item mdui-ripple">New vs Returning</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">device_hub</i>
      <div class="mdui-list-item-content">Acquisition</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Traffic</li>
      <li class="mdui-list-item mdui-ripple">Direct Traffic</li>
      <li class="mdui-list-item mdui-ripple">Search Overview</li>
    </ul>
  </li>

  <li class="mdui-collapse-item">
    <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
      <i class="mdui-list-item-icon mdui-icon material-icons">touch_app</i>
      <div class="mdui-list-item-content">Behavior</div>
      <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <ul class="mdui-collapse-item-body mdui-list mdui-list-dense">
      <li class="mdui-list-item mdui-ripple">Overview</li>
      <li class="mdui-list-item mdui-ripple">All Pages</li>
      <li class="mdui-list-item mdui-ripple">Landing Pages</li>
      <li class="mdui-list-item mdui-ripple">Exit Pages</li>
    </ul>
  </li>

  <li class="mdui-list-item mdui-ripple">
    <i class="mdui-list-item-icon mdui-icon material-icons">shopping_cart</i>
    <div class="mdui-list-item-content">Ecommerce</div>
  </li>

</ul>

Progreso

Headroom