Expandable - Yampi Developer Portal

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

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`title`	`String`	✅	—	Título do cabeçalho clicável da seção.
`height`	`Number`	❌	`53`	Altura em pixels da seção quando colapsada.
`expand`	`Boolean`	❌	`false`	Estado 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étodo	Descriçã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

Slot	Descrição
default	Conteúdo interno exibido quando o painel está expandido.