breakpoint-icon
A simple icon you can put in your Vue app that displays what breakpoint the browser is currently displaying.
Installation
npm i breakpoint-icon --save-dev
or
yarn add breakpoint-icon --dev
Local Registration
You can put it wherever you want, but I would recommend putting it in one of your top-level components, such as App.vue. This way it will show up throughout your app.
<!-- App.vue -->
Global Registration
// main.js;; Vue;
This allows you to add the icon anywhere in your Vue app:
<!-- MyComponent.vue -->
Options
There are several params you can pass in to customize how the icon works
- The
breakpoints
prop is required, while the rest are for optional customization
Breakpoints - Required
Name: breakpoints
Type: Array
Required: true
Specify your breakpoints
name
will display when the browser width is under the specified pixels
Default Position
Name: defaultPosition
Type: Object
Required: false
Default: { y: "bottom", x: "left" }
The icon is displayed in the bottom left corner by default
To change this, use the defaultPosition
prop:
{ return myDefaultPosition: y: "top" x: "right" ; };
Sizes
Name: iconSize
Type: Number or String
Required: false
Default: 40
Name: arrowSize
Type: Number or String
Required: false
Default: 30
Specify the pixel size of the square icon and the arrow buttons
{ return myIconSize: 100 myArrowSize: 50 ; };
Colors
Name: backgroundColor
Type: String
Required: false
Default: "#42b883"
Name: textColor
Type: String
Required: false
Default: "#fff"
Specify the background and text colors of the icon
{ return myBgColor: "rgba(24, 69, 59, 100)" myTextColor: "white" ; };
Z-Index
Name: zIndex
Type: Number or String
Required: false
Default: 99
The default z-index is 99, with the intention of being on top of all elements in the app.
To change this, use the zIndex
prop:
{ return myZIndex: 9001 ; };