Adding responsive behavior

Overview

The Shopware 6 Administration provides two ways of adding classes to elements based on their size, the device helper and the v-responsive directive. Alternatively you can use css media queries to make your plugin responsive. Learn how to use css here:

DeviceHelper

The DeviceHelper provides methods to get device and browser information like the current viewport size. The helper methods can be accessed with this.$device in every Vue component, since it is bound to the Vue prototype.

It makes it possible to run functions to react to onResize events with adding classes or removing them. The example below shows you how to use the $device.onResize helper.

const listener = function (ev) {
// do something on resize with the event, like adding or removing classes to elements
};
const scope = this;
const component = 'sw-basic-example';
this.$device.onResize({ listener, scope, component });

The code snippet before could be placed in the mounted Vue lifecycle hook to register those listeners automatically. Then you can automatically remove the listeners in the onDestroy hook

this.$device.removeResizeListener(component);

It also provides many helper functions e.g. to get the screen dimensions. Although there are many more as seen below:

Function

Description

this.$device.getViewportWidth();

Gets the viewport width

this.$device.getViewportHeight();

Gets the viewport height

this.$device.getDevicePixelRatio();

Gets the device pixel ratio

this.$device.getScreenWidth();

Gets the screen width

this.$device.getScreenHeight();

Gets screen height

this.$device.getScreenOrientation();

Gets the screen orientation

v-responsive directive

The v-responsive directive can be used to dynamically apply classes based on an element's dimensions.

<input v-responsive="{ 'is--compact': el => el.width <= 1620, timeout: 200 }">

Let's do a small explanation of this directive:

  • Apply class (in this case: is--compact) when the width of the element is smaller than 1620px.

  • timeout: Sets the duration on how much the throttle should wait.