@eli5/bootstrap-breakpoints-vue

Use bootstrap breakpoints as Vue.js directive inside your templates.

Showing:

Popularity

Downloads/wk

116

GitHub Stars

2

Maintenance

Last Commit

4yrs ago

Contributors

2

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

bootstrap-breakpoints-vue

Use bootstrap breakpoints as Vue.js directive inside your templates.

Based on: Bootstrap V4 Download on NPMJS

Breakpoints are:

  • xs: 0
  • sm: 576
  • md: 768
  • lg: 992
  • xl: 1200

Installation

This Vue plugin can be installed via npm or yarn

npm

npm install @eli5/bootstrap-breakpoints-vue

yarn

yarn add @eli5/bootstrap-breakpoints-vue

Initialization

import Vue from 'vue.js'
import breakpoints from '@eli5/bootstrap-breakpoints-vue'
Vue.use(breakpoins);

Usage

Inside template

Down

  <span v-if="$mediaBreakpointDown('xs')"></span>
  <span v-if="$mediaBreakpointDown('sm')"></span>
  <span v-if="$mediaBreakpointDown('md')"></span>
  <span v-if="$mediaBreakpointDown('lg')"></span>
  <span v-if="$mediaBreakpointDown('xl')"></span>

Up

  <span v-if="$mediaBreakpointUp('xs')"></span>
  <span v-if="$mediaBreakpointUp('sm')"></span>
  <span v-if="$mediaBreakpointUp('md')"></span>
  <span v-if="$mediaBreakpointUp('lg')"></span>
  <span v-if="$mediaBreakpointUp('xl')"></span>

Only

  <span v-if="$mediaBreakpointOnly('xs')"></span>
  <span v-if="$mediaBreakpointOnly('sm')"></span>
  <span v-if="$mediaBreakpointOnly('md')"></span>
  <span v-if="$mediaBreakpointOnly('lg')"></span>
  <span v-if="$mediaBreakpointOnly('xl')"></span>

Between

  <span v-if="$mediaBreakpointBetween('xs', 'sm')"></span>
  <span v-if="$mediaBreakpointBetween('sm', 'md')"></span>
  <span v-if="$mediaBreakpointBetween('md', 'lg')"></span>
  <span v-if="$mediaBreakpointBetween('lg', 'xl')"></span>

Inside script

Down

  this.$mediaBreakpointDown('xs')
  this.$mediaBreakpointDown('sm')
  this.$mediaBreakpointDown('md')
  this.$mediaBreakpointDown('lg')
  this.$mediaBreakpointDown('xl')

Up

  this.$mediaBreakpointUp('xs')
  this.$mediaBreakpointUp('sm')
  this.$mediaBreakpointUp('md')
  this.$mediaBreakpointUp('lg')
  this.$mediaBreakpointUp('xl')

Only

  this.$mediaBreakpointOnly('xs')
  this.$mediaBreakpointOnly('sm')
  this.$mediaBreakpointOnly('md')
  this.$mediaBreakpointOnly('lg')
  this.$mediaBreakpointOnly('xl')

Between

  this.$mediaBreakpointBetween('xs', 'sm')
  this.$mediaBreakpointBetween('sm', 'md')
  this.$mediaBreakpointBetween('md', 'lg')
  this.$mediaBreakpointBetween('lg', 'xl')

Get window width

  this.$bootstrap.width

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100