Przedstawiamy interfejs API popover

Una Kravets

Pop-upy są wszędzie w internecie. Możesz je zobaczyć w menu, podpowiedziach i oknach dialogowych, które mogą mieć postać ustawień konta, widżetów informacji dodatkowych i podglądów kart produktów. Pomimo powszechności tych komponentów ich tworzenie w przeglądarkach jest nadal zaskakująco kłopotliwe. Musisz dodać skrypty do zarządzania fokusem, stanami otwarcia i zamknięcia, dostępne elementy wtyczki w komponentach oraz przypisania klawiatury, które umożliwiają wejście do okna i wyjście z niego. Wszystko to musisz zrobić, zanim zaczniesz tworzyć przydatną, unikalną i podstawową funkcję okna wyskakującego.

Aby rozwiązać ten problem, wprowadziliśmy w przeglądarkach nowy zestaw deklaratywnych interfejsów API HTML do tworzenia wyskakujących okienek, zaczynając od interfejsu popover w wersji Chromium 114.

Atrybut popover

Zamiast samodzielnie zarządzać wszystkimi złożonymi funkcjami, możesz pozwolić przeglądarce zająć się tym za Ciebie za pomocą atrybutu popover i kolejnych funkcji. Obsługa wyskakujących okienek HTML:

• Promocja do warstwy najwyższej. Pop-upy będą wyświetlane na osobnej warstwie nad resztą strony, więc nie musisz się przejmować kolejnością nakładania elementów.
• Funkcja odrzucenia bez wyświetlania powiadomienia. Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie fokusu.
• Domyślne zarządzanie punktem ostrości. Po otwarciu wyskakującego okienka następny przystanek będzie znajdować się w wyskakującym okienku.
• Dostęp do skrótów klawiszowych. Naciśnięcie klawisza esc spowoduje zamknięcie wyskakującego okienka i przywrócenie fokusu.
• Dostępne powiązania komponentów. Semantyczne łączenie elementu wyskakującego okienka z jego aktywatorem

Teraz możesz tworzyć wyskakujące okienka z tymi wszystkimi funkcjami bez użycia JavaScriptu. Podstawowy pop-up wymaga 3 elementów:

• Atrybut popover elementu zawierającego wyskakujące okienko.
• id w elemencie zawierającym wyskakujące okienko.
• popovertarget z wartością id elementu, który otwiera wyskakujące okienko.

<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

Teraz masz w pełni funkcjonalny podstawowy wyskakujący komunikat.

Ten wyskakujący element może służyć do przekazywania dodatkowych informacji lub jako widżet informacji.

Ustawienia domyślne i zastępcze

Domyślnie, np. w poprzednim fragmencie kodu, skonfigurowanie wyskakującego okienka za pomocą popovertarget oznacza, że przycisk lub element, który otwiera wyskakujące okienko, będzie je otwierał i zamykał. Możesz też tworzyć okna wyskakujące za pomocą elementu popovertargetaction. Zastąpi to domyślne działanie przełączania. Opcje popovertargetaction:

popovertargetaction="show": wyświetla wyskakujące okienko. popovertargetaction="hide": ukrywa wyskakujące okienko.

Za pomocą popovertargetaction="hide" możesz utworzyć przycisk „Zamknij” w wyskakującym okienku, jak w tym fragmencie kodu:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

Automatyczne i ręczne wyskakujące okienka

Użycie samego atrybutu popover jest w istocie skrótem dla atrybutu popover="auto". Po otwarciu domyślne popover spowoduje przymusowe zamknięcie innych automatycznych wyskakujących okienek, z wyjątkiem okienek otwierających się w tle. Można je zamknąć za pomocą przycisku zamknięcia lub przycisku zamknięcia z efektem zanikania.

Z kolei ustawienie popover=manual powoduje wyświetlenie innego typu wyskakującego okienka: ręcznego. Nie powodują przymusowego zamknięcia żadnego innego typu elementu i nie można ich zamknąć za pomocą gestu odrzucenia. Musisz je zamknąć za pomocą minutnika lub wyraźnego działania. Typy wyskakujących okienek odpowiednich dla popover=manual to elementy, które pojawiają się i znikają, ale nie powinny wpływać na pozostałą część strony, np. powiadomienie w pasku.

Jeśli obejrzysz powyższy pokaz, zauważysz, że kliknięcie poza obszarem wyskakującego okienka nie powoduje jego zamknięcia. Dodatkowo, jeśli były otwarte inne wyskakujące okienka, nie byłyby one zamykane.

