Overlay service

The useOverlay service is just a quick and easy way to show or hide the main overlay wich is used by asides and modals components.

We created this service to provide an easy way to interact with it for other purposes if you need to.

Methods

setGlobalOverlay(overlayInstance)void
overlayInstance object
show()void
hide()void

@lang:en is missing in demo documentation for OverlayExample

Missing documentation

It will hide after 2 sec. 
<template>
	<o-section align="left">
		<o-button @click="showGlobalOverlay()">
			Show global overlay
		</o-button>
		It will hide after 2 sec.
	</o-section>
</template>

<script setup lang="ts">
import { useOverlay } from '@orion.ui/orion';

function showGlobalOverlay () {
	useOverlay().show();

	setTimeout(() => {
		useOverlay().hide();
	}, 2000);
}
</script>

OverlayExample

MIT Licensed | Copyright © 2023-present Orion UI