A plugin for responsive handling with vue.js
(WIP)
This Plugin adds the ability to hide or show html-elements relative to the screen width. To specify when an element should be hidden it’s necessary to define screen-widths as hidden or visible. As default everything is visible, possible parameters for bootstrap 4 breakpoints are:
hiden-all: This parameter hides the element in every resolution and has to be overriden in certain widths. Which results in combinations like: "['hidden-all','xs']"
=> The element is only visible at an extra small width (smartphones).
hidden-xs: The element is only hidden when the screen width is extra small but not on any larger width.
hidden-sm: The element is only hidden when the screen width is small but not on any smaller or larger width.
hidden-md: The element is only hidden when the screen width is medium but not on any smaller or larger width.
hidden-lg: The element is only hidden when the screen width is large but not on any smaller or larger width.
hidden-xl: The element is only hidden when the screen width is extra large but not on any smaller width. This parameter is not available when using bootstrap 3 breakpoints.
The parameter name without hidden makes the element visible, hidden-all is necessary in that case.
Of course the parameters can be combined. For instance:
<p v-responsiveness ="['hidden-sm', 'hidden-md', 'hidden-lg', 'hidden-xl']">
Text for extra small
</p>