Wyskakujące okienka: powraca do popularności!

Jhey Tompkins

Celem inicjatywy Open UI jest ułatwienie deweloperom dbania o wygodę użytkowników. W tym celu staramy się radzić sobie z bardziej problematycznymi wzorcami, z którymi mierzą się deweloperzy. Możemy to osiągnąć, oferując lepsze, wbudowane interfejsy API i komponenty.

Jednym z takich problemów są wyskakujące okienka opisane w Otwartym interfejsie jako „Popovers”.

Poporowcy już od dawna mają dość polaryzującą reputację. Wynika to częściowo ze sposobu, w jaki są tworzone i wdrażane. Nie są to proste wzorce do stworzenia dobrze dobranych wzorców, ale mogą przynosić duże korzyści, kierując użytkowników do określonych rzeczy lub informując ich o zawartości witryny, zwłaszcza gdy są używane w sposób wyrafinowany.

Podczas tworzenia wyskakujących okienek często pojawiają się 2 główne kwestie:

• Jak umieścić je w odpowiednim miejscu nad pozostałymi treściami.
• Jak ułatwić jego obsługę (czy może być przyjazna dla klawiatury, można go zaznaczyć itp.).

Wbudowany interfejs Popover API ma różne cele związane z tym samym nadrzędnym celem, którym jest ułatwienie deweloperom opracowania odpowiedniego wzorca. Oto niektóre z nich:

• Zadbaj o łatwe wyświetlanie elementu i jego elementów podrzędnych nad pozostałą częścią dokumentu.
• Zadbaj o przystępność.
• nie wymagają obsługi języka JavaScript w przypadku najczęstszych działań (lekkiego zamknięcia, pojedynczegotania, nakładania itd.).

Pełną specyfikację wyskakujących okienek znajdziesz na stronie OpenUI.

Zgodność z przeglądarką

Gdzie możesz teraz korzystać z wbudowanego interfejsu Popover API? Funkcja ta działa w Chrome Canary w ramach „Eksperymentalnych funkcji platformy internetowej”. zgłaszaną w czasie pisania opinii.

Aby włączyć tę flagę, otwórz Chrome Canary i wejdź na chrome://flags. Następnie włącz „Eksperymentalne funkcje platformy internetowej”. flaga.

Dostępna jest też wersja próbna origin dla deweloperów, którzy chcą przetestować tę funkcję w środowisku produkcyjnym.

Obecnie pracujemy nad plikiem polyfill na potrzeby interfejsu API. Odwiedź repozytorium na stronie github.com/oddbird/popup-polyfill.

Możesz sprawdzić dostępność wyskakujących okienek w tych usługach:

const supported = HTMLElement.prototype.hasOwnProperty("popover");

Bieżące rozwiązania

Co możesz zrobić, aby promować swoje treści na tle innych materiałów? Jeśli Twoja przeglądarka go obsługuje, możesz użyć elementu okna HTML. Musisz go użyć w sekcji „Modal” formularza. Wymaga to obsługi JavaScriptu.

Dialog.showModal();

Należy wziąć pod uwagę pewne ułatwienia dostępu. Zalecane jest użycie elementu a11y-dialog, np. w przypadku przeglądarki Safari w wersji starszej niż 15.4.

Możesz też skorzystać z jednej z wielu bibliotek opartych na okienkach, alertach lub etykietkach. Wiele z nich działa w ten sam sposób.

• Dołącz kontener do treści, aby wyświetlać okienka wyskakujące.
• Dostosuj styl tak, aby znajdował się nad wszystkimi innymi elementami.
• Utwórz element i dołącz go do kontenera, aby wyświetlać wyskakujące okienko.
• Ukryj go, usuwając element popover z DOM.

Wymaga to od deweloperów większej zależności i większej liczby decyzji. Wymaga też badań w celu znalezienia oferty, która zapewni Ci wszystko, czego potrzebujesz. Interfejs Popover API obsługuje wiele scenariuszy, w tym podpowiedzi. Celem jest uwzględnienie wszystkich typowych scenariuszy, dzięki czemu deweloperzy nie muszą podejmować kolejnej decyzji i mogą się skupić na tworzeniu własnych rozwiązań.

