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 haki do komponentów oraz przypisania klawiatury do wchodzenia do okna i wychodzenia z niego. Wszystko to musisz zrobić jeszcze przed rozpoczęciem tworzenia przydatnej, unikalnej i podstawowej funkcji 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 światła 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 Łączenie elementu wyskakującego z wywołaniem okienka w sposób semantyczny.

Teraz można tworzyć okienka wyskakujące za pomocą wszystkich tych funkcji bez użycia języka JavaScript. Podstawowy pop-up wymaga 3 elementów:

• Atrybut popover w elemencie zawierającym okienko wyskakujące.
• 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.

Wyskakujące okienko może służyć do przekazywania dodatkowych informacji lub jako widżet komunikatu.

Ustawienia domyślne i zastępcze

Domyślnie, tak jak 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ł. Bezpośrednie okienka wyskakujące można jednak również tworzyć za pomocą popovertargetaction. Zastąpi to domyślne działanie przełączania. Opcje popovertargetaction:

popovertargetaction="show": pokazuje 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 tworzy inny typ wyskakującego okienka: ręczne wyskakujące okienko. 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. Poza tym gdyby otwarte były inne wyskakujące okienka, nie zostałyby one zamknięte.

Aby sprawdzić różnice:

Popuki z popover=auto:

• Po otwarciu wymuszaj zamknięcie innych okien pop-over.
• Można zamknąć.

Wyskakujące okienka z popover=manual:

• Nie zamykaj na siłę żadnych innych typów elementów.
• Nie ignoruj światła. Zamknij je za pomocą przełącznika lub akcji zamknięcia.

Stylowanie wyskakujących okienek

Do tej pory omawialiśmy podstawowe popovery w HTML. popover oferuje też jednak kilka fajnych funkcji stylistycznych. Jednym z nich jest możliwość określania stylu elementu ::backdrop.

W przypadku auto jest to warstwa bezpośrednio pod najwyższą warstwą (w której znajduje się wyskakujące okienko), która leży nad resztą strony. W tym przykładzie do kolumny ::backdrop został przypisany 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ć modalne dialogi 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 w celu zamknięcia okna. popover obsługuje funkcję light-dismiss. Okno modalne dialog nie jest wyświetlane. Okno modalne powoduje, że reszta strony jest bezwładna. 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 okienko z lekkim odrzuceniem. Możesz utworzyć to okno z zachowaniem wyskakujących okienek, korzystając z 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 otwieranie i zamykanie

Możliwość animowania właściwości dyskretnych, w tym animacji do i z display: none oraz animacji do i z najwyższej warstwy, nie jest jeszcze dostępna w przeglądarkach. 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. Animowane animacje wyglądają znacznie płynniej i są bardziej płynne w obsłudze.

Umieszczenie kotwicy

Popovers przydają się, gdy chcesz umieścić alert, okno modalne lub powiadomienie na podstawie widocznego obszaru. 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 tu do akcji wkracza kotwica 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(), aby nadać styl 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 wprowadzenia 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