usePreferredContrast

類別

瀏覽器

匯出大小

522 B

上次變更

4 個月前

響應式 prefers-contrast 媒體查詢。

示範

原始碼

偏好的對比度

無偏好

用法

import { usePreferredContrast } from '@vueuse/core'

const preferredContrast = usePreferredContrast()

元件用法

此函式也透過 @vueuse/components 套件提供無渲染元件版本。瞭解更多關於用法。

vue

<template>
  <UsePreferredContrast v-slot="{ contrast }">
    Preferred Contrast: {{ contrast }}
  </UsePreferredContrast>
</template>

類型宣告

typescript

export type ContrastType = "more" | "less" | "custom" | "no-preference"
/**
 * Reactive prefers-contrast media query.
 *
 * @see https://vueuse.dev.org.tw/usePreferredContrast
 * @param [options]
 */
export declare function usePreferredContrast(
  options?: ConfigurableWindow,
): ComputedRef<ContrastType>