Popover API trafia do Baseline

Una Kravets

Zaczęło się! Jedna z funkcji, które najbardziej mnie ekscytują, została właśnie wprowadzona we wszystkich nowoczesnych przeglądarkach i oficjalnie jest częścią wersji podstawowej 2024. Ta funkcja to interfejs Popup API. Popover udostępnia wiele świetnych prymitywów i funkcji dla programistów, które ułatwiają tworzenie interfejsów warstwowych, takich jak etykiety, menu, interfejsy edukacyjne itp.

Oto kilka najważniejszych funkcji wyskakujących okienek:

• Promocja do warstwy najwyższej. Pop-upy będą się pojawiać w górnej warstwie nad resztą strony, więc nie musisz bawić się z-index.
• Funkcja szybkiego zamykania 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 lub dwukrotne kliknięcie spowoduje zamknięcie wyskakującego okienka i przywrócenie fokusu.
• Dostępne powiązania komponentów. Element popover połączony z aktywatorem popover semantycznie.

Tworzenie wyskakujących okienek

Tworzenie wyskakujących okienek jest dość proste. Aby użyć wartości domyślnych, wystarczy użyć elementu button do wywołania wyskakującego okienka i elementu do wywołania.

• Najpierw ustaw atrybut popover elementu, który ma być wyskakującym oknem.
• Następnie dodaj unikalny parametr id do elementu wyskakującego okienka.
• Aby połączyć przycisk z wyskakującym oknem, ustaw wartość właściwości popovertarget przycisku na wartość właściwości id elementu wyskakującego okna.

Przykładowy kod:

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

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Aby mieć większą kontrolę nad wyskakującymi okienkami, możesz wyraźnie określić ich typy. Na przykład użycie samego atrybutu popover bez wartości jest równoznaczne z użyciem atrybutu popover="auto". Wartość auto umożliwia szybkie zamknięcie i automatyczne zamykanie innych wyskakujących okienek. Użyj popover="manual" i dodaj przycisk zamykania. Ręczne wyskakujące okienka nie zamykają innych wyskakujących okienek ani nie pozwalają użytkownikom zamknąć okienka przez kliknięcie w interfejsie. Ręczne wyskakujące okienko możesz utworzyć, korzystając z tych elementów:

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

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Wyskakujące okienko a okno modalne

Możesz się zastanawiać, czy potrzebujesz wyskakującego okienka, gdy masz okno dialogowe. Odpowiedź brzmi: niekoniecznie.

Pamiętaj, że atrybut popover nie zapewnia semantyki samodzielnie. Chociaż możesz teraz tworzyć modalne dialogi za pomocą wyskakujących okienek, istnieją między nimi pewne kluczowe różnice:

Wnioski i informacje dodatkowe

popover wprowadza na platformę wiele ciekawych funkcji. Aby dowiedzieć się więcej o tym interfejsie API, w tym o dostępności tej funkcji i dokumentacji dotyczącej zestawu funkcji, przeczytaj te artykuły:

• Semantics and the popover attribute: what to use when? (Angielski)
• Ułatwienia dostępu w przypadku wyskakujących okienek: co robi i czego nie robi przeglądarka (Hidde de Vries)
• Dokumentacja MDN w wyskakującym okienku