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:

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

Related

#

• Layout: Responsiveness has an overview of breakpoints
• See useKResponsiveElement if you need a component's size reactive information rather than that of the window