Screensaver

Idle-screen overlay with a live clock and date; click to dismiss.

Jump to API reference

Import

Vue
import { UiScreensaver } from '@ziyarago/ui/vue'

Default

Vue
<UiScreensaver
  hint="Tap anywhere to continue"
  :open="open"
  @close="open = false"
 />

Locale

Vue
<UiScreensaver
  locale="en-US"
  hint="Touch to wake"
  :open="open"
  @close="open = false"
 />

API reference

Full-screen idle screen with a large clock, date and the brand mark; show it after inactivity.

Props

PropType and valuesDefaultDescription
openbooleanfalseShows the screensaver when true; renders nothing when false.
localestring'en-GB'BCP 47 locale for the date line.
hintstring—Small hint under the date, e.g. "Tap to continue".
idleMsnumber0When greater than 0 and the screensaver is closed, a hidden sentinel listens for pointer, key, wheel and touch activity and calls idle after this many milliseconds without any. 0 disables it.

Events

Vue: @name. React: onName.

closeCalled on click or any key (including Escape) while open.
idleCalled once the idleMs period passes without activity while closed; set open to true in the handler.

Notes

  • The clock re-renders from one interval created when the screensaver opens and cleared when it closes; the idle timer is re-armed on each interaction. Nothing runs during server rendering.