Skip to main content

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>
  import { Editor } from "@svar-ui/svelte-editor";
  let open = $state(true);
</script>

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