Overview

#

Once added to a component it 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 more granular breakpoints defined as levels in Layout: Responsiveness (integer, 0-7)

Usage

#

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.

As mixin

It can be imported as KResponsiveWindowMixin. As with any other mixin, you need to register it in the script part of a component file:

      import KResponsiveWindowMixin from 'kolibri-design-system/lib/KResponsiveWindowMixin';

      export default {
        mixins: [KResponsiveWindowMixin]
      };
    

Provided reactive properties can then be accessed on the component instance via this.

Example

#

Consider a Vue file with this in its template and script:

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

        computed: {
          boxStyle() {
            if (this.windowIsLarge) {
              return { display: 'inline-block' };
            }
            return { display: 'block' };
          },
        },
      

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 KResponsiveElement if you need a component's size reactive information rather than that of the window