placement

Selects the wrapper the editor renders into. The items, values, validation, and save flow are the same in every mode.

Usage

placement?: "inline" | "sidebar" | "modal" | "fullscreen";

• "inline" - (default) renders in place, in the page flow.
• "sidebar" - slides in a side panel; an outside click emits onaction with item.id === "close".
• "modal" - opens a centered dialog over a backdrop.
• "fullscreen" - pins a panel over the whole viewport.

Any unrecognized value behaves like "inline". No mode closes itself; the parent removes the editor in response to onaction or onsave.

Example

<script setup>
import { Editor } from "@svar-ui/vue-editor";
import { ref } from "vue";

const open = ref(true);
</script>

<template>
  <Editor
    v-if="open"
    :items="items"
    :values="values"
    placement="modal"
    :onaction="({ item }) => {
      if (item.id === 'cancel' || item.id === 'close') open = false;
    }"
  />
</template>

Related articles

• Display Modes