Skip to main content
Container colapsável com transição suave de altura. Em mobile, pode iniciar expandido ou colapsado; em desktop, exibe o conteúdo completo sem colapso.

​
Uso

<Expandable title="Formas de pagamento" :expand="false" :height="53">
  <ul>
    <li>PIX</li>
    <li>Cartão de crédito</li>
    <li>Boleto</li>
  </ul>
</Expandable>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
titleString✅—Título do cabeçalho clicável da seção.
heightNumber❌53Altura em pixels da seção quando colapsada.
expandBoolean❌falseEstado inicial em mobile: true para aberto, false para fechado.

​
Métodos públicos

O componente expõe métodos para controle programático via ref:
MétodoDescrição
open()Expande o painel.
close()Colapsa o painel.
reverse()Alterna entre aberto e fechado.
<Expandable ref="menu" title="Menu">...</Expandable>

<!-- Em algum método -->
this.$refs.menu.open()

​
Slots

SlotDescrição
defaultConteúdo interno exibido quando o painel está expandido.