Resize
Vue Bootstrap 5 Resize
The mdbResize
directive calls the given method every time user resizes the window.
Basic usage
Import the directive from mdb-vue-ui-kit
and add
mdbResize
to the directives
object. Now
you can attach the directive to any html element or component. You can trigger resize event by clicking the button or by resizing the window. Check the console to see the result (F12).
<template>
<MDBBtn class="btn btn-primary" v-mdb-resize="{callback: handleResize}" @click="dispatchResizeEvent">
Dispatch window resize event
</MDBBtn>
</template>
<script>
import { mdbResize, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtn,
},
directives: {
mdbResize,
},
setup() {
const handleResize = () => console.log('Resized example 1!');
const dispatchResizeEvent = () => window.dispatchEvent(new Event("resize"))
return {
handleResize,
dispatchResizeEvent,
}
},
};
</script>
<script setup lang="ts">
import { mdbResize as vMdbResize, MDBBtn } from 'mdb-vue-ui-kit';
const handleResize = () => console.log('Resized example 1!');
const dispatchResizeEvent = () => window.dispatchEvent(new Event("resize"))
</script>
If you need to call the given function not only on resize event, but
also immediately after the directive has been inserted, use
start
modifier
<template>
<MDBBtn class="btn btn-primary" v-mdb-resize="{callback: handleResizeStart, start: true}" @click="dispatchResizeEventStart">
Dispatch window resize event
</MDBBtn>
</template>
<script>
import { mdbResize, MDBBtn } from 'mdb-vue-ui-kit';
export default {
components: {
MDBBtn,
},
directives: {
mdbResize,
},
setup() {
const handleResizeStart = () => console.log('Resized example 2 with start modifier!');
const dispatchResizeEventStart = () => window.dispatchEvent(new Event("resize"))
return {
handleResizeStart,
dispatchResizeEventStart,
}
},
};
</script>
<script setup lang="ts">
import { mdbResize as vMdbResize, MDBBtn } from 'mdb-vue-ui-kit';
const handleResizeStart = () => console.log('Resized example 2 with start modifier!');
const dispatchResizeEventStart = () => window.dispatchEvent(new Event("resize"))
</script>
Resize - API
Import
<script>
import { mdbResize } from 'mdb-vue-ui-kit';
</script>
Properties
Property | Type | Default | Description |
---|---|---|---|
start
|
Boolean | false |
Call function immediately after the directive has been mounted |