📖 Detailed overview

Этот компонент показывает как было до и стало после. Например, можно показать автомобиль до и после покраски, комнату до и после ремонта, мебель до и после восстановления.

🎬 Live Demo

Live demo link

⚙️ Usage

Добавьте компонент на страницу и посмотрите как он работает в режиме превью.

Свои изображения

Чтобы добавить свои изображения, выберете нужное внутри компонента и укажите значение для свойства src.

Надписи Before и After

Клините на эти текстовые элементы на странице чтобы их отредактировать. При необходимости, стилизуйте их на правой панели.

Cоотношения сторон

Чтобы поменять соотношение сторон, воспользуйтесь свойством Aspect ratio.

Управление границей

Вы можете управлять границей, перетаскивая её или просто двигая курсор мыши, за это отвечает свойство Activation type.

🧩 Components and Props

| Props Name | Type | Description | Default | Example | | --------------- | :----: | :-----------------------------------------------------: | :------: | :------: | | Aspect ratio | enum | Соотношение сторон [none, square, 4:3, 3:4, 16:9, 9:16] | 16:9 | 4:3 | | Activation type | enum | Способ активации [onDrag, onMove] | onDrag | onMove |

🗓 Changelog

• 16/03/2021 (v1.0)
  • Первая версия

📮 Feedback

If you encountered a bug, please contact us so we can fix it promptly. We’re rapidly developing, so don’t hesitate to send us your feedback and request new features you can’t stand missing. Feel free to share what you’re working on - we love to see what you’re building with Quarkly!

Help with components We're on Discord Our Twitter [email protected]

📝 License

Licensed under the MIT License.