🗜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-div

Install 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. |