Aby sprawdzić różnice:

Wyskakujące okienka z popover=auto:

• Po otwarciu zmusza do zamknięcia innych wyskakujących okienek.
• Można zamknąć.

Wyskakujące okienka z popover=manual:

• Nie zamykaj na siłę innych typów elementów.
• Nie zamykaj okna. Zamknij je za pomocą przełącznika lub akcji zamknięcia.

Stylowanie wyskakujących okienek

Do tej pory omawialiśmy podstawowe okienka w HTML. popover zawiera też jednak kilka ciekawych funkcji stylizacji. Jedną z nich jest możliwość stylizowania ::backdrop.

W przypadku auto jest to warstwa bezpośrednio pod najwyższą warstwą (w której znajduje się wyskakujące okienko) i znajdująca się nad resztą strony. W tym przykładzie element ::backdrop ma kolor półprzezroczysty:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

Różnica między popover a dialog

Pamiętaj, że atrybut popover sam w sobie nie zapewnia semantyki. Chociaż teraz możesz tworzyć interfejsy podobne do modalnych dialogów za pomocą popover="auto", istnieją między nimi pewne kluczowe różnice:

Element dialog otwierany za pomocą dialog.showModal (okno modalne) wymaga wyraźnej interakcji użytkownika, aby zamknąć okno. popover obsługuje funkcję light-dismiss. Okno modalne dialog nie jest wyświetlane. Okno modalne unieczynnia pozostałą część strony. popover tego nie robi.

Powyższe demo to dialog semantyczny z pop-upem. Oznacza to, że reszta strony nie jest nieaktywna i wyskakujące okienko zachowuje się jak zwykłe. Aby utworzyć to okno z wyskakującym elementem, użyj tego kodu:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

Wkrótce

Interaktywne wejście i wyjście

W przeglądarkach nie można jeszcze animować właściwości dyskretnych, w tym display: none i animacji do i z najwyższej warstwy. Są one jednak zaplanowane w przyszłej wersji Chromium, która zostanie opublikowana wkrótce po tej aktualizacji.

Dzięki możliwości animowania właściwości dyskretnych i użyciu właściwości :popover-open i @starting-style możesz skonfigurować style przed i po zmianie, aby umożliwić płynne przejścia podczas otwierania i zamykania wyskakujących okienek. Weźmy poprzedni przykład. Animacja wstawiania i wyjmowania powoduje płynniejsze działanie aplikacji i daje lepsze wrażenia użytkownikowi:

Umieszczenie kotwicy

Pop-upy są przydatne, gdy chcesz umieścić alert, okno modalne lub powiadomienie w ramach widoku. Pop-upy są też przydatne w przypadku menu, etykiet narzędzia i innych elementów, które trzeba umieścić względem innych elementów. Właśnie w tym przypadku przydaje się osadzanie w CSS.

W tym demonstracyjnym menu radialnym interfejs API popovera jest używany razem z pozycjonowaniem kotwicy CSS, aby zapewnić, że #menu-items jest zawsze przytwierdzone do swojego przełącznika, czyli przycisku #menu-toggle.

Konfigurowanie kotwic jest podobne do konfigurowania wyskakujących okienek:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

Aby skonfigurować kotwicę, nadaj jej id (w tym przykładzie #menu-toggle), a następnie użyj anchor="menu-toggle", aby połączyć te 2 elementy. Teraz możesz użyć anchor() do nadania stylu wyskakującemu menu. Wyśrodkowane menu wyskakujące zakotwiczone na linii bazowej przełącznika kotwicy może mieć taki styl:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

Teraz masz w pełni funkcjonalne menu wyskakujące, które jest zakotwiczone do przycisku przełącznika i zawiera wszystkie wbudowane funkcje menu wyskakującego. Nie wymaga to JavaScriptu.

Podsumowanie

Interfejs popover API to pierwszy krok w drodze do stworzenia serii nowych funkcji, które ułatwią tworzenie aplikacji internetowych i zwiększą ich dostępność. Cieszę się, że używasz wyskakujących okienek.

Dodatkowe materiały

• Okna dialogowe i wyskakujące okna są podobne. Czym się różnią?
• Semantyka i atrybut popover
• Dokumentacja MDN w wyskakującym okienku
• Wyjaśnienie dotyczące wyskakującego okienka OpenUI