near_me
Introdução
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downEfeito rippleBotãoBotão de ação flutuanteCampo de seleçãoDivisorPainel colapsávelCampo de textoControles de seleçãoSliderListaControles de listaLista em gradeAbaBarra de ferramentasBarra de aplicativoGaveta de navegaçãoBarra de navegação inferiorCardChipTooltipSnackbarTabelaDiálogoMenuBarra de progresso
local_mall
Recursos
keyboard_arrow_downO novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.
Collapse
O plugin Collapse é usado para recolher ou expandir blocos de conteúdo.
Este plugin não possui estilos próprios, você precisa escrever seus próprios estilos ou usá-lo em conjunto com outros componentes.
Como usar
- (Se o componente for gerado dinamicamente, você precisará chamar
mdui.mutation()para inicialização) - Chamar via JavaScript
Estrutura HTML
Esta é uma estrutura HTML 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>Adicionar a classe .mdui-collapse-item-open permite que o bloco de conteúdo fique expandido por padrão:
<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>Elementos que contenham a classe .mdui-collapse-item-arrow serão invertidos em 180 graus quando o bloco de conteúdo for expandido:
<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>Como usar
Chamar via atributos personalizados
Usando este método, não é necessário escrever código JavaScript. Basta adicionar o atributo mdui-collapse="options" no elemento <div class="mdui-collapse"></div> para ativar este plugin.
Se o componente for gerado dinamicamente, você precisará chamar mdui.mutation() para inicialização.
Exemplo
<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 aninhados -->
<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>Atributos podem ser adicionados aos elementos dentro do Collapse para vincular eventos; esses atributos também podem ser usados ao utilizar chamadas JavaScript.
| Atributo | Descrição |
|---|---|
mdui-collapse-item-close | Clicar neste elemento acionará o evento close.mdui.collapse e fechará o painel em que o elemento está localizado. |
Chamar via JavaScript
Instanciar o plugin:
// selector é o seletor CSS ou o elemento DOM do elemento
// options são os parâmetros do plugin, veja a lista de parâmetros abaixo
var inst = new mdui.Collapse(selector, options);Parâmetro
| Nome do parâmetro | Tipo | Valor padrão | Descrição |
|---|---|---|---|
accordion | boolean | false | Se deve habilitar o efeito sanfona (accordion).
|
Método
| Nome do método | Descrição |
|---|---|
open(item) | Abre o bloco de conteúdo.
|
close(item) | Fecha o bloco de conteúdo.
|
toggle(item) | Alterna o estado do bloco de conteúdo.
|
openAll() | Abre todos os blocos de conteúdo. Este método só é eficaz quando accordion é false. |
closeAll() | Fecha todos os blocos de conteúdo. |
Evento
| Nome do evento | Descrição | Alvo | Parâmetros |
|---|---|---|---|
open.mdui.collapse | O evento será disparado quando o bloco de conteúdo iniciar a animação de abertura. | <div class="mdui-collapse-item"></div> | event._detail.inst: Instância |
opened.mdui.collapse | O evento será disparado quando o bloco de conteúdo terminar a animação de abertura. | ||
close.mdui.collapse | O evento será disparado quando o bloco de conteúdo iniciar a animação de fechamento. | ||
closed.mdui.collapse | O evento será disparado quando o bloco de conteúdo terminar a animação de fechamento. |
Exemplo
<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>