Popover Preview
Popover Preview ставит в строку таблицы миниатюру креатива высотой в строку; клик или фокус раскрывают Popover с полноразмерной картинкой или произвольным содержимым. Когда просмотра нет, вместо миниатюры стоит плашка со значком перечёркнутого глаза.
Статус: experimental · в системе с 2026-09 · интерактивность: conditional (по конфигурации)
Когда использовать
- Список креативов или лендингов: превью в строке, полный вид по клику.
Не использовать:
- Картинка нужна сразу в размере — это Thumbnail.
- Панель без миниатюры — это Popover.
Альтернативы:
Миниатюра и панель
Миниатюра креатива раскрывает панель с картинкой; рядом — строка без просмотра.
<!--
🟢
Миниатюра креатива раскрывает панель с картинкой; рядом — строка, у
которой просмотра нет.
-->
<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import PopoverPreview from "$lib/ui/PopoverPreview.svelte";
const svg = (w, h, text) =>
`data:image/svg+xml;utf8,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}"><rect width="100%" height="100%" fill="%23457fac"/><text x="50%" y="55%" fill="%23fff" font-size="${Math.round(h / 3)}" text-anchor="middle" font-family="sans-serif">${text}</text></svg>`)}`;
</script>
<div style="display: flex; align-items: center; gap: var(--sp-2);">
<PopoverPreview src={svg(120, 60, "Push")} full={svg(360, 180, "Push 720×480")} label={t("Креатив Push")} />
<PopoverPreview noPreview label={t("Просмотра нет")} />
</div>