Skip to main content

popupContainer

Description​

Defines a custom HTML element as the container for all popups and non-inline dropdowns

By default, popups are appended to the document body, but this is not always suitable. For example, when a SVAR application occupies only part of a page or is rendered inside a <dialog> element. In such cases, popupContainer allows you to target a more appropriate element.

Usage​

<div v-popup-container>
    <!-- your SVAR App -->
</div>

You can import the helper from @svar-ui/vue-core.

Example​

The example below shows how to scope all popups to a wrapper <div> instead of the document body:

<script setup>
import { popupContainer } from "@svar-ui/vue-core";
import { asDirective } from "@svar-ui/lib-vue";
import { RichSelect } from "@svar-ui/vue-core";

const vPopupContainer = asDirective(popupContainer);

const options = [
  { id: 1, label: "Option 1" },
  { id: 2, label: "Option 2" },
  { id: 3, label: "Option 3" },
];
</script>

<template>
  <div v-popup-container>
    <RichSelect :options="options" />
  </div>
</template>

Any dropdowns or popups opened by SVAR components inside the v-popup-container element will be rendered within that element rather than on the document body.

Related articles: