К содержанию

Навигация

Главное

Содержание

Галерея

<sf-gallery> показывает упорядоченный набор материалов — изображения, карточки, макеты — слайдером в потоке страницы и в модальном окне на весь экран. Оба представления держат одно текущее положение. Галерея собрана из Smart-слайдера и модального окна; для ленты без увеличения достаточно одного слайдера.

Пример

Применение

Материалы

Каждый значимый дочерний элемент с slot="slide" — один материал. Пробелы и комментарии между ними не считаются. Составную карточку — изображение, подпись, ссылку — держите в одном корневом элементе, например figure: галерея не собирает карточку из соседних элементов.

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

Только встроенный просмотр

lightbox="false" оставляет галерею в потоке страницы, без модального окна. Так делайте, когда увеличение не нужно или материалы уже занимают крупную область. inline="false", наоборот, убирает встроенный слайдер, если окно включено: галерея открывается только в модальном окне из скрипта.

Первый материал
Второй материал
Третий материал

Галерея из ссылок

Готовую сетку миниатюр не нужно переписывать в <sf-gallery>. Отметьте ссылки одинаковым data-sf-gallery: нажатие на любую из них открывает модальную галерею из всех ссылок группы, начиная с нажатой. Источник берётся из data-sf-src, href или вложенного изображения, подпись — из data-caption, title или alt изображения.

Параметры такой галереи задаются на ссылках с префиксом: data-sf-gallery-loop, data-sf-gallery-width, data-sf-gallery-title и другие имена атрибутов галереи.

Слайдер и модальное окно

arrows, dots, thumbs и loop меняют способ листания, не меняя набор материалов; space-between и speed — расстояние между слайдами и скорость перехода. Модальное окно настраивается атрибутами галереи с теми же именами, что у модального окна: title, text, show-header, show-close, close-on-esc, close-on-overlay, position, fullscreen, width, height. Внешний вид частей задают root-class, inline-class, lightbox-class, slide-class и классы частей окна — утилитами Framework.

Текущее положение и события

Положение нумеруется с единицы. Атрибут current задаёт начальный материал; goTo(n), next() и prev() переходят к другому, open(n) открывает модальное окно на нужном материале, close() и toggle() закрывают и переключают его. Нажатие на материал во встроенном слайдере открывает окно на этом материале.

Смена материала отправляет sf-change, открытие и закрытие окна — sf-open и sf-close. Все три всплывают; в event.detail приходят current и total, а у sf-change ещё previous и from — откуда пришла смена: inline, lightbox или api.

JavaScript
const gallery = document.querySelector('sf-gallery');
gallery.addEventListener('sf-change', (event) => {
  counter.textContent = `${event.detail.current} из ${event.detail.total}`;
});
gallery.open(3);

Вложенные слайдеры не хранят своего положения: не исправляйте его через их API, а вызывайте методы галереи. getInlineSlider(), getLightboxSlider() и getModal() возвращают вложенные элементы для чтения их состояния.

Доступность

  • Задайте title: он становится заголовком модального окна и называет диалог. По умолчанию заголовок английский — «Gallery».
  • Материал встроенного слайдера, который открывает окно, получает роль кнопки и попадает в порядок Tab; Enter и пробел открывают окно на нём. Его имя — текст материала, поэтому у изображения нужен содержательный alt, а у карточки — подпись.
  • В модальном окне фокус остаётся внутри, Escape закрывает окно, если не задан close-on-esc="false". Листают стрелки слайдера, у которых есть свои доступные имена.
  • Для галереи из ссылок отмечайте именно ссылки, а не изображения: ссылка доступна с клавиатуры, изображение — нет.
  • При системной настройке уменьшения движения слайды сменяются без анимации.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.
Тег <sf-gallery>
Назначение Упорядоченная коллекция медиа во встроенном Slider с необязательным лайтбоксом Modal, в котором находится второй Slider. Галерея хранит текущий слайд (нумерация с единицы) и держит на нём оба представления.
Контракт smart.gallery, версия 1.0.0
Поставка выпуск Framework ui-106d5901f8c3
Жизненный цикл экспериментальный: API может меняться между выпусками
Готовность описан: манифест и сценарий есть, продуктовой приёмки нет
Заготовка до прихода кода сервер пишет data-sf-skeleton="block"; своего скелетона при загрузке данных нет (Заготовка до прихода кода)

Атрибуты

  • template — string, по умолчанию default.
  • modal-id — string, по умолчанию пусто.
  • title — string, по умолчанию Gallery.
  • text — string, по умолчанию пусто.
  • open — boolean, по умолчанию false.
  • current — number, по умолчанию 1.
  • inline — boolean, по умолчанию true.
  • lightbox — boolean, по умолчанию true.
  • arrows — boolean, по умолчанию true.
  • dots — boolean, по умолчанию false.
  • thumbs — boolean, по умолчанию true.
  • loop — boolean, по умолчанию false.
  • space-between — number, по умолчанию 12.
  • speed — number, по умолчанию 450.
  • button-type — string, по умолчанию primary.
  • button-size — string, по умолчанию 1.
  • dots-type — string, по умолчанию primary-dark.
  • dots-size — string, по умолчанию 2.
  • thumbs-class — string, по умолчанию пусто.
  • thumb-class — string, по умолчанию пусто.
  • slide-class — string, по умолчанию пусто.
  • inline-class — string, по умолчанию пусто.
  • lightbox-class — string, по умолчанию пусто.
  • overlay — boolean, по умолчанию true.
  • show-header — boolean, по умолчанию true.
  • show-close — boolean, по умолчанию true.
  • close-on-esc — boolean, по умолчанию true.
  • close-on-overlay — boolean, по умолчанию true.
  • preserve-scroll-gap — boolean, по умолчанию true.
  • position — string, по умолчанию center, значения: center, left, right, top, bottom.
  • fullscreen — boolean, по умолчанию false.
  • width — string, по умолчанию пусто.
  • height — string, по умолчанию пусто.
  • blur — boolean, по умолчанию false.
  • blur-type — string, по умолчанию medium, значения: none, small, medium, large.
  • overlay-class — string, по умолчанию пусто.
  • close-class — string, по умолчанию пусто.
  • surface-class — string, по умолчанию пусто.
  • surface-padding — string, по умолчанию пусто.
  • panel-class — string, по умолчанию пусто.
  • header-class — string, по умолчанию пусто.
  • body-class — string, по умолчанию пусто.
  • content-class — string, по умолчанию пусто.
  • footer-class — string, по умолчанию пусто.

Прежние имена:

Имя Прежнее имя Состояние Убирается после
lightbox-class root-class работает, отмечается в SF.deprecations 2026-12-01

Методы

  • getModal() — возвращает object | null. Возвращает sf-modal лайтбокса или null, если его нет.
  • getInlineSlider() — возвращает object | null. Возвращает встроенный sf-slider или null до отрисовки.
  • getLightboxSlider() — возвращает object | null. Возвращает sf-slider лайтбокса или null, если его нет.
  • open(index?: number) — возвращает object. Переходит к указанному слайду (нумерация с единицы), если передан индекс, устанавливает open и открывает модальное окно лайтбокса. Возвращает элемент.
  • close() — возвращает object. Снимает open и закрывает модальное окно лайтбокса. Возвращает элемент.
  • toggle(index?: number) — возвращает object. Вызывает close(), если открыто, иначе open(index). Возвращает элемент.
  • goTo(index: number) — возвращает object. Переходит к слайду по номеру с единицы, ограничивая его числом слайдов, отражает его в атрибуте current, синхронизирует оба слайдера и отправляет sf-change, если слайд сменился. Возвращает элемент.
  • next() — возвращает object. goTo(current + 1); останавливается на последнем слайде. Возвращает элемент.
  • prev() — возвращает object. goTo(current - 1); останавливается на первом слайде. Возвращает элемент.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

  • sf-change — detail: { component?: any, tagName?: string, template?: string, previous?: number, current?: number, total?: number, from?: any }. Текущий слайд изменился через API или любой из слайдеров. Всплывает и с composed: true.
  • sf-close — detail: { component?: any, tagName?: string, template?: string, current?: number, total?: number }. Модальное окно лайтбокса закрылось. Всплывает и с composed: true.
  • sf-open — detail: { component?: any, tagName?: string, template?: string, current?: number, total?: number }. Модальное окно лайтбокса открылось. Всплывает и с composed: true.

Доступность

  • Доступное имя: рекомендуется.
  • Клавиши: Tab.
  • Фокус: Сохраняет видимый фокус на активном элементе управления.

Минимальная разметка

HTML
<sf-gallery></sf-gallery>

Источник

  • simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/gallery
  • simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-gallery

См. также

Поиск по документации

Введите минимум 2 символа

    Настройки

    Тема
    Размер шрифта
    Ширина страницы