CoreImageCompare

Живой MDC-рендер и исходник для копирования.

Живой рендер

Так ContentRenderer отрисует этот контент на реальной странице.

Сравнение двух изображений шторкой: перетаскивание работает у читателя без кода. before/after — строки-адреса, modelValue управляет положением шторки в процентах. Размер задаётся обычным style-атрибутом — компонент отдаёт его корню: на широких экранах сравнение лучше ограничивать (max-width).

До и после

Исходник (MDC)

Тот же код текстом — скопируйте в свой контент как есть.

MDC

Сравнение двух изображений шторкой: перетаскивание работает у читателя без кода. `before`/`after` — строки-адреса, `modelValue` управляет положением шторки в процентах. Размер задаётся обычным `style`-атрибутом — компонент отдаёт его корню: на широких экранах сравнение лучше ограничивать (`max-width`).

### До и после

::core-image-compare{before="/images/d2n-team.jpg" after="/images/brand-logo.svg" before-alt="Команда d2n" after-alt="Логотип d2n" label="Сравнение изображений" style="max-width: 50vw"}
::