@empathyco/x-components
Version:
Empathy X Components
85 lines (62 loc) • 2.5 kB
Markdown
---
title: CollapseWidth
---
# CollapseWidth
Renders a transition wrapping the element passed in the default slot and animating
it with a width animation.
## Props
| Name | Description | Type | Default |
| ------------------- | ------------------------------------------------------------------------------ | -------------------- | ----------------- |
| <code>appear</code> | Indicates if the transition must be applied on the initial render of the node. | <code>boolean</code> | <code>true</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) to add content to the transition | None |
## Examples
The CollapseWidth component is intended to be used as animation to wrap an element with `v-if` or
`v-show` and animate its width. The animation scales its width from 0 to auto. This transition does not work with components that have horizontal margin, padding, or border. It also depends on the width of the child elements and not the root element.
### Basic usage with `v-if`
```vue
<template>
<CollapseWidth>
<ComponentOrElement v-if="open" />
</CollapseWidth>
</template>
<script setup>
import { ref } from "vue";
import CollapseWidth from "@empathyco/x-components/js/components/animations/collapse-width.vue";
const open = ref(false);
</script>
```
### Usage with `v-show`
```vue
<template>
<CollapseWidth>
<ComponentOrElement v-show="open" />
</CollapseWidth>
</template>
<script setup>
import { ref } from "vue";
import CollapseWidth from "@empathyco/x-components/js/components/animations/collapse-width.vue";
const open = ref(true);
</script>
```
### Example with dynamic content
```vue
<template>
<div>
<button @click="open = !open">Toggle</button>
<CollapseWidth>
<div v-if="open" style="width: 200px; background: #eee;">
Expanded content
</div>
<div v-else style="width: 50px; background: #ccc;">Collapsed content</div>
</CollapseWidth>
</div>
</template>
<script setup>
import { ref } from "vue";
import CollapseWidth from "@empathyco/x-components/js/components/animations/collapse-width.vue";
const open = ref(false);
</script>
```