UxStretchBox
components/ux/StretchBox.vue
Animated container that measures and smoothly stretches to fit its content dimensions.
This content is measured and animated.
components/ux/StretchBox.vue
Usage
<UxStretchBox
:watch = "watch"
:transition = "true"
:stretchToContainer = "false"
:stretchWidth = "true"
:stretchHeight = "true"
:minWidth = "0"
:minHeight = "0"
>
Content here
</UxStretchBox>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| watch | any | '' | Value to watch for re-measurement |
| transition | Boolean | true | Enable smooth transitions |
| stretchToContainer | Boolean | false | Stretch to parent container size |
| stretchWidth | Boolean | true | Animate width |
| stretchHeight | Boolean | true | Animate height |
| minWidth | Number | 0 | Minimum width in px |
| minHeight | Number | 0 | Minimum height in px |
Slots
| Slot | Description |
|---|---|
| default | Content to measure and stretch around |