Skip to content
On this page

useScreenSafeArea

Category
Last Changed
a month ago

Reactive env(safe-area-inset-*)

image

Demo

source

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

SourceDemoDocs

Contributors

Anthony Fu
Jelf

Changelog

v7.3.0 on 12/12/2021
3de76 - feat(useSafeArea): new function (#985)
useScreenSafeArea has loaded