vue-breakpoints
Vue.js utility component to show and hide components based on breakpoints
📺 Demo
🔧 Install
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> 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: 744medium: 1128large: 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.