Screen Plugin     

The Quasar Screen plugin allows you to have a dynamic and responsive UI when dealing with your Javascript code. When possible, it is recommended to use the responsive CSS classes instead, for performance reasons.

Installation

// quasar.conf.js

framework: {
  plugins: ['Screen']
}

Basic Usage

Notice $q.screen below. This is just a simple usage example.

<q-list :dense="$q.screen.lt.md" :sparse="$q.screen.gt.lg">
  <q-item>
    <q-item-main label="John Doe" />
  </q-item>
  <q-item>
    <q-item-main label="Jim Doe" />
  </q-item>
</q-list>
// script part of a Vue component
export default {
  computed: {
    buttonColor () {
      return this.$q.screen.lt.md
        ? 'primary'
        : 'secondary'
    }
  }
}

We can also use Screen plugin outside of a Vue component:

import { Screen } from 'quasar'

// Screen.gt.md
// Screen.md

Configuration

There are a few methods that can be used to tweak how Screen plugin works:

Method Description Example
setSizes(Object) Change window breakpoints; does NOT also changes CSS breakpoints. setSizes({ lg: 1024, xl: 2000 })
setDebounce(Number) Change the default 100ms debounce to some other value. setDebounce(500) // 500ms

Examples:

// inside a Vue component:
this.$q.screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })

// outside of a Vue component:
import { Screen } from 'quasar'
Screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })

RTL Support Color Palette
Last updated: Sun May 20 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub