useKResponsiveWindow link to current page

release-v4 | Changelog

Overview
#

Provides the following reactive window's size information:

windowIsSmall, windowIsMedium, and windowIsLarge
Returns true when the window width fits the small, medium, or large breakpoint respectively as defined in Layout: Responsiveness (boolean)
windowHeight
Returns the window height in pixels (integer)
windowWidth
Returns the window width in pixels (integer)
windowBreakpoint
Returns one of the granular breakpoints defined as levels in Layout: Responsiveness (integer, 0-7)

Provided reactive properties are typically used to dynamically drive the layout of components by adjusting inline styles, CSS classes, component visibility, or even swapping out one component for a completely different one.

Usage
#


      import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';

      export default {
        setup() {
          const {
            windowIsSmall,
            windowIsMedium,
            windowIsLarge,
            windowHeight,
            windowWidth,
            windowBreakpoint
          } = useKResponsiveWindow();
        }
      };

Example
#

Consider a Vue file with the following template and script: 


      <div class="box" :style="boxStyle">
        Box 1
      </div>
      <div class="box" :style="boxStyle">
        Box 2
      </div>
    

      import { computed } from '@vue/composition-api';
      import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';

      export default {
        setup() {
          const {
            windowIsLarge
          } = useKResponsiveWindow();

          const boxStyle = computed(function () {
            return { display: windowIsLarge.value ? 'inline-block' : 'block' };
          });

          return { 
            boxStyle,
          };
        }
      };

This results in two boxes that stack vertically on small screens and otherwise display side-by-side:

Window is large: false
Box 1
Box 2

Try adjusting your browser window size to see the example in action.

Related
#