Twoje pierwsze wyskakujące okienko

To wszystko, czego potrzebujesz.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

Ale co się tutaj dzieje?

• Nie musisz umieszczać tego elementu w kontenerze ani w żaden inny sposób – domyślnie jest on ukryty.
• Nie musisz pisać żadnego JavaScriptu, aby wyświetlać reklamy. Jest ona obsługiwana przez atrybut popovertoggletarget.
• Gdy się pojawia, awansuje się do najwyższej warstwy. Oznacza to, że zostanie ona awansowana do document w widocznym obszarze. Nie musisz zarządzać interfejsem z-index ani martwić się, gdzie znajduje się Twoje okienko w DOM. Może być głęboko zagnieżdżona w modelu DOM, z elementami nadrzędnymi przycinania. Za pomocą Narzędzi deweloperskich możesz też sprawdzić, które elementy są obecnie w górnej warstwie. Więcej informacji na temat górnej warstwy znajdziesz w tym artykule.

• Zobaczysz „Lekkie zamknięcie” gotowego działania. Oznacza to, że możesz zamknąć wyskakujące okienko, informując go np. o kliknięciu poza oknem, przejściu z klawiatury do innego elementu lub naciśnięciem klawisza Esc. Otwórz ją ponownie i spróbuj.

Co jeszcze możesz zyskać dzięki popoverowi? Przyjrzyjmy się temu przykładowi dalej. Przyjrzyj się tej wersji demonstracyjnej wraz z treściami na stronie.

Pływający przycisk polecenia ma stałe położenie i wysoką wartość z-index.

.fab {
  position: fixed;
  z-index: 99999;
}

Zawartość wyskakującego okienka jest zagnieżdżona w modelu DOM, ale po jego otwarciu zostanie przesunięta nad element o stałej pozycji. Nie musisz ustawiać żadnych stylów.

Możesz też zauważyć, że wyskakujące okienko ma teraz pseudoelement ::backdrop. Wszystkie elementy, które znajdują się w górnej warstwie, otrzymują pseudoelement ::backdrop z możliwością określenia stylu. W tym przykładzie styl ::backdrop ma zmniejszony kolor tła w wersji alfa i filtr tła, który zamazuje treść podstawową.

Ustawianie stylu wyskakującego okienka

Zwróćmy uwagę na styl wyskakującego okienka. Domyślnie wyskakujące okienko ma stałą pozycję i pewne dopełnienie. Występuje też display: none. Można to zmienić, aby wyświetlać wyskakujące okienko. Nie sprawi to jednak, że zostanie ona przeniesiona na najwyższą warstwę.

[popover] { display: block; }

Niezależnie od tego, jak promujesz wyskakujące okienko, po przeniesieniu go na górną warstwę trzeba je rozmieścić lub ułożyć. Nie można ustawić kierowania na górną warstwę.

:open {
  display: grid;
  place-items: center;
}

Domyślnie wyskakujące okienko jest umieszczane na środku widocznego obszaru za pomocą elementu margin: auto. Zdarzają się jednak sytuacje, w których chcesz jasno określić swoje stanowisko. Na przykład:

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

Jeśli chcesz rozmieścić zawartość wewnątrz wyskakującego okienka za pomocą siatki CSS lub Flexbox, warto umieścić to w elemencie. W przeciwnym razie musisz zadeklarować oddzielną regułę, która zmienia display, gdy wyskakujące okienko znajdzie się w górnej warstwie. Jeśli ustawisz tę zasadę jako domyślną, domyślnie zastąpi ona display: none.

[popover]:open {
 display: flex;
}

Po wypróbowaniu tej wersji można zauważyć, że wyskakujące okienko przechodzi teraz i znika. Wyskakujące okienka możesz włączać i wyłączać za pomocą pseudoselektora :open. Pseudoselektor :open dopasowuje wyskakujące okienka, które wyświetlają się (i tym samym w górnej warstwie).

W tym przykładzie do przeprowadzenia przejścia używana jest właściwość niestandardowa. Możesz też zastosować przejście do elementu ::backdrop wyskakującego okienka.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

