https://github.com/ktsn/vue-size-provider

Declarative element size observer and provider
https://github.com/ktsn/vue-size-provider

component declarative resize scoped-slot size vue

Last synced: 3 months ago
JSON representation

Declarative element size observer and provider

• Host: GitHub
• URL: https://github.com/ktsn/vue-size-provider
• Owner: ktsn
• License: mit
• Created: 2018-04-09T09:55:54.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-29T12:14:58.000Z (about 2 years ago)
• Last Synced: 2024-09-07T20:14:29.325Z (6 months ago)
• Topics: component, declarative, resize, scoped-slot, size, vue
• Language: JavaScript
• Homepage:
• Size: 5.02 MB
• Stars: 55
• Watchers: 3
• Forks: 2
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-size-provider

Declarative element size observer and provider.

## Motivation

Sometimes you may want to animate an element height when its content is changed. In that case, you need to directly read height value from DOM because Virtual DOM cannot acquire element size. Since it is low-level manipulation, the code would become messier.

vue-size-provider solves this problem by hiding low-level code with abstract helper components - `` and ``. The following gif is an example to show how vue-size-provider works:

![Simple demo of vue-size-provider](vue-size-provider.gif)

## Install

Install it via npm:

```sh

$ npm install vue-size-provider

```

Then, notify Vue to use it:

```js

import Vue from 'vue'

import VueSizeProvider from 'vue-size-provider'

Vue.use(VueSizeProvider)

```

Or you can directly use the components:

```vue

import { SizeProvider, SizeObserver } from 'vue-size-provider'

export default {

  components: {

    SizeProvider,

    SizeObserver

  }

}

```

## Usage

First, wrap elements that you would like to observe their size by ``.

```vue

  

  

    

  

import { SizeProvider, SizeObserver } from 'vue-size-provider'

export default {

  components: {

    SizeProvider,

    SizeObserver

  }

}

```

Then, wrap them by `` and any element that you want to animate its size when the contents size is changed.

```vue

  

  

    


      

      

        

      

    

  


import { SizeProvider, SizeObserver } from 'vue-size-provider'

export default {

  components: {

    SizeProvider,

    SizeObserver

  }

}

```

Finally, you need to write some animation code. In this example, we simply use CSS transition:

```vue

  

  

    


      

      

        

      

    

  


import { SizeProvider, SizeObserver } from 'vue-size-provider'

export default {

  components: {

    SizeProvider,

    SizeObserver

  }

}

.wrapper {

  box-sizing: content-box;

  border: 1px solid #000;

  

  /* animate content height smoothly */

  transition: height 300ms ease-out;

}

```

Note that you may want to specify `box-sizing: content-box;` to the animating element because the provided `width` and `height` are content size of the observed element. i.e. They do not include padding and border size.

## License

MIT