螢幕外掛 | Quasar 框架

Screen Plugin

Quasar 螢幕外掛程式讓您在處理 Javascript 程式碼時，能夠擁有動態且反應靈敏的 UI。若效能允許，建議改用響應式 CSS 類別，以提升效能。

Usage

請注意下方的 $q.screen。這只是一個簡單的用法範例。

<q-list :dense="$q.screen.lt.md">
  <q-item>
    <q-item-section>John Doe</q-item-section>
  </q-item>

  <q-item>
    <q-item-section>Jane Doe</q-item-section>
  </q-item>
</q-list>

// script part of a Vue component
import { useQuasar } from 'quasar'
import { computed } from 'vue'

export default {
  setup () {
    const $q = useQuasar()
    const buttonColor = computed(() => {
      return $q.screen.lt.md
        ? 'primary'
        : 'secondary'
    })

    return { buttonColor }
  }
}

我們也可以在 Vue 元件之外使用螢幕外掛程式

import { Screen } from 'quasar'

// Screen.gt.md
// Screen.md
// Screen.name ('xs', 'sm', ...)

Body classes

如果您啟用它（請參閱下方範例之後的說明），您也可以根據應用於 document.body 的特定 CSS 類別來設定內容樣式：screen--xs、screen--sm、…、screen-xl。

body.screen--xs {
  .my-div {
    color: #000;
  }
}

body.screen--sm {
  .my-div {
    color: #fff;
  }
}

或是在 Sass 中使用更棒的變體

.my-div
  body.screen--xs &
    color: #000
  body.screen--sm &
    color: #fff

How to enable body classes

為了啟用上述行為，請如下所示編輯您的 /quasar.config 檔案。請注意，這會稍微增加首次有效繪製 (First Meaningful Paint) 的時間。

framework: {
  config: {
    screen: {
      bodyClasses: true // <<< add this
    }
  }
}

Configuration

有幾種方法可以用來調整螢幕外掛程式的運作方式

Method	Description	Example
setSizes(Object)	變更視窗斷點；但「不會」同時變更 CSS 斷點。	setSizes({ lg: 1024, xl: 2000 })
setDebounce(Number)	將預設的 100 毫秒防抖延遲 (debounce) 變更為其他值。	setDebounce(500) // 500ms

Examples

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })
}

import { Screen } from 'quasar'
Screen.setSizes({ sm: 300, md: 500, lg: 1000, xl: 2000 })

Caught a mistake?Edit this page in browser

1. Introduction

2. Screen API

3. Usage

4. Body classes

4.1. How to enable body classes

5. Configuration