🗜 Vue AdaptableDiv
A Vue
<div>component that transitionally adapts to the size of its children.
💁🏼♂️ Introduction
AdaptableDiv is a straightforward Vue component that wraps child nodes in a <div> and watches them for size changes. The containing element is then sized to match with optional transitions! The core idea is to improve UX for use-cases where content dynamically updates or conditionally hides and shows—such as an accordian menu.
Currently this module only detects and reacts to the height of child nodes. The same behavior for width is coming soon once I have time to troubleshoot a few edge cases related to responsiveness.
🔗 Installation
Install via yarn (recommended):
yarn add vue-adaptable-divInstall via npm:
npm install vue-adaptable-div
🛠️ Usage
Importing
In TypeScript or ES6+:
import { AdaptableDiv } from 'vue-adaptable-div';In UMD (using AdaptableDiv via a <script> tag):
const AdaptableDiv = VueAdaptableDiv.AdaptableDiv;
Vue.Component('adaptable-div', AdaptableDiv);Props
| Name | Type | Default Value | Description |
|---|---|---|---|
transitionDuration |
Number |
200 |
Maps to the CSS property transition-duration. Units are in milliseconds. |
transitionTimingFunction |
String |
"ease" |
Maps to the CSS property transition-timing-function. |
transitionDelay |
String |
0 |
Maps to the CSS property transition-delay. Units are in milliseconds. |
noTransition |
Boolean |
false |
If true, no CSS transition is applied to size changes. |
