Newlywed Party Monsters

    vue-breakpoints

    1.1.0 • Public • Published

    vue-breakpoints

    Build Status codecov npm vue2 license

    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>
      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

    MIT

    Install

    npm i vue-breakpoints

    DownloadsWeekly Downloads

    847

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    110 kB

    Total Files

    6

    Last publish

    Collaborators

    • apertureless