breakpoint-icon v1.0.12
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 -->
<template>
<div id="app">
<breakpoint-icon></breakpoint-icon>
</div>
</template>
<script>
import BreakpointIcon from "breakpoint-icon";
export default {
name: "App",
compononents: { BreakpointIcon },
};
</script>
Global Registration
// main.js
import Vue from "vue";
import BreakpointIcon from "breakpoint-icon";
Vue.component("breakpoint-icon", BreakpointIcon);
This allows you to add the icon anywhere in your Vue app:
<!-- MyComponent.vue -->
<template>
<breakpoint-icon></breakpoint-icon>
</template>
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
<script>
export default {
data: function() {
return {
myBreakpoints: [
{
name: "m",
pixels: 800,
},
{
name: "l",
pixels: 1000,
},
{
name: "xl",
pixels: 1300,
},
],
};
},
};
</script>
<breakpoint-icon :breakpoints="myBreakpoints"></breakpoint-icon>
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:
export default {
data: function() {
return {
myDefaultPosition: { y: "top", x: "right" },
};
},
};
<breakpoint-icon :defaultPosition="myDefaultPosition"></breakpoint-icon>
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
export default {
data: function() {
return {
myIconSize: 100,
myArrowSize: 50,
};
},
};
<breakpoint-icon :iconSize="myIconSize" :arrowSize="myArrowSize"></breakpoint-icon>
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
export default {
data: function() {
return {
myBgColor: "rgba(24, 69, 59, 100)",
myTextColor: "white",
};
},
};
<breakpoint-icon :backgroundColor="myBgColor" :textColor="myTextColor"></breakpoint-icon>
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:
export default {
data: function() {
return {
myZIndex: 9001,
};
},
};
<breakpoint-icon :zIndex="myZIndex"></breakpoint-icon>