Overlay

Overlay is a layer obscuring the page in such a way that, together with additional modal components or lateral navigation, create specific functionalities in which we define in which area the user can perform.

Props

canClose

Specifies if overlay can be closed (by default: yes)

type:Boolean

default:true

absolute

Specifies whether overlay should have a fixed position (default) or absolute.

type:Boolean

default:false

Events

hideOverlay

Should cause setting the layer visibility to false

Examples

Open overlay

template layer

<a @click="displaySample()" href="#">Open overlay</a> <overlay />

setup

import { useOverlayStore } from '@riupress/ui'
const useOverlay = useOverlayStore()
function displaySample() {
  useOverlay.updateShow(true)
}
function close() {
  useOverlay.updateShowTemplate(false)
  useOverlay.updateShow(true)
}

WARNING

Overlay has a Tailwind class set on z-20 determining z-index. This value should be remembered when building components to cooperate with overlay.

State for Overlay

Ordering the condition of the layer, i.e. mainly including visibility and the relationship into other elements is solved using the Pinia Store.

import { defineStore } from 'pinia'

export const useOverlayStore = defineStore('overlay', {
  state: () => ({
    overlay: false,
    template: false,
    name: 'default'
  }),
  getters: {
    getOverlay(state) {
      return state.overlay
    },
    getTemplate(state) {
      return state.template
    },
    getName(state) {
      return state.name
    }
  },
  actions: {
    show(val: string) {
      this.name = val
      this.template = true
      this.overlay = true
    },
    setOverlay(val: boolean) {
      this.overlay = val
    },
    setTemplate(val: boolean) {
      this.template = val
    },
    setName(val: string) {
      this.name = val
    },
    close() {
      this.overlay = false
      this.template = false
    }
  }
})