Skip to content

exreplay/responsive-helper

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Responsive Helper

This package is a helper component to determine Bootstrap 4 breakpoints in Vue.js.

Installation

To install the package use one of the following commands:

npm install @averjs/responsive-helper
# OR
yarn add @averjs/responsive-helper

Usage

Register the plugin:

import Vue from 'vue';
import ResponsiveHelper from '@averjs/responsive-helper';

Vue.use(ResponsiveHelper);

Implement it in eg. App.vue:

<template>
    <div id="app">
        <responsive-helper />
        <span v-text="bp" v-if="showSpan"></span>
    </div>
</template>

<script>
    export default {
        computed() {
            bp() {
                return this.$bp.currentBreakpoint();
            }
            showSpan() {
                return this.$bp.down('md');
            }
        }
    }
</script>

The component adds a instance property called $bp. It exposes 3 Methods described below. By wrapping those methods inside a computed property you can make use of reactivity, like shown above.

Options

  • name String (optional) The name for the component.

Props

  • breakpoints Array (optional)
    An array of strings with the breakpoints. Default values are [ 'xs', 'sm', 'md', 'lg', 'xl' ].

Methods

down

Checks if the passed breakpoint is smaller or equal the given breakpoint.

  • bp String (required)
    You can pass a string with the breakpoint you want to check.

  • equals Boolen (optional) Default: true
    Set to false if you dont want the given breakpoint to be included in calculation.

up

The same as down but the other way.

currentBreakpoint

Returns the current breakpoint which is set when the window gets resized.

About

Responsive Vue.js helper for Bootstrap 4

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published