@empathyco/x-components
Version:
Empathy X Components
57 lines (42 loc) • 1.25 kB
Markdown
---
title: ChangeHeight
---
# ChangeHeight
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | None |
## Examples
The ChangeHeight component automatically animates the height of its content when it changes size.
### Basic usage:
```vue
<template>
<ChangeHeight>
<div>Content whose height will be animated</div>
</ChangeHeight>
</template>
<script setup>
import ChangeHeight from "@empathyco/x-components/js/components/animations/change-height.vue";
</script>
```
### Example with dynamic content:
```vue
<template>
<div>
<button @click="expanded = !expanded">Toggle</button>
<ChangeHeight>
<div v-if="expanded" style="height: 200px; background: #eee;">
Expanded content
</div>
<div v-else style="height: 50px; background: #ccc;">
Collapsed content
</div>
</ChangeHeight>
</div>
</template>
<script setup>
import { ref } from "vue";
import ChangeHeight from "@empathyco/x-components/js/components/animations/change-height.vue";
const expanded = ref(false);
</script>
```