@empathyco/x-components
Version:
Empathy X Components
43 lines (29 loc) • 1.64 kB
Markdown
---
title: BaseTogglePanel
---
# 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 |
| ---------------------- | -------------------------------------------------------------------------------------------------------- | -------------------------- | ------------------ |
| <code>open</code> | Handles if the panel is rendered. It is used with v-if instead of v-show to get better<br />performance. | <code>boolean</code> | <code></code> |
| <code>animation</code> | Animation component that will be used to animate the panel content. | <code>AnimationProp</code> | <code>'div'</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | -------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Default content | None |
## Examples
Simple panel that receives its open state via prop, which is responsible of rendering default slot
inside a configurable transition.
### Basic usage
Using default slot:
```vue
<BaseTogglePanel :open="true" :animation="collapseFromTop">
<Filters :filters="filters">
<template #default="{ filter }">
<p>{{ filter.label }}</p>
</template>
</Filters>
</BaseTogglePanel>
```