📖 Detailed overview

Этот компонент состоит из нескольких изображений. Его можно использовать, например, в разделе описания товара. Количество изображений

🎬 Live Demo

Live demo link

⚙️ Usage

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

Свободные места

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

Лоадер

Свойство Отключить лоадер для превью управляет лоадером. Если изображение еще не прогрузились, вместо нее показывается анимированный лоадер. Как только изображение загрузится, лоадер пропадет.

Способы догрузки изображений

Свойство Варианты загрузки изображений работает по разному в конструкторе и в опубликованной версии.

В конструкторе:

• При выборе Все сразу и При скроле - загружаются и показываются сразу все имеющиеся изображения;
• При выборе По клику - загружаются и показываются только часть изображений. Также, снизу появляется кнопка Загрузить еще.

На сайте:

• Если выбрано Все сразу - загружаются и показываются сразу все имеющиеся изображения;
• Если выбрано При скроле - загружаются и показываются только часть изображений. Далее, при скроле подгружаются остальные.
• Если выбрано По клику - загружаются и показываются только часть изображений. Снизу появляется кнопка Загрузить еще.

🧩 Components and Props

| Props Name | Type | Description | Default | Example | | --------------------------------------- | :------: | :------------------------------------------------------------------------: | :---------: | :----------: | | Количество изображений | number | Количество изображений галереи | 8 | 10 | | Коичество столбцов | number | Количество столбцов галереи | 4 | 3 | | Ширина отступов | string | Ширина отступов между изображениями | 10 | 5% | | Автоматически заполнять свободные места | bool | Если в галерее образуются свободные места, заполнять его изображением | true | false | | Варианты загрузки изображений | enum | Варианты подгрузки изображений [Все сразу, При скроле, По кнопке] | Все сразу | При скроле | | Соотношения сторон | enum | Соотношения сторон изображений [auto, 16:9, 4:3, 3:2, 1:1, 2:3, 3:4, 9:16] | auto | 16:9 | | Максимальная ширина изображений | string | Максимальная ширина блока с изображением | 1fr | 250px | | Минимальная ширина изображений | string | Минимальная ширина блока с изображением | 80 | 50px | | Отключить лоадер для превью | bool | Отключить лоадер анимацию для превью изображений | false | true |

🗓 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.