Skip to main content

cardPopup

Custom popup component rendered on card click instead of the sidebar editor. Clicking or pressing Enter/Space on a card opens this component in an anchored popup.

Usage​

cardPopup?: Component;

The component receives two props:

PropTypeDescription
cardKanbanCardThe card object that was clicked
close() => voidCallback that dismisses the popup

When set, all card clicks and keyboard activations open the popup. The sidebar Editor only opens through programmatic api.exec("select-card", { id }) calls or other UI paths (e.g., the card context menu).

Positioned at "right-start" relative to the clicked card. Dismissed by outside click or Escape. Only one popup is open at a time.

Example​

<script>
  import { Kanban } from "@svar-uisvelte-kanban";
  import CardPreview from "./CardPreview.svelte";

  const columns = [
    { id: "new", label: "New" },
    { id: "in-progress", label: "In Progress" },
  ];
  const cards = [
    { id: 1, label: "Task A", column: "new" },
    { id: 2, label: "Task B", column: "in-progress" },
  ];
</script>

<Kanban {cards} {columns} cardPopup={CardPreview} />

The CardPreview component:

<script>
  let { card, close } = $props();
</script>

<div class="preview">
  <h4>{card.label}</h4>
  <button onclick={close}>Close</button>
</div>

Combining the popup with the sidebar editor - dispatch select-card and call close from inside the popup:

<script>
  import { Kanban, Editor } from "@svar-uisvelte-kanban";
  import CardPreview from "./CardPreview.svelte";

  let api = $state();
</script>

<Kanban
  {cards}
  {columns}
  cardPopup={CardPreview}
  init={a => (api = a)}
/>
{#if api}<Editor {api} />{/if}
  • Card popup guide — setup, component contract, and editor coexistence
  • tooltip — passive hover tooltip (non-interactive)
  • select-card — programmatic editor opening from within the popup
  • Editor — the sidebar/modal editor the popup can coexist with