Overview

#

Once added to a component it provides the following reactive component's size information:

elementHeight

The component's element $el height in pixels (integer)

elementWidth

The component's element $el width in pixels (integer)

Usage

#

When compared to KResponsiveWindow, KResponsiveElement can be suitable when it's the available space determined by the layout which should influence reponsive behavior of a child component rather than relying on the overall window size.

As mixin

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

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

      export default {
        mixins: [KResponsiveElementMixin]
      };
    

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

Guidelines

#

• Due to performance issues (Kolibri #8124), using KResponsiveElement in larger numbers on one page is currently discouraged

Related

#

• See KResponsiveWindow if you need the window's size reactive information rather than that of a component