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