@empathyco/x-components
Version:
Empathy X Components
38 lines (25 loc) • 1.45 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 it. The animation consists on scale its width size from 0 to auto. This
transition does not work with components that have horizontal margin, padding or border. It also is
dependant of the width of the child elements and not the root element.
Used wrapping a component:
```vue
<CollapseWidth>
<ComponentOrElement v-if="open"/>
</CollapseWidth>
```