CollapseCollapse
O componente collapse agrupa e oculta áreas de conteúdo complexas, mantendo a página organizada.
Observe que o componente collapse por si só não possui nenhum estilo; você precisa adicionar estilos manualmente ou usá-lo com outros componentes.
Importe os componentes quando necessário:
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
Importe os tipos TypeScript dos componentes quando necessário:
import type { Collapse } from 'mdui/components/collapse.js';
import type { CollapseItem } from 'mdui/components/collapse-item.js';
Exemplo de uso:
first content
second content
<mdui-collapse>
<mdui-collapse-item header="first header">first content</mdui-collapse-item>
<mdui-collapse-item header="second header">second content</mdui-collapse-item>
</mdui-collapse>
Use o atributo header do componente <mdui-collapse-item> para definir o texto do cabeçalho do painel, ou use o slot header para definir o elemento do cabeçalho. O slot padrão do componente é usado para o conteúdo do painel.
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-collapse>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Fonte
Use o atributo accordion no componente <mdui-collapse> para ativar o modo acordeão, onde apenas um painel pode ficar aberto por vez.
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-collapse accordion>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Fonte
Através do atributo value do componente <mdui-collapse>, você pode obter o painel atualmente aberto ou definir qual painel deve ser aberto.
No modo acordeão, o valor do atributo value é uma string; você pode operar este atributo usando atributos HTML ou propriedades JavaScript. No modo não acordeão, o valor do atributo value é um array, e só pode ser operado por propriedades JavaScript.
Modo acordeão
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
Modo não acordeão
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-list-subheader>Modo acordeão</mdui-list-subheader>
<mdui-collapse accordion value="item-1">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Modo não acordeão</mdui-list-subheader>
<mdui-collapse class="example-value">
<mdui-collapse-item value="item-1">
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item value="item-2">
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
<script>
const collapse = document.querySelector(".example-value");
collapse.value = ["item-1", "item-2"];
</script>
Fonte
Adicionando o atributo disabled ao componente <mdui-collapse>, você pode desabilitar todo o grupo de collapse. Da mesma forma, adicionando o atributo disabled ao componente <mdui-collapse-item>, você pode desabilitar um painel específico.
Desabilitar todos
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
Desabilitar o primeiro painel
Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
<mdui-list>
<mdui-list-subheader>Desabilitar todos</mdui-list-subheader>
<mdui-collapse disabled>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
<mdui-list-subheader>Desabilitar o primeiro painel</mdui-list-subheader>
<mdui-collapse>
<mdui-collapse-item disabled>
<mdui-list-item slot="header" icon="near_me">Item 1</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
<mdui-collapse-item>
<mdui-list-item slot="header" icon="near_me">Item 2</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 2 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Fonte
Por padrão, clicar em toda a área do cabeçalho do painel aciona o collapse. Você pode definir o atributo trigger do componente <mdui-collapse-item> para definir o elemento que aciona o collapse. O atributo trigger pode ser um seletor CSS ou um elemento DOM.
<mdui-list>
<mdui-collapse>
<mdui-collapse-item trigger=".example-trigger">
<mdui-list-item slot="header" icon="near_me">
Item 1
<mdui-icon slot="end-icon" class="example-trigger" name="keyboard_arrow_down"></mdui-icon>
</mdui-list-item>
<div style="margin-left: 2.5rem">
<mdui-list-item>Item 1 - subitem</mdui-list-item>
</div>
</mdui-collapse-item>
</mdui-collapse>
</mdui-list>
Fonte| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|
value | value | | string | - |
O valor deste item de painel expansível.
|
O texto do cabeçalho deste item de painel expansível.
|
disabled | disabled | | boolean | false |
Define se este item de painel expansível está desabilitado.
|
trigger | trigger | | string | HTMLElement | JQ<HTMLElement> | - |
O elemento que, ao ser clicado, aciona a expansão/recolhimento. O valor pode ser um seletor CSS, um elemento DOM ou um objeto JQ. Por padrão, o clique em toda a área do cabeçalho aciona a ação.
|
| Nome |
|---|
open |
Disparado quando o componente começa a abrir.
|
opened |
Disparado quando a animação de abertura é concluída.
|
close |
Disparado quando o componente começa a fechar.
|
closed |
Disparado quando a animação de fechamento é concluída.
|
| Nome |
|---|
| (padrão) |
Conteúdo do corpo do item de painel expansível.
|
Conteúdo do cabeçalho do item de painel expansível.
|
| Nome |
|---|
Conteúdo do cabeçalho do painel expansível.
|
body |
Conteúdo do corpo do painel expansível.
|
| Atributo | Propriedade | Reflect | Tipo | Padrão |
|---|
accordion | accordion | | boolean | false |
Define se o modo acordeão deve ser ativado.
|
value | value | | string | string[] | - |
O valor do <mdui-collapse-item> atualmente expandido.
Nota: O atributo HTML desta propriedade é sempre uma string e só pode definir o valor inicial quando accordion é true; o valor da propriedade JavaScript é uma string quando accordion é true, e um array de strings quando accordion é false. Portanto, quando accordion é false, só é possível alterar este valor modificando a propriedade JavaScript.
|
disabled | disabled | | boolean | false |
Define se este painel expansível está desabilitado.
|
| Nome |
|---|
change |
Disparado quando o item do painel expansível atualmente expandido muda.
|
| Nome |
|---|
| (padrão) |
Componentes <mdui-collapse-item>.
|
Capítulo anterior
CircularProgress Indicador de progresso circular
Próximo capítulo
Dialog Diálogo
