Celem inicjatywy dotyczącej otwartego interfejsu użytkownika jest ułatwienie deweloperom tworzenia wrażeń dla 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 obszarów problemowych są wyskakujące okienka, które w interfejsie Open UI są nazywane „wyskakującymi”.
Od dawna mają raczej mieszane opinie. Wynika to częściowo ze sposobu ich tworzenia i wdrażania. Nie jest to łatwy do stworzenia wzór, ale może on przynieść wiele korzyści, ponieważ kieruje użytkowników do określonych treści lub informuje ich o ich istnieniu w Twojej witrynie – zwłaszcza gdy jest to zrobione w smaczny sposób.
Podczas tworzenia wyskakujących okienek często pojawiają się 2 główne kwestie:
- jak upewnić się, że zostanie ona umieszczona nad resztą treści w odpowiednim miejscu.
- Jak ułatwić dostęp do treści (np. czytelne dla osób korzystających z klawiatury).
Wbudowany interfejs Popover API ma różne cele związane z tym samym nadrzędnym celem, którym jest ułatwienie deweloperom opracowania zgodnego z nimi wzorca. Do najważniejszych z nich należą:
- Zadbaj o łatwe wyświetlanie elementu i jego elementów podrzędnych nad pozostałą częścią dokumentu.
- Zadbaj o przystępność.
- Nie wymagają JavaScriptu w przypadku większości typowych zachowań (lekkie zamknięcie, pojedynczy element, układanie itp.).
Pełną specyfikację wyskakujących okienek znajdziesz na stronie OpenUI.
Zgodność z przeglądarką
Gdzie można teraz używać wbudowanego interfejsu Popover API? W chwili pisania tych informacji jest ona obsługiwana w Chrome Canary za pomocą flagi „Experimental web platform features” (Eksperymentalne funkcje platformy internetowej).
Aby włączyć tę flagę, otwórz Chrome Canary i wejdź na stronę chrome://flags. Następnie włącz flagę „Eksperymentalne funkcje platformy internetowej”.
Dostępna jest też wersja próbna origin dla deweloperów, którzy chcą przetestować tę funkcję w środowisku produkcyjnym.
W trakcie tworzenia jest też polyfill dla interfejsu API. Sprawdź repozytorium github.com/oddbird/popup-polyfill.
Obsługę wyskakujących okienek możesz sprawdzić:
const supported = HTMLElement.prototype.hasOwnProperty("popover");
Obecne rozwiązania
Co możesz zrobić, aby promować swoje treści ponad wszystko inne? Jeśli Twoja przeglądarka go obsługuje, możesz użyć elementu okna HTML. Musisz użyć go w formie „Okno modalne”. Do tego wymagany jest JavaScript.
Dialog.showModal();
Należy wziąć pod uwagę pewne ułatwienia dostępu. Zalecamy użycie a11y-dialog, jeśli np. chcesz uwzględnić użytkowników Safari w wersji niższej niż 15.4.
Możesz też użyć jednej z wielu bibliotek, które zawierają okienka, alerty lub etykietki. 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.
- Aby wyświetlić wyskakujące okienko, utwórz element i dodaj go do kontenera.
- Ukryj go, usuwając element popover z DOM.
Wymaga to dodatkowej zależności i podjęcia przez deweloperów większej liczby decyzji. Wymaga to też przeprowadzenia badań, aby znaleźć ofertę, która zapewnia wszystko, czego potrzebujesz. Interfejs API Popover jest przeznaczony do wielu scenariuszy, w tym do etykiet narzędzia. Celem jest uwzględnienie wszystkich typowych scenariuszy, aby deweloperzy nie musieli podejmować kolejnych decyzji i mogli skupić się na tworzeniu aplikacji.
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>
Co się tutaj dzieje?
- Nie musisz umieszczać elementu wyskakującego w kontenerze ani nigdzie indziej – jest on domyślnie ukryty.
- Aby wyświetlić ten element, nie musisz pisać kodu JavaScript. Jest ona obsługiwana przez atrybut
popovertoggletarget. - Gdy się pojawi, zostanie przeniesiony na najwyższą warstwę. Oznacza to, że jest ona promowana w widocznym obszarze nad
document. Nie musisz zarządzać elementemz-indexani martwić się o to, gdzie w modelu DOM znajduje się Twoje menu wyskakujące. Może być głęboko zagnieżdżony w DOM z elementami przodków z przyciętym tekstem. Za pomocą DevTools możesz też sprawdzić, które elementy znajdują się obecnie w górnej warstwie. Więcej informacji o najwyższym poziomie znajdziesz w tym artykule.
- Od razu masz do wyboru funkcję „Leke zamknięcie”. Oznacza to, że możesz zamknąć wyskakujące okienko, informując je np. przez kliknięcie poza oknem, przejście do innego elementu z klawiatury lub naciśnięcie klawisza Esc. Otwórz ją ponownie i spróbuj.
Co jeszcze możesz zrobić za pomocą wyskakującego okienka? Przyjrzyjmy się temu przykładowi dalej. Rozważ to demo z kilkoma treściami na stronie.
Pływający przycisk polecenia ma stałe położenie z wysoką wartością 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 w górnej warstwie otrzymują pseudoelement ::backdrop, który można stylizować. W tym przykładzie element ::backdrop ma stylizowane tło z ograniczonym kolorem alfa i filtrem tła, który rozmywa tło.
Ustawianie stylu wyskakującego okienka
Skupmy się teraz na nadawaniu stylu wyskakującemu oknu. Domyślnie wyskakujące okienko ma stałą pozycję i niewielkie wypełnienie. Ma też display: none. Możesz zastąpić to, aby wyświetlić wyskakujące okienko. Nie sprawi to jednak, że zostanie ona przeniesiona na najwyższą warstwę.
[popover] { display: block; }
Niezależnie od tego, jak promujesz pop-up, po przeniesieniu go na najwyższą warstwę może być konieczne jego rozmieszczenie lub ustawienie. Nie możesz kierować reklam na najwyższą warstwę i robić takich rzeczy jak
:open {
display: grid;
place-items: center;
}
Domyślnie okienko wyskokowe jest wyświetlane na środku widoku w ramach margin: auto. W niektórych przypadkach warto jednak wyraźnie określić pozycjonowanie. 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 element w elemencie. W przeciwnym razie musisz zadeklarować osobną regułę, która zmienia display, gdy wyskakujące okienko znajduje się w górnej warstwie. Ustawienie domyślne spowoduje, że opcja będzie wyświetlana domyślnie, zastępując display: none.
[popover]:open {
display: flex;
}
Jeśli wypróbowałeś/wypróbowałaś to demo, zauważysz, że wyskakujące okienko jest teraz wyświetlane i ukrywane. Wyskakujące okienka możesz włączać i wyłączać za pomocą pseudoselektora :open. Pseudoselektor :open pasuje do wyskakujących okienek, które są widoczne (a więc znajdują się w górnej warstwie).
W tym przykładzie do przeprowadzenia przejścia użyto właściwości niestandardowej. Możesz też zastosować przejście do ::backdrop.
[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;
}
Naszą radą jest grupowanie przejść i animacji w ramach zapytania o media dotyczące ruchu. Pomaga to też w utrzymywaniu ustawionego czasu. Dzieje się tak, ponieważ nie można udostępniać wartości między popover i ::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 używaliśmy funkcji popovertoggletarget do wyświetlania wyskakujących okienek. Aby zamknąć okno, używamy opcji „Lekkie zamknięcie”. Otrzymujesz jednak również atrybuty popovershowtarget i popoverhidetarget, których możesz użyć. Dodamy przycisk do wyskakującego okienka, który go ukrywa, i zmienimy 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 API Popup obejmuje nie tylko nasze historyczne 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ą różnych wzorów interakcji. Interakcje takie jak najechanie kursorem. Przetestowaliśmy użycie atrybutu popoverhovertarget, ale nie jest on obecnie wdrażany.
<div popoverhovertarget="hover-popover">Hover for Code</div>
Zasada jest taka, że najedź kursorem na element, aby wyświetlić cel. 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ć kursorem na element i z niego usunąć. W eksperymencie z domyślnym działaniem wyświetlało się wyskakujące okienko po wyraźnym 0.5s :hover. Następnie musisz odrzucić to ostrzeżenie lub otworzyć kolejne wyskakujące okienko (więcej informacji na ten temat znajdziesz poniżej). Wynikało to z ustawienia czasu ukrywania wyskakującego okienka 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ą ustawienia okna najechania kursorem jest to, że użytkownik wykonuje działanie celowo (np. przesuwa kursor nad elementem docelowym). Nie chcemy wyświetlać wyskakującego okienka, chyba że jest to zamierzone.
Wypróbuj tę wersję demonstracyjną, w której możesz najeżdżać kursorem na cel, gdy okno jest ustawione na 0.5s.
Zanim omówimy typowe przypadki użycia i przykłady, przyjrzyjmy się kilku kwestiom.
Typy wyskakujących okienek
Omówiliśmy już zachowanie w przypadku interakcji 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ć w przypadku wyskakujących okienek wzór pojedynczego elementu?
Interfejs API Popover umożliwia określenie 3 typów pop-upów, które różnią się zachowaniem.
[popover=auto]/[popover]:
- Wsparcie dotyczące umieszczania. Oznacza to nie tylko zagnieżdżenie w DOM. Definicja okna wyskakującego z danymi przodków:
- powiązane przez pozycję DOM (podrzędny).
- powiązane atrybutami wywołania w elementach podrzędnych, takimi jak
popovertoggletarget,popovershowtargetitp. - powiązane z atrybutem
anchor(interfejs CSS Anchoring API jest w fazie opracowywania).
- Zamknij światło.
- Otwieranie innych wyskakujących okienek, które nie są pochodnymi wyskakujących okienek. Skorzystaj z poniższej prezentacji, która pokazuje, jak działa gniazdowanie za pomocą popoverów przodków. Zobacz, jak zmiana niektórych wystąpień
popoverhidetarget/popovershowtargetnapopovertoggletargetwpływa na wyniki. - Lampka odrzuca jedno z nich, a odrzucenie jednej z nich w grupie odrzuca tylko te znajdujące się nad nią w grupie.
[popover=manual]:
- Nie zamyka innych okien pop-over.
- Brak oświetlenia.
- Wymaga jawnego odrzucenia za pomocą elementu reguły lub kodu JavaScript.
JavaScript API
Jeśli chcesz mieć większą kontrolę nad wyskakującymi okienkami, możesz użyć JavaScript. Masz do dyspozycji metodę showPopover i hidePopover. Do odebrania są też zdarzenia popovershow i popoverhide:
Wyświetlanie wyskakującego okienka
js
popoverElement.showPopover()
Ukrywanie wyskakującego okienka:
popoverElement.hidePopover()
Poczekaj na wyświetlenie wyskakującego okienka:
popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)
Posłuchaj, 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’);
})
Sprawdź, czy okienko zostało ukryte:
popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)
Nie można anulować ukrycia 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')
Daje to dodatkowe możliwości w niektórych rzadszych 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 odtwarzania dźwięku będzie potrzebny JavaScript. Po kliknięciu ukrywamy wyskakujące okienko, odtwarzamy dźwięk, a potem znów je wyświetlamy.
Ułatwienia dostępu
W przypadku interfejsu Popover API na pierwszym miejscu stawiamy ułatwienia dostępu. Mapowania ułatwień dostępu w razie potrzeby powiązają wyskakujące okienko z odpowiednim elementem wywoławczym. Oznacza to, że nie musisz deklarować atrybutów aria-*, takich jak aria-haspopup, jeśli używasz jednego z atrybutów wywołujących, takich jak popovertoggletarget.
Aby zarządzać punktem skupienia, możesz użyć atrybutu autofocus, aby przenieść go do elementu w wyskakującym okienku. Jest to takie samo jak w przypadku dialogu, ale różnica pojawia się, gdy przywracasz fokus. Dzieje się tak z powodu lekkiego odrzucenia. W większości przypadków zamknięcie wyskakującego okienka powoduje powrót do wcześniej aktywnego elementu. Jednak w przypadku lekkiego zamknięcia fokus przenosi się na kliknięty element, jeśli można go zaznaczyć. Zapoznaj się z sekcją poświęconą zarządzaniu skupieniem w wyjaśnieniu.
Aby zobaczyć, jak to działa, musisz otworzyć „wersję na pełny ekran” tego demonstracyjnego dokumentu.
W tym pokazie element, na którym jest skupiona uwaga, ma zielone obramowanie. Spróbuj poruszać się po interfejsie za pomocą klawiatury. Zwróć uwagę, gdzie wróci fokus po zamknięciu wyskakującego okienka. Możesz też zauważyć, że po kliknięciu karty wyskakujące okienko się zamknie. To jest celowe. Chociaż okna modalne mają funkcję zarządzania fokusem, nie blokują go. Nawigacja za pomocą klawiatury wykrywa sygnał zamknięcia, gdy zaznaczenie przechodzi poza okienko.
Utwierdzenie pozycji (w fazie rozwoju)
W przypadku wyskakujących okienek trudnym do uwzględnienia wzorcem jest zakotwiczenie elementu do jego elementu wywołującego. 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. Obecnie istnieją rozwiązania JavaScript, które umożliwiają rozwiązanie tego problemu, np. przesuwający się 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. Interfejs API „CSS Anchor Positioning” pozwala na powiązanie elementów z innymi elementami, zmieniając ich położenie tak, aby nie były one przycinane w widocznym obszarze.
Ten pokaz korzysta z interfejsu Anchoring API w jego obecnej wersji. Pozycja łodzi odpowiada pozycji kotwicy w widocznym obszarze.
Oto fragment kodu CSS, który umożliwia działanie tego demonstracyjnego szablonu. Nie wymaga JavaScriptu.
.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);
}
}
Specyfikację znajdziesz tutaj. Dla tego interfejsu API dostępny będzie też kod polyfill.
Przykłady
Teraz, gdy już wiesz, co oferuje wyskakujące okienko i jak z niego korzystać, przyjrzyjmy się kilku przykładom.
Powiadomienia
Ten pokaz demonstruje powiadomienie „Kopiuj do schowka”.
- Używana strefa czasowa:
[popover=manual]. - Po wykonaniu działania wyświetl wyskakujące okienko z
showPopover. - Po wygaśnięciu
2000msukryj go za pomocąhidePopover.
Tosty
W tym pokazie użyjemy górnej warstwy do wyświetlania powiadomień w stylu toast.
- Kontenerem jest jedno wyskakujące okienko typu
manual. - Nowe powiadomienia są dołączane do wyskakującego okienka, które się wyświetla.
- Usuwamy je przy użyciu interfejsu API animacji internetowych po kliknięciu i z modelu DOM.
- Jeśli nie ma żadnych komunikatów, wyskakujące okienko jest ukryte.
Menu zagnieżdżone
Ta wersja demonstracyjna pokazuje, jak może działać zagnieżdżone menu nawigacyjne.
- Użyj
[popover=auto], ponieważ pozwala na zagnieżdżone wyskakujące okienka. - Aby nawigować za pomocą klawiatury, kliknij
autofocusprzy pierwszym linku w każdym menu. - 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 korzysta z autofocus, więc musisz otworzyć ją w trybie „pełny ekran”, aby móc poruszać się po niej za pomocą klawiatury.
Wyskakujące okienko multimediów
Ten pokaz pokazuje, jak można wyświetlić multimedia.
- Używa
[popover=auto]do usuwania powiadomień. - JavaScript nasłuchuje zdarzenia
playzwiązanego z filmem i wyświetla go. - Zdarzenie
popoverhidewstrzymuje film.
Wyskakujące okienka w stylu wiki
Te prezentacje pokazują, jak tworzyć wtapiające się tooltipy z treściami, które zawierają multimedia.
- Używana strefa czasowa:
[popover=auto]. Wyświetlanie jednego z nich powoduje ukrycie pozostałych, ponieważ nie są one wspólne. - Wyświetlane w witrynie
pointerenterz JavaScriptem. - Kolejny idealny kandydat do użycia interfejsu CSS Anchoring API.
Panel nawigacji
W tym pokazie tworzymy szufladę nawigacyjną za pomocą wyskakującego okienka.
- Używa
[popover=auto]do usuwania powiadomień. - Używa
autofocus, aby ustawić fokus na pierwszym elemencie 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.
- Zastosowanie nazwy zajęć do najniższego wyskakującego okienka w górnej warstwie.
Niestandardowe wyskakujące okienko kursora
Ten pokaz demonstruje, jak za pomocą popover przenieść canvas na najwyższą warstwę i wykorzystać go do wyświetlania niestandardowego kursora.
- Przenieś
canvasna najwyższą warstwę za pomocą:showPopoveri[popover=manual]. - Gdy inne wyskakujące okienka są otwarte, ukryj i pokaż wyskakujące okienko
canvas, aby upewnić się, że jest ono 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 wyświetlaj wyskakujące okienko, zastępując
display. - Za pomocą okna wyskakującego otwiera się panel działań.
- Gdy wyskakujące okienko jest wyświetlane, jest przenoszone na najwyższą warstwę i przekształcane w 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ć menu wyskakujące, naciśnij cmd + j.
inputjest skupione naautofocus.- Pole kombi to drugie
popoverznajdujące się pod głównym polem wejściowym. - Lekkie zamknięcie zamyka paletę, jeśli menu nie jest widoczne.
- Inny kandydat do interfejsu Anchoring API
Wyskakujące okienko z opóźnieniem
To demo pokazuje wyskakujące okienko po 4 sekundach bezczynności. Wzorzec interfejsu często używany w aplikacjach zawierających bezpieczne informacje o użytkowniku na potrzeby wyświetlania okna wylogowania.
- Użyj JavaScriptu, aby wyświetlić wyskakujące okienko po okresie bezczynności.
- W wyskakującym okienku zresetuj minutnik.
Wygaszacz ekranu
Podobnie jak w poprzednim pokazie, możesz dodać do swojej witryny odrobinę fantazji i ekran blokady.
- Aby wyświetlić wyskakujące okienko po okresie braku aktywności, użyj JavaScriptu.
- Lekkie dotknięcie, aby ukryć i zresetować minutnik.
Monitorowanie kursora
Ta demonstracja pokazuje, jak sprawić, aby wyskakujące okienko wyświetlało się po znaku wejściowym.
- Wyświetlanie wyskakującego okienka na podstawie wybranego elementu, kluczowego zdarzenia lub wpisanego znaku specjalnego.
- Użyj kodu JavaScript, aby zaktualizować pozycję wyskakującego okienka za pomocą właściwości niestandardowych ograniczonych do zakresu.
- 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 pokaz demonstruje, jak za pomocą wyskakującego okienka można zaimplementować menu przycisku działania bez JavaScriptu.
- Promowanie okna typu
manualza pomocą metodyshowPopover. To jest przycisk główny. - To kolejne okno, w którym znajduje się przycisk główny.
- Menu otwiera się za pomocą
popovertoggletarget. - Naciśnij
autofocus, aby ustawić widok na pierwszym elemencie menu. - Lekkie zamknięcie zamyka menu.
- Skręt ikony wykorzystuje wartość
:has(). Więcej informacji o:has()znajdziesz w tym artykule.
Znakomicie.
To było wprowadzenie do wyskakujących okienek, które wkrótce pojawią się w ramach inicjatywy dotyczącej otwartego interfejsu. Jeśli będziesz go używać w rozsądny sposób, stanie się on fantastycznym dodatkiem do platformy internetowej.
Zapoznaj się z otwartym interfejsem. Pop-up z informacjami jest aktualizowany wraz z rozwojem interfejsu API. A tutaj kolekcja ze wszystkimi prezentacjami.
Dzięki za świetną atmosferę.
Fot. Madison Oren na kanale Unsplash