# VResize

Component which provides the calculated width and height to it's default scoped slot. Thit would allow you do update child components based on the actual size of the element, rather than the size of the screen.

Source

# Installation

Globally:

// main.js
import Vue from "vue"
import { VResize } from "vuetensils"

Vue.component("VResize", VResize)

Locally:

<script>
// SomeComponent.vue
import { VResize } from "vuetensils"

export default {
  components: {
    VResize,
  },
  // ...
}
</script>

# Styled Example

Try resizing your browser to see it in action.

<template>
  <VResize>
    <template #default="{ width } ">
      <div
        class="resize-example"
        :class="{
          lg: width > 500,
          md: width > 300 && width < 500,
          sm: width < 300,
        }"
      >
        <img src="https://www.fillmurray.com/200/200" />
        <p>This content is {{ width }}px wide.</p>
      </div>
    </template>
  </VResize>
</template>

<style>
.resize-example {
  display: grid;
  padding: 10px;
  text-align: center;
}
.resize-example img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}
.resize-example.sm {
  justify-content: center;
}
.resize-example.md {
  font-size: 1.5rem;
  justify-content: center;
}
.resize-example.lg {
  grid-template-columns: 150px 1fr;
  grid-gap: 20px;
  align-items: center;
  font-size: 2rem;
}
</style>
Last Updated: 11/19/2019, 5:58:27 AM