BaseTogglePanel

Simple panel that receives its open state via prop, which is responsible of rendering default slot inside a configurable transition.

Props

Name	Description	Type	Default
open	Handles if the panel is rendered. It is used with v-if instead of v-show to get better performance.	boolean
animation	Animation component that will be used to animate the panel content.	AnimationProp	'div'

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Default content	None

Examples

Simple panel that receives its open state via prop, which is responsible for rendering the default slot inside a configurable transition.

Basic usage

<template>
  <BaseTogglePanel :open="true" :animation="animation">
    <Filters :filters="filters">
      <template #default="{ filter }">
        <p>{{ filter.label }}</p>
      </template>
    </Filters>
  </BaseTogglePanel>
</template>
<script setup>
import { BaseTogglePanel } from '@empathyco/x-components'
import { CollapseFromTop } from '@empathyco/x-components/animations'
const animation = CollapseFromTop
const filters = [{ label: 'Color' }, { label: 'Size' }, { label: 'Brand' }]
</script>