Overview

#

Provides the following reactive element's size information:

elementHeight

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

elementWidth

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

Provided these reactive properties are typically used when the available space is determined by the layout which should influence reponsive behavior of a child component rather than relying on the overall window size.

Usage

#

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

      export default {
        setup() {
          const {
            elementHeight,
            elementWidth,
          } = useKResponsiveElement();
        }
      };
    

Related

#

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