BeforeAfter

BeforeAfter показывает два изображения в одной области. Читатель двигает разделитель, чтобы сравнить «до» и «после».

Создать сравнение

1. Нажмите BeforeAfter на панели создания и протяните область на холсте. Двойной клик по кнопке создаёт виджет в центре видимой области.
2. В секции BeforeAfter справа расположены два превью рядом: Before и After. Нажмите пустое превью, чтобы загрузить изображение, или заполненное, чтобы заменить его. Файл также можно перетащить прямо на нужное превью.
3. Задайте размер виджета через Layout. Оба изображения заполняют всю область с сохранением пропорций и обрезкой по центру. Для точного совмещения деталей подготовьте исходники с одинаковым кадрированием.

Управление разделителем

В Control with выберите режим:

• Hover — разделитель следует за курсором. После ухода курсора он плавно возвращается в центр. Этот режим включён по умолчанию.
• Drag — разделитель перемещается при перетаскивании и остаётся в выбранном положении после отпускания.

На сенсорном экране двигайте разделитель пальцем. В Hover после завершения касания он возвращается в центр, в Drag сохраняет положение. Жест внутри виджета управляет сравнением; для прокрутки страницы начните жест вне его области.

В обоих режимах сравнение начинается с середины. Положение, выбранное читателем, не меняет настройки материала. Круглая ручка со стрелками скрывается при взаимодействии и появляется снова после его завершения.

Внешний вид

Прозрачность исходных изображений сохраняется: через прозрачные участки виден фон под виджетом.

Stroke width меняет толщину линии и окружности ручки от 0 до 5 px. По умолчанию — 2 px. Stroke color задаёт их цвет и прозрачность, а также цвет стрелок. По умолчанию разделитель белый.

Общие настройки размера, поворота, прозрачности, скругления и эффектов находятся в стандартных секциях виджета.

Проверить результат

Дважды нажмите виджет на холсте, чтобы включить взаимодействие с разделителем. Нажмите вне виджета на холсте, чтобы вернуться к обычному выделению и перемещению.

В предпросмотре и опубликованном материале разделитель доступен сразу. На клавиатуре используйте Tab для фокуса, стрелки для перемещения, Home и End для перехода к краям.