O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Painel colapsável

Como usar

Através da chamada de atributo personalizado (se o componente for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização)
Chamar via JavaScript

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Painéis de expansão

Estilo

Estrutura HTML completa

Este exemplo contém todos os elementos HTML que podem ser incluídos.

Exemplo

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

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Trip name</div>
      <div class="mdui-panel-item-summary">Carribean cruise</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Location</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">
      <div class="mdui-panel-item-title">Start and end dates</div>
      <div class="mdui-panel-item-summary">Start date: Feb 29, 2016</div>
      <div class="mdui-panel-item-summary">End date: Not set</div>
      <i class="mdui-panel-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
    </div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <div class="mdui-panel-item-actions">
        <button class="mdui-btn mdui-ripple" mdui-panel-item-close>cancel</button>
        <button class="mdui-btn mdui-ripple">save</button>
      </div>
    </div>
  </div>

</div>

Estrutura HTML mínima

Alguns elementos no exemplo acima não são obrigatórios. O exemplo abaixo contém apenas os elementos HTML obrigatórios.

Exemplo

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

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Itens de painel abertos por padrão

Adicione a classe .mdui-panel-item-open ao elemento <div class="mdui-panel-item"></div> para que o item do painel fique aberto por padrão.

Exemplo

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

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item mdui-panel-item-open">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Remover o espaçamento do painel

Adicione a classe .mdui-panel-gapless ao elemento <div class="mdui-panel"></div> para remover o espaçamento entre o painel aberto e os outros painéis.

Exemplo

<div class="mdui-panel mdui-panel-gapless" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Painel popout

Adicione a classe .mdui-panel-popout ao elemento <div class="mdui-panel"></div> para dar ao painel aberto um efeito popout.

Exemplo

<div class="mdui-panel mdui-panel-popout" mdui-panel>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>

  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>

</div>

Painel aninhado

Painéis de expansão podem ser aninhados entre si.

Exemplo

<div class="mdui-panel" mdui-panel>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>

      <!-- Primeiro painel de expansão aninhado -->
      <div class="mdui-panel" mdui-panel>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">First</div>
          <div class="mdui-panel-item-body">
            <p>First content</p>
            <p>First content</p>
            <p>First content</p>

            <!-- Segundo painel de expansão aninhado -->
            <div class="mdui-panel" mdui-panel>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">First</div>
                <div class="mdui-panel-item-body">
                  <p>First content</p>
                  <p>First content</p>
                  <p>First content</p>
                </div>
              </div>
              <div class="mdui-panel-item">
                <div class="mdui-panel-item-header">Second</div>
                <div class="mdui-panel-item-body">
                  <p>Second content</p>
                  <p>Second content</p>
                  <p>Second content</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="mdui-panel-item">
          <div class="mdui-panel-item-header">Second</div>
          <div class="mdui-panel-item-body">
            <p>Second content</p>
            <p>Second content</p>
            <p>Second content</p>
          </div>
        </div>
      </div>

    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Como usar

Chamar via atributos personalizados

Ao usar este método, não é necessário escrever código JavaScript. Basta adicionar o atributo mdui-panel="options" ao elemento <div class="mdui-panel"></div> para ativar o plugin.

Se o componente for gerado dinamicamente, é necessário chamar mdui.mutation() para inicialização.

Exemplo

<div class="mdui-panel" mdui-panel="{accordion: true}">
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">First</div>
    <div class="mdui-panel-item-body">
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
      <p>First content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Second</div>
    <div class="mdui-panel-item-body">
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
      <p>Second content</p>
    </div>
  </div>
  <div class="mdui-panel-item">
    <div class="mdui-panel-item-header">Third</div>
    <div class="mdui-panel-item-body">
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
      <p>Third content</p>
    </div>
  </div>
</div>

Atributos podem ser adicionados aos elementos dentro do painel de expansão para vincular eventos. Esses atributos também podem ser usados ao chamar via JavaScript.

Atributo	Descrição
`mdui-panel-item-close`	Clicar neste elemento acionará o evento `close.mdui.panel` e fechará o item do painel onde o elemento está localizado.

Chamar via JavaScript

Instanciando o componente:

// selector é o seletor CSS ou elemento DOM do elemento .mdui-panel
// options são os parâmetros do plugin, veja a lista de parâmetros abaixo
var inst = new mdui.Panel(selector, options);

Executar

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`accordion`	`boolean`	`false`	Se deve ativar o efeito acordeão. Quando `true`, apenas um item do painel pode estar aberto por vez. Abrir um item do painel fechará os outros. Quando `false`, vários itens do painel podem ser abertos simultaneamente.

Método

Nome do método	Descrição
`open(item)`	Abre o item do painel. `item`: o número do índice do item do painel, ou elemento DOM, ou seletor CSS.
`close(item)`	Fecha o item do painel. `item`: o número do índice do item do painel, ou elemento DOM, ou seletor CSS.
`toggle(item)`	Alterna o estado do item do painel. `item`: o número do índice do item do painel, ou elemento DOM, ou seletor CSS.
`openAll()`	Abre todos os itens do painel. Este método só é válido quando `accordion` é `false`.
`closeAll()`	Fecha todos os itens do painel.

Evento

Nome do evento	Descrição	Alvo	Parâmetros
`open.mdui.panel`	O evento será disparado quando o item do painel começar a animação de abertura.	`<div class="mdui-panel-item"></div>`	`event._detail.inst`: Instância
`opened.mdui.panel`	O evento será disparado quando o item do painel terminar a animação de abertura.
`close.mdui.panel`	O evento será disparado quando o item do painel começar a animação de fechamento.
`closed.mdui.panel`	O evento será disparado quando o item do painel terminar a animação de fechamento.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-panel`	Define um painel de expansão.
`.mdui-panel-gapless`	Remove o espaçamento entre o painel aberto e os outros painéis.
`.mdui-panel-popout`	Dá ao painel aberto um efeito popout.
`.mdui-panel-item`	Define um item de um painel de expansão.
`.mdui-panel-item-open`	Faz com que o item do painel seja aberto por padrão.
`.mdui-panel-item-header`	Define o cabeçalho de um item do painel.
`.mdui-panel-item-title`	Define o título do cabeçalho do item do painel.
`.mdui-panel-item-summary`	Define o resumo do cabeçalho do item do painel.
`.mdui-panel-item-arrow`	Define o ícone de expansão/recolhimento do item do painel.
`.mdui-panel-item-body`	Define o conteúdo do item do painel.
`.mdui-panel-item-actions`	Define a barra de ações do item do painel.

Divisor

Campo de texto