Collapse

Used to create regions of content that can expand/collapse with a basic animation. It helps to hide content that's not immediately relevant to user.

Import

import { MpCollapse } from '@mekari/pixel3'

Playground

Collapse content

<script setup lang="ts">
  import { MpButton, MpCollapse, MpText } from '@mekari/pixel3'
  import { ref } from 'vue'

  const isOpen = ref(false)
</script>

<template>
  <div>
    <MpButton @click="isOpen = !isOpen" style="margin-bottom: 8px"> Show content </MpButton>

    <MpCollapse :is-open="isOpen">
      <MpText>Collapse content</MpText>
    </MpCollapse>
  </div>
</template>

API

MpCollapse

Props

Events

Slots

Name	Type	Default
is-open If true, content will be visible	boolean	false
duration Animation duration of collapse.	number	250
is-animate-opacity If true, content will be animated.	boolean	true
easing Animation type of collapse.	string	easeInOutSine
starting-height Height of closed collapse.	number	-
ending-height Content height of open collapse.	number	-