Wskazówka: przejścia i animacje należy pogrupować w zapytaniu o multimedia dla ruchu. Dzięki temu zachowasz też odpowiedni czas. Dzieje się tak, ponieważ nie można udostępniać wartości między popover a ::backdrop za pomocą właściwości niestandardowej.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

Do tej pory zdarzyło Ci się korzystać z elementu popovertoggletarget w celu wyświetlania wyskakujących okienek. Aby ją zamknąć, używamy funkcji „Lekkie zamknięcie”. Otrzymujesz jednak również atrybuty popovershowtarget i popoverhidetarget, których możesz użyć. Dodajmy do wyskakującego okienka przycisk, który go ukrywa, i zmieńmy przycisk przełączania na popovershowtarget.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

Jak już wspomnieliśmy, interfejs Popover API obejmuje więcej niż tylko dotychczasowe pojęcie wyskakujących okienek. Można ją tworzyć na potrzeby wszystkich typów scenariuszy, takich jak powiadomienia, menu, etykietki itp.

Niektóre z tych scenariuszy wymagają zastosowania różnych wzorców interakcji. Interakcje takie jak najechanie kursorem. W ramach eksperymentów ze stosowania atrybutu popoverhovertarget nie jest ono jeszcze zaimplementowane.

<div popoverhovertarget="hover-popover">Hover for Code</div>

Chodzi o to, że po najechaniu kursorem na element wyświetli się jego wartość docelowa. To zachowanie można skonfigurować za pomocą właściwości CSS. Te właściwości CSS określałyby przedział czasu, po którym można najechać na element, na który zareaguje okienko popover. Domyślny sposób działania, w którego przypadku eksperymentowano, pojawiał się w wyskakującym okienku po wyraźnym 0.5s wynoszącym :hover. Następnie trzeba będzie lekko zamknąć lub otworzyć kolejne wyskakujące okienko, żeby je zamknąć (więcej informacji na ten temat wkrótce). Było to spowodowane ustawieniem czasu trwania ukrywania elementów pop-over na Infinity.

Do tego czasu możesz użyć JavaScriptu, by polyfill tę funkcję wykorzystać.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopOver();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

Zaletą takiego elementu jest to, że pozwala ono zagwarantować, że działanie użytkownika było celowe (np. gdy użytkownik umieści wskaźnik myszy nad celem). Nie chcemy wyświetlać wyskakującego okienka, chyba że jest to zamierzone.

Wypróbuj tę wersję demonstracyjną, w której możesz najechać kursorem na element docelowy w oknie ustawionym na 0.5s.

Zanim omówimy typowe przypadki użycia i przykłady, przyjrzyjmy się kilku kwestiom.

Typy wyskakujących okienek

Omówiliśmy interakcje bez JavaScriptu. A co z ogólnym sposobem działania wyskakujących okienek. A jeśli nie chcesz używać jasnego zamknięcia? A może chcesz zastosować pojedynczy wzorzec do wyskakujących okienek?

Interfejs Popover API umożliwia określenie trzech typów wyskakujących okienek, które różnią się pod względem działania.

[popover=auto]/[popover]:

• Pomoc dotycząca wdrażania. Oznacza to nie tylko zagnieżdżenie w DOM. Definicja wyskakującego okienka to:
  • powiązane według pozycji DOM (element podrzędny).
  • powiązane dzięki atrybutom aktywującym elementy podrzędne, takie jak popovertoggletarget, popovershowtarget itd.
  • związane z atrybutem anchor (w trakcie opracowywania CSS Anchoring API).
• Jasne zamknięcie.
• Otwarcie powoduje odrzucenie innych wyskakujących okienek, które nie są popoverami nadrzędnymi. Skorzystaj z poniższej prezentacji, która pokazuje, jak działa gniazdowanie za pomocą popoverów przodków. Zobacz, jak zmiana niektórych z popoverhidetarget/popovershowtarget instancji na popovertoggletarget może wpłynąć na zmiany.
• Potencjał odrzucenia jednego powoduje odrzucenie wszystkich, a odrzucenie jednej osoby w grupie eliminuje tylko te znajdujące się w stosie.

