@gondel/plugin-media-queries
v1.2.8
Published
Provide a custom gondel event which will fire once a given media query is met
Downloads
1,622
Readme
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
.