apertureless / Vue Breakpoints
Licence: mit
π¬ π Vue.js utility component to show and hide components based on breakpoints
Stars: β 179
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Breakpoints
React Native Fit Image
Responsive image component to fit perfectly itself.
Stars: β 539 (+201.12%)
Mutual labels: component, responsive
Element Queries Spec
A spec for a Container-Style Element Query Syntax
Stars: β 375 (+109.5%)
Mutual labels: component, responsive
React Native Scalable Image
React Native Image component which scales width or height automatically to keep the original aspect ratio
Stars: β 241 (+34.64%)
Mutual labels: component, responsive
Container Query
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
Stars: β 119 (-33.52%)
Mutual labels: component, responsive
React Component Echarts
React component echarts. η»δ»ΆεΌηΎεΊ¦εΎθ‘¨γ
Stars: β 175 (-2.23%)
Mutual labels: component
Noodel Js
User interface for responsive, dynamic content trees
Stars: β 173 (-3.35%)
Mutual labels: responsive
React Twitter Embed
Simplest way to add twitter widgets to your react project.
Stars: β 171 (-4.47%)
Mutual labels: component
Magnify
πΌ A jQuery plugin to view images just like in Windows. Browser support IE7+!
Stars: β 177 (-1.12%)
Mutual labels: responsive
React Native Gradient Buttons
A lightweight, customizable and haptic Gradient Button component for React Native
Stars: β 174 (-2.79%)
Mutual labels: component
Flutter Web Demo
π Responsive web app powered by Flutter and Dart
Stars: β 173 (-3.35%)
Mutual labels: responsive
Shuffle
Categorize, sort, and filter a responsive grid of items
Stars: β 2,170 (+1112.29%)
Mutual labels: responsive
Vuetable 2 With Laravel 5.4
Sample project using Vuetable-2 in Laravel 5.4 and Laravel-Mix
Stars: β 178 (-0.56%)
Mutual labels: component
Cassette
πΌ A flexible media player component library for React that requires no up-front config
Stars: β 171 (-4.47%)
Mutual labels: responsive
Slider
Touch swipe image slider/slideshow/gallery/carousel/banner mobile responsive bootstrap
Stars: β 2,046 (+1043.02%)
Mutual labels: responsive
React Elastic Carousel
A flexible and responsive carousel component for react https://sag1v.github.io/react-elastic-carousel
Stars: β 173 (-3.35%)
Mutual labels: responsive
vue-breakpoints
Vue.js utility component to show and hide components based on breakpoints
πΊ Demo
π§ Install
npm i vue-breakpoints
yarn add vue-breakpoints
π Usage
<template>
<nav>
<hide-at breakpoint="medium">
<mobile-nav />
</hide-at>
<show-at breakpoint="mediumAndAbove">
<desktop-nav>
</show-at>
</nav>
</template>
<script>
import {showAt, hideAt} from 'vue-breakpoints'
export default {
components: { hideAt, showAt }
}
</script>
Breakpoints
You can pass following values as a breakpoint:
- small
- mediumAndBelow
- medium
- mediumAndAbove
- largeAndBelow
- large
Default Breakpoints
Default breakpoints are
small: 744,
medium: 1128,
large: Infinity
but they can be overwritten if you pass an object to the breakpoints
prop.
<show-at :breakpoints="{small: 620, medium: 1280, large: 1600}" breakpoint="medium">
Props
prop | default | type | description |
---|---|---|---|
breakpoints | undefined | Object | Important that if you pass the object you only use small , medium and large as the childs. |
breakpoint | '' | String | Breakpoint where it should show or hide small , mediumAndBelow , medium , mediumAndAbove , largeAndBelow , large
|
π Changelog
Details changes for each release are documented in the CHANGELOG.md.
βοΈ Issues
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
πͺ Contribution
Please make sure to read the Contributing Guide and Code of Conduct before making a pull request.
Β©οΈ License
Support
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].