[popover=manual]:

• Nie zamyka innych okien pop-over.
• Nie świeci się światło.
• Wymaga jawnego zamknięcia za pomocą elementu aktywatora lub kodu JavaScript.

JavaScript API

Jeśli chcesz mieć większą kontrolę nad wyskakującymi okienkami, wykorzystaj JavaScript. Korzystasz zarówno z metody showPopover, jak i hidePopover. Masz też zdarzenia popovershow i popoverhide nasłuchiwane:

Pokaż wyskakujące okienko js popoverElement.showPopover() Ukrywanie wyskakującego okienka:

popoverElement.hidePopover()

Nasłuchuj wyskakującego okienka:

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

Sprawdź, czy wyskakujące okienko się wyświetla, i anuluj jego wyświetlanie:

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

Nasłuchiwanie ukrywania wyskakującego okienka:

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

Nie można anulować ukrywania wyskakującego okienka:

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

Sprawdź, czy wyskakujące okienko znajduje się w górnej warstwie:

popoverElement.matches(':open')

Zapewnia to dodatkową energię w niektórych mniej typowych sytuacjach. Możesz na przykład wyświetlać wyskakujące okienko po okresie braku aktywności.

W tej wersji demonstracyjnej znajdują się okienka z klikniętymi okienkami, więc do ich odtwarzania będzie potrzebny JavaScript. Po kliknięciu ukrywamy wyskakujące okienko, odtwarzamy dźwięk i wyświetlamy go ponownie.

Ułatwienia dostępu

Ułatwienia dostępu są priorytetem w pracy nad interfejsem Popover API. W razie potrzeby mapowania ułatwień dostępu łączą wyskakujące okienko z elementem wyzwalacza. Oznacza to, że nie musisz deklarować atrybutów aria-*, takich jak aria-haspopup, przy założeniu, że używasz jednego z atrybutów aktywujących, takich jak popovertoggletarget.

W przypadku zarządzania ostrością możesz użyć atrybutu autofokus, aby przenieść zaznaczenie na element wewnątrz wyskakującego okienka. Ta funkcja jest taka sama jak w przypadku dialogu, ale różnica pojawia się przy ponownym skupieniu, czyli pomniejszeniu obrazu. W większości przypadków zamknięcie wyskakującego okienka powoduje powrót do poprzednio wybranego elementu. Ostrość jest jednak przenoszona na kliknięty element po wyłączeniu światła, jeśli może on uzyskać ostrość. Zapoznaj się z sekcją poświęconą zarządzaniu skupieniem w wyjaśnieniu.

Musisz otworzyć „wersję pełnoekranową”. aby przekonać się, jak działa.

W tej wersji demonstracyjnej zaznaczony element ma zielony kontur. Spróbuj poruszać się klawiszem Tab po interfejsie za pomocą klawiatury. Zwróć uwagę, gdzie zaznaczenie powraca, gdy wyskakujące okienko zostanie zamknięte. Możesz też zauważyć, że gdy przechodzisz na kartę, wyskakujące okienko się zamknęło. To zaprojektowane z myślą o tym. Wyskakujące okienka umożliwiają zarządzanie koncentracją, ale nie są rozpraszające. Nawigacja za pomocą klawiatury wykrywa sygnał zamknięcia, gdy zaznaczenie przechodzi poza okienko.

Kotwica (w trakcie opracowywania)

Jeśli chodzi o popovery, trudny wzorzec do obserwacji to zakotwiczenie elementu na jego wyzwalaczu. na przykład wtedy, gdy etykietka jest ustawiona tak, aby wyświetlała się nad regułą, ale dokument został przewinięty. Ta etykietka może zostać obcięta przez widoczny obszar. Istnieją aktualne rozwiązania JavaScriptu, które sobie z tym radzą, na przykład „Pływający interfejs użytkownika”. Zmieni ona położenie etykietki, aby to uniemożliwić i zależy od wybranej kolejności pozycji.

Chcemy jednak, aby użytkownicy mogli to określać za pomocą swoich stylów. Żeby rozwiązać ten problem, oprócz interfejsu Popover API pracujemy też nad interfejsem API towarzyszącym. Metoda „Pozycjonowanie zakotwiczonych CSS” Interfejs API umożliwia powiązanie elementów z innymi elementami, zmieniając położenie elementów tak, aby nie były odcięte w widocznym obszarze.

Ta wersja demonstracyjna używa interfejsu Anchoring API w obecnym stanie. Położenie łodzi zależy od pozycji reklamy zakotwiczonej w widocznym obszarze.

Oto fragment kodu CSS, który pozwala korzystać z tej wersji demonstracyjnej. JavaScript nie jest wymagany.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

Tutaj możesz sprawdzić specyfikację. Dla tego interfejsu API dostępny będzie też kod polyfill.

Przykłady

Wiesz już, jakie możliwości oferuje popover i jak to robić. Przyjrzyjmy się kilku przykładom.

Powiadomienia

Ta wersja demonstracyjna pokazuje opcję „Kopiuj do schowka” powiadomienia.

• Używana strefa czasowa: [popover=manual].
• Wyskakujące okienko z podglądem akcji (showPopover).
• Po upływie czasu oczekiwania 2000ms ukryj je za pomocą funkcji hidePopover.

Tosty

Ta wersja demonstracyjna używa górnej warstwy do wyświetlania powiadomień w stylu powiadomień.

• Kontenerem jest jedno wyskakujące okienko typu manual.
• Nowe powiadomienia zostaną dodane do wyskakującego okienka i pojawi się ono.
• Usuwamy je przy użyciu interfejsu API animacji internetowych po kliknięciu i z modelu DOM.
• Jeśli nie ma powiadomień do wyświetlenia, okienko wyskakujące jest ukryte.

Menu zagnieżdżone

Ta wersja demonstracyjna pokazuje, jak może działać zagnieżdżone menu nawigacyjne.

• Użyj zasady [popover=auto], ponieważ zezwala ona na zagnieżdżone okienka wyskakujące.
• Aby poruszać się za pomocą klawiatury, w pierwszym linku w każdym menu kliknij autofocus.
• To idealna kandydatura na interfejs CSS Anchoring API. W tej wersji demonstracyjnej możesz jednak użyć niewielkiej ilości kodu JavaScript, aby zaktualizować pozycje za pomocą właściwości niestandardowych.

const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

Pamiętaj, że ta wersja demonstracyjna używa języka autofocus, więc trzeba ją otworzyć w „widoku pełnoekranowym”. do nawigowania za pomocą klawiatury.

Wyskakujące okienko multimediów

Ta wersja demonstracyjna pokazuje, jak możesz wyświetlać multimedia w wyskakujących okienkach.

• Używa [popover=auto] do wyłączenia światła.
• JavaScript nasłuchuje zdarzenia play związanego z filmem i wyświetla go.
• Zdarzenie popoverhide w wyskakującym okienku wstrzymuje odtwarzanie filmu.

Wyskakujące okienka w stylu wiki

Ten przykład pokazuje, jak utworzyć wbudowane etykietki treści z multimediami.

• Używana strefa czasowa: [popover=auto]. Ukrycie jednej osoby powoduje ukrycie pozostałych, ponieważ nie są one przodkami.
• Wyświetlane w witrynie pointerenter z JavaScriptem.
• Kolejna doskonała propozycja do użycia interfejsu CSS Anchoring API.

Panel nawigacji

Ta wersja demonstracyjna tworzy panel nawigacji za pomocą wyskakującego okienka.

• Używa [popover=auto] do wyłączenia światła.
• Używa autofocus do zaznaczenia pierwszego elementu nawigacji.

Zarządzanie tłem

Ta wersja demonstracyjna pokazuje, jak zarządzać tłem dla wielu wyskakujących okienek, gdy chcesz, by widoczny był tylko jeden element ::backdrop.

• Aby utworzyć listę widocznych wyskakujących okienek, użyj JavaScriptu.
• Zastosuj nazwę klasy do najniższego okienka w górnej warstwie.

Niestandardowe wyskakujące okienko kursora

Ta demonstracja pokazuje, jak za pomocą elementu popover przenieść element canvas do górnej warstwy i wyświetlić niestandardowy kursor.

• Przenieś canvas na najwyższą warstwę za pomocą: showPopover i [popover=manual].
• Po otwarciu innych wyskakujących okienek ukryj i wyświetl okno canvas, aby mieć pewność, że jest na górze.

Wyskakujące okienko arkusza działań

Ta demonstracja pokazuje, jak można wykorzystać wyskakujące okienko jako arkusz działań.

• Domyślnie wyskakujące okienko zastępuje display.
• Arkusz działań jest otwierany za pomocą aktywatora wyskakującego.
• Po wyświetleniu wyskakujące okienko jest przesuwane na górę warstwy i tłumaczone na widok.
• Aby je zwrócić, możesz użyć efektu lekkiego zamknięcia.

Wyskakujące okienko aktywowane przez klawiaturę

Ten przykład pokazuje, jak można użyć wyskakującego okienka w interfejsie stylu palety poleceń.

• Aby wyświetlić okienko wyskakujące, użyj cmd + J.
• input dotyczy pola autofocus.
• Pole kombi to drugi element popover znajdujący się pod głównymi danymi wejściowymi.
• Jasne zamknięcie zamyka paletę, jeśli nie ma menu.
• Kolejny kandydat do interfejsu Anchoring API

Wyskakujące okienko z opóźnieniem

Ta wersja demonstracyjna pokazuje wyskakujące okienko braku aktywności po 4 sekundach. Wzorzec interfejsu często używany w aplikacjach zawierających bezpieczne informacje o użytkowniku na potrzeby wyświetlania okna wylogowania.

• Aby wyświetlić wyskakujące okienko po okresie braku aktywności, użyj JavaScriptu.
• Zresetuj licznik podczas wyświetlania w wyskakującym okienku.

Wygaszacz ekranu

Podobnie jak w poprzedniej wersji demonstracyjnej możesz dodać do swojej strony odrobinę humoru i dodać wygaszacz ekranu.

• Aby wyświetlić wyskakujące okienko po okresie braku aktywności, użyj JavaScriptu.
• Zatrzymanie lampki w celu ukrycia i zresetowania minutnika.

Monitorowanie kursora

Ta wersja demonstracyjna pokazuje, jak sprawić, aby wyskakujące okienko wyświetlało się po znaku wejściowym.

• Wyświetlaj wyskakujące okienko na podstawie wyboru, kluczowego zdarzenia lub wpisywania znaków specjalnych.
• Użyj JavaScriptu, aby zaktualizować pozycję wyskakującego okienka za pomocą właściwości niestandardowych o zakresie.
• Taki wzorzec wymagałoby przemyślanego podejścia do prezentowanych treści i ułatwień dostępu.
• Często można ją zobaczyć w interfejsie do edycji tekstu i w aplikacjach, w których można dodawać tagi.

Menu pływającego przycisku polecenia

Ten przykład pokazuje, jak za pomocą wyskakującego okienka zaimplementować pływające menu z przyciskiem polecenia bez JavaScriptu.

• Promuj wyskakujące okienko typu manual za pomocą metody showPopover. To jest przycisk główny.
• To kolejne okno, w którym znajduje się przycisk główny.
• Menu jest otwarte w aplikacji popovertoggletarget.
• Naciśnij autofocus, aby zaznaczyć pierwszą pozycję menu w programie.
• Zamykanie lampki zamyka menu.
• Skręt ikony wykorzystuje wartość :has(). Więcej informacji o :has() znajdziesz w tym artykule.

Znakomicie.

To wprowadzenie do tematu popovera – w ramach inicjatywy Open UI. Użyte rozsądnie rozwiązanie stanie się wspaniałym dodatkiem do platformy internetowej.

Zapoznaj się z otwartym interfejsem. Wyjaśnienie w formie wyskakującej jest aktualizowane w miarę rozwoju interfejsu API. A oto kolekcja wszystkich wersji demonstracyjnych.

Dzięki za świetną atmosferę.

Fot. Madison Oren na kanale Unsplash