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