useScreenSafeArea
Reactive env(safe-area-inset-*)
Demo
top:
right:
bottom:
left:
Usage
import { useScreenSafeArea } from '@vueuse/core'
const {
top,
right,
bottom,
left,
} = useScreenSafeArea()
import { useScreenSafeArea } from '@vueuse/core'
const {
top,
right,
bottom,
left,
} = useScreenSafeArea()
Component
This function also provides a renderless component version via the@vueuse/components package. Learn more about the usage. <UseScreenSafeArea top right bottom left>content</UseScreenSafeArea>
<UseScreenSafeArea top right bottom left>content</UseScreenSafeArea>
Type Declarations
/**
* Reactive `env(safe-area-inset-*)`
*
* @see https://vueuse.org/useScreenSafeArea
*/
export declare function useScreenSafeArea(): {
top: Ref<string>
right: Ref<string>
bottom: Ref<string>
left: Ref<string>
update: () => void
}
/**
* Reactive `env(safe-area-inset-*)`
*
* @see https://vueuse.org/useScreenSafeArea
*/
export declare function useScreenSafeArea(): {
top: Ref<string>
right: Ref<string>
bottom: Ref<string>
left: Ref<string>
update: () => void
}
Source
Contributors
Anthony Fu
Jelf