@empathyco/x-components
Version:
Empathy X Components
49 lines (35 loc) • 1.93 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 for rendering the default slot inside a configurable transition.
### Basic usage
```vue
<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>
```