MediaQueries Plugin
Installation
import {initMediaQueriesPlugin} from '@gondel/plugin-media-queries';
initMediaQueriesPlugin({
breakPoints: {
xxsmall: 480,
xsmall: 768,
small: 992,
medium: 1240,
large: 1440,
xlarge: 1920,
xxlarge: Infinity,
}
});Please note: the provided breakpoints need to be the maximum value of each viewport in px.
Viewport entered
import { VIEWPORT_ENTERED } from '@gondel/plugin-media-queries';The general viewport entered event is fired if the viewport switches into one of the provided breakpoints
@EventListener(VIEWPORT_ENTERED)
handleViewportChange(event) {
console.log(event.viewport);
}Restrict to certain viewport
Additionally, the event listener can be restricted to just one specific viewport
@EventListener(VIEWPORT_ENTERED, 'medium')
handleViewportChange(event) {
console.log('You are now on the medium viewport');
}getCurrentViewport
import { getCurrentViewport } from '@gondel/plugin-media-queries';Additionally you can always get the current viewport name by using the
getCurrentViewport helper.
start() {
console.log(getCurrentViewport());
// output's e.g. "medium"
}Known Issues
The initMediaQueriesPlugin has to be called before you call startComponents.