Lightbox для Angular

Features

Встановлення

Базове використання

Імпортуйте стилі та автономний компонент RkLightboxOverlayComponent у imports array.

Шаблонні слоти

Чотири директиви шаблонних слотів дають повністю налаштувати інтерфейс оверлея, не форкаючи компонент. Кожен слот отримує строго типізований об’єкт контексту.

Підтримка відео

Слайди-відео вмикаються через шаблонний слот rkLightboxSlide та RkLightboxVideoSlideComponent. Так відеоплеєр не потрапляє в бандл галерей, яким потрібні лише зображення.

Повний екран

Використовуйте fullscreenSignal, requestFullscreen, та exitFullscreen from @reelkit/angular щоб стежити за станом повного екрана або перемикати його.

Стан в URL

RkLightboxUrlOverlayComponent — окремий компонент, стан відкриття якого живе в адресному рядку. Побудуйте контролер через createOverlayUrlState і передайте його як [controller]: галерея відкривається сама, коли параметр називає слайд, і закривається, коли параметр зникає. Посиланнями можна ділитися, а кнопка «назад» закриває галерею, а не виводить зі сторінки.

Викликайте його в контексті впровадження — в ініціалізаторі поля або в конструкторі. Він під’єднується одразу й звільняється через DestroyRef, so a component destroyed while the gallery is open leaves no listener behind. Full options live in the довіднику API для Angular.

• Відкриття додає один запис в історію. Гортання слайдів замінює його, тож N кроків не додають записів, і один крок назад завжди виводить із галереї.
• «Назад» закриває лише тоді, коли галерею відкрили всередині застосунку — посилання додало запис. За надісланим посиланням у новій вкладці історії позаду немає, тож кнопка «назад» виведе із сайту; кнопка ✕ або Escape прибирає параметр на місці й лишає вас на сторінці.
• Параметр, який не називає жодного слайда — застаріла закладка, змінене вручну значення, — прибирається з URL, а не лишається наполягати на слайді, що не відкриється.
• Шаблонні слоти працюють без змін: url-компонент сам виконує шість запитів слотів і передає кожен шаблон у галерею, тож rkLightboxControls та сусідні директиви живуть усередині нього точно так само, як усередині rk-lightbox-overlay.
• У застосунку з роутером передайте адаптер на базі Router. Запис в історію повз Router лишає його місцеположення застарілим, і наступна навігація втрачає параметр.

У застосунку з роутером передайте адаптер. Запис в історію повз Router лишає його місцеположення застарілим, і наступна навігація втрачає параметр, тож збудуйте адаптер на базі Router and pass it as adapter:

Стабільні посилання. Індекс адресує за позицією — збережений у закладках ?photo=3 відкриє інше зображення, щойно список перевпорядкують. urlStableIdKey адресує за стабільним id, scanning the live list — one call covers the common case.

Pass hashCodec: base64UrlCodec щоб закодувати id в URL у base64url — оборотне маскування, а не криптографічний хеш.

Адресуєте за іншим полем ( slug), or page an infinite feed with locateAsync, and build the codec (формат передавання) та locator (пошук) самі:

Нескінченні та посторінкові галереї. locate синхронний, тож відповідає лише за вже завантажені зображення — надіслане посилання на зображення 400 у стрічці, де завантажено 20, нічого не знайде. locateAsync — запасний варіант, що викликається лише коли locate не знаходить: завантажте потрібні сторінки й поверніть індекс, який ця ідентичність отримала. Поки він у процесі, галерея лишається закритою, а параметр — недоторканим, тож пряме посилання переживає запит; null або відмова прибирає параметр.

Входи RkLightboxUrlOverlayComponent

Приймає всі входи rk-lightbox-overlay except isOpen, replaced by a controller. Outputs are the same closed та slideChange; the URL drives closing, so closed тут радше сповіщення, ніж механізм.

Входи RkLightboxOverlayComponent

Виходи RkLightboxOverlayComponent

Інтерфейс LightboxItem

Типи контексту шаблонних слотів

Переходи

Передайте будь-яку TransitionTransformFn via the transitionFn . Якщо імпортувати лише той перехід, який використовуєте, решту збирач прибере через tree-shaking. Типово — slideTransition , коли не задано.

Завантаження вмісту та обробка помилок

Коли використовуєте слот rkLightboxSlide , в контексті доступні три колбеки життєвого циклу, щоб повідомляти стан завантаження. Lightbox стежить за станом кожного слайда й показує індикатор або значок помилки. Попереднє завантаження кешує зіпсовані URL, тож повторний перехід до невдалого слайда обходиться без нової спроби.

Колбеки життєвого циклу

Підключення колбеків у rkLightboxSlide

Власний шаблон завантаження

Скористайтеся пропсом rkLightboxLoading щоб замінити стандартний індикатор.

Власний шаблон помилки

Скористайтеся пропсом rkLightboxError щоб замінити стандартний значок помилки.

Класи CSS

Усі класи CSS звичайні (не scoped), тож їх можна перекрити селекторами вищої специфічності в таблиці стилів, підключеній після @reelkit/angular-lightbox/styles.css. Для змін кольору, розміру та z-index краще беріть власні властивості CSS, описані в розділі Theming нижче.

Theming

Кожен колір, розмір, z-index і перехід живе у власній властивості CSS. Перевизначайте одну чи кілька на :root (або на будь-якому предку Lightbox), щоб змінити тему, не чіпаючи код компонентів. Токени збігаються з Lightbox для React, тож перевизначення переносяться між прив’язками.

Вставте фрагмент нижче в таблицю стилів, підключену після @reelkit/angular-lightbox/styles.css.

Accessibility

Корінь оверлея — модальний діалог (role="dialog", aria-modal="true"). Set the ariaLabel щоб змінити оголошення для екранного читача; типове значення — «Image gallery». Кожен слайд несе role="group", aria-roledescription="slide", and an aria-label виведений із заголовка зображення та позиції.

Lightbox захоплює фокус під час відкриття й повертає його на елемент-тригер після закриття. Tab і Shift+Tab циклічно проходять фокусовані елементи всередині; фокус, що вислизнув (клік поза Lightbox, програмна установка), повертається назад. Реалізовано через captureFocusForReturn та createFocusTrap from @reelkit/core.