Przedstawiamy interfejs API popover

Una Kravets

Pudła są wszędzie w sieci. Znajdziesz je w menu, wskazówkach i w oknach dialogowych, które mogą być widoczne jako ustawienia konta, widżety komunikatów lub podgląd 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ć jeszcze przed rozpoczęciem tworzenia przydatnej, unikalnej i podstawowej funkcji okna wyskakującego.

Aby rozwiązać ten problem, udostępnimy w przeglądarkach nowy zestaw deklaratywnych interfejsów API HTML do tworzenia wyskakujących okienek. Zaczynamy od interfejsu API popover w Chromium 114.

Atrybut popover

Zamiast zajmować się całą złożonością samodzielnie, możesz pozwolić przeglądarce obsługiwać ją za pomocą atrybutu popover oraz kolejnych funkcji. Obsługa wyskakujących okienek HTML:

• Awans do najwyższej warstwy. Pokrowce pojawią się na oddzielnej warstwie nad pozostałą częścią strony, dzięki czemu nie musisz zmieniać 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 zaznaczenia.
• Domyślne zarządzanie 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 powrót fokusu.
• Dostępne powiązania komponentów. Łączenie elementu wyskakującego z wywołaniem okienka w sposób semantyczny.

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

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

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

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

Masz teraz w pełni funkcjonalne okienko wyskakujące.

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

Domyślne i zastąpienia

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ł. Możesz też tworzyć okna wyskakujące za pomocą elementu popovertargetaction. Zastępuje to domyślne działanie przełączania. Opcje popovertargetaction obejmują:

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

Korzystając z popovertargetaction="hide", możesz utworzyć przycisk „zamknij” w wyskakującym okienku, jak w tym fragmencie:

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

Wyskakujące okienka – automatyczne a ręczne

Samo użycie atrybutu popover jest w rzeczywistości skrótem do strony 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 utworzenie kolejnego typu wyskakującego okienka: wyskakującego okienka ręcznego. Nie wymuszają one zamknięcia innych typów elementów i nie zamykają go przez zamknięcie świateł. Musisz je zamknąć za pomocą licznika czasu lub jednoznacznego działania zamknięcia. 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 pojawiance.

Jeśli obejrzysz powyższy pokaz, zauważysz, że kliknięcie poza obszarem wyskakującego okienka nie powoduje jego zamknięcia. Poza tym gdyby były otwarte inne wyskakujące okienka, ich działanie się nie zamknęło.

Aby sprawdzić różnice:

Wyskakujące okienka z popover=auto:

• Zamknij inne wyskakujące okienka.
• 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.

Wyskakujące okienka stylu

Omówiliśmy już podstawowe elementy wyskakujące w języku HTML. popover zawiera też jednak kilka ciekawych funkcji stylizacji. Jednym z nich jest możliwość określania stylu elementu ::backdrop.

W wyskakujących okienkach auto jest to warstwa znajdująca się bezpośrednio pod górną warstwą (tam, gdzie znajduje się okienko popover), która znajduje się nad pozostałą częścią 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ż za pomocą popover="auto" możesz teraz tworzyć modalne dialogi, istnieją między nimi pewne kluczowe różnice:

Element dialog otwarty za pomocą dialog.showModal (okna modalne) to doświadczenie, które wymaga wyraźnej interakcji użytkownika w celu zamknięcia okna. popover obsługuje funkcję light-dismiss. Moduł dialog nie działa. Okno modalne powoduje, że reszta strony jest bezwładna. popover tego nie robi.

Powyższa wersja demonstracyjna to semantyczne okno z wyskakującym okienkiem. Oznacza to, że reszta strony nie jest bezwładna, a okno wyskakujące przez okienko jest ignorowane. Aby utworzyć to okno z wyskakujące, 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

Przeglądarki nie mogą jeszcze animować właściwości dyskretnych, w tym animowania do i z display: none oraz do i z górnej 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 dyskretnych właściwości oraz korzystaniu z elementów :popover-open i @starting-style możesz skonfigurować style przed zmianą i po niej, aby uzyskać płynne przejścia podczas otwierania i zamykania okien pop-over. Spójrzmy na poprzedni przykład. Animacja w przybliżeniu i oddaleniu wygląda znacznie płynniej i zapewnia płynniejsze wrażenia użytkownika:

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 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() do nadania stylu wyskakującemu menu. Styl wyśrodkowanego wyskakującego menu, które jest zakotwiczone na podstawie podstawy przełącznika kotwicy, może mieć następujący 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ść. Ciekawe, jak używacie wyskakujących okienek.

Dodatkowe materiały

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