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 w komponentach oraz przypisania klawiszy 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

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

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 oddzielnej 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 zaznaczenia.
  • 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 zaznaczenia.
  • Dostępne powiązania komponentów. Element popover połączony z aktywatorem popover semantycznie.

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.
  • Atrybut popovertarget w elemencie <button> (lub typu przycisku, np. <input type="button" />). Atrybut ma wartość pasującą do atrybutu id w elemencie zawierającym wyskakujące okienko, które ma być otwierane przez ten przycisk.
<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 panel może służyć do przekazywania dodatkowych informacji lub jako widżet wyświetlający informacje.

Ustawienia domyślne i zastępcze

Domyślnie, tak jak w poprzednim fragmencie kodu, skonfigurowanie wyskakującego okienka za pomocą atrybutu popovertarget oznacza, że przycisk otwierający 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 tworzy inny typ wyskakującego okienka: ręczne. 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 formie toastu.

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 zmusić do zamknięcia innych wyskakujących okienek.
  • Można zamknąć.

Wyskakujące okienka z popover=manual:

  • Nie zamykaj na siłę żadnych 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. Ale popover ma też 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ż za pomocą popover="auto" możesz teraz tworzyć modalne dialogi, 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 powoduje, że reszta strony staje się nieaktywna. 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 okienko. 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

Interakcyjne wejście i wyjście

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. Animacja wstawiania i wyjmowania powoduje płynniejsze działanie aplikacji i daje użytkownikom lepsze wrażenia:

Umieszczenie kotwicy

Pop-upy są przydatne, gdy chcesz ustawić alert, okno modalne lub powiadomienie na podstawie 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