usePreferredReducedMotion

カテゴリ

ブラウザ

エクスポートサイズ

557 バイト

最終変更日

先週

リアクティブな prefers-reduced-motion メディアクエリ。

デモ

ソース

モーション設定

設定なし

使用方法

import { usePreferredReducedMotion } from '@vueuse/core'

const preferredMotion = usePreferredReducedMotion()

コンポーネントでの使用方法

この関数は、@vueuse/components パッケージを介してレンダーレスコンポーネントバージョンも提供します。使用方法の詳細はこちら。

vue

<template>
  <UsePreferredReducedMotion v-slot="{ motion }">
    Preferred Reduced Motion: {{ motion }}
  </UsePreferredReducedMotion>
</template>

型宣言

typescript

export type ReducedMotionType = "reduce" | "no-preference"
/**
 * Reactive prefers-reduced-motion media query.
 *
 * @see https://vueuse.dokyumento.jp/usePreferredReducedMotion
 * @param [options]
 */
export declare function usePreferredReducedMotion(
  options?: ConfigurableWindow,
): ComputedRef<ReducedMotionType>