fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
2.2 KiB
2.2 KiB
category
| category |
|---|
| Sensors |
useDeviceOrientation
Reactive DeviceOrientationEvent. Provide web developers with information from the physical orientation of the device running the web page.
Usage
import { useDeviceOrientation } from '@vueuse/core';
const { isAbsolute, alpha, beta, gamma } = useDeviceOrientation();
| State | Type | Description |
|---|---|---|
| isAbsolute | boolean |
A boolean that indicates whether or not the device is providing orientation data absolutely. |
| alpha | number |
A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360. |
| beta | number |
A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. |
| gamma | number |
A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. |
You can find more information about the state on the MDN.
Component Usage
<template>
<UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
Alpha: {{ alpha }} Beta: {{ beta }} Gamma: {{ gamma }}
</UseDeviceOrientation>
</template>
Type Declarations
/**
* Reactive DeviceOrientationEvent.
*
* @see https://vueuse.org/useDeviceOrientation
* @param options
*
* @__NO_SIDE_EFFECTS__
*/
export declare function useDeviceOrientation(options?: ConfigurableWindow): {
isSupported: ComputedRef<boolean>;
isAbsolute: ShallowRef<boolean, boolean>;
alpha: Ref<number | null, number | null>;
beta: Ref<number | null, number | null>;
gamma: Ref<number | null, number | null>;
};
export type UseDeviceOrientationReturn = ReturnType<typeof useDeviceOrientation>;