Hover Card
StabilnyPodgląd treści, która kryje się za linkiem — osoby, repozytorium, strony — wyświetlany po najechaniu na link lub ustawieniu na nim fokusu.
Zrecenzowane przez @grace 2 godz. temu
Instalacja
$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/hover-card.jsonUżycie
import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
} from "@/components/ui/hover-card"<HoverCard>
<HoverCardTrigger href="/people/grace">@grace</HoverCardTrigger>
<HoverCardContent>{/* profile preview */}</HoverCardContent>
</HoverCard>HoverCardTrigger renderuje prawdziwy element <a>: podgląd tylko wzbogaca link, który działa samodzielnie. Komponent jest zbudowany na Preview Card z Base UI.
Przykłady
Podgląd zgłoszenia
Karta podglądu świetnie sprawdza się przy odwołaniach do zgłoszeń, pull requestów i dokumentów: odpowiada na pytanie co to jest i czy jest już zrobione? bez jednego kliknięcia. Ogranicz ją do nazwy, statusu i jednej lub dwóch linijek kontekstu.
Naprawione w DAT-1284, dostępne od wersji 1.4.2.
Podgląd linku
Pokaż, dokąd prowadzi link zewnętrzny, zanim ktoś zdecyduje się opuścić stronę. Tutaj karta otwiera się nad linkiem (side="top"), a metadane trafiają do zabarwionej stopki.
prfct jest zbudowany na mui/base-ui, prymitywach bez stylów od twórców Radix, Floating UI i Material UI.
Opóźnienie
delay (domyślnie 600 ms) i closeDelay (300 ms) na wyzwalaczu decydują, jak celowe musi być najechanie. Długie opóźnienia sprawiają, że karty nie migają, gdy kursor przemierza stronę; krótkie pasują do gęstych list, które ktoś świadomie przegląda.
Wytyczne
Kiedy używać
- Do podglądu miejsca, do którego prowadzi link: osoby, zgłoszenia, repozytorium, dokumentu.
- Gdy podgląd pomaga zdecydować, czy przejść dalej, ale do tego nie zmusza.
Kiedy nie używać
- Do kluczowych informacji — na urządzeniach dotykowych karty podglądu w ogóle się nie pojawiają, a i bez tego łatwo je przeoczyć. Umieść takie informacje na stronie.
- Do zadań interaktywnych — użyj komponentu Popover, który otwiera się po kliknięciu i może zawierać formularze.
- Do jednolinijkowej etykiety — wystarczy Tooltip.
Podgląd, nie strona
Karta ma potwierdzić: tak, tego właśnie szukasz. Jeśli zaczynasz dodawać do niej zakładki, listy albo kilka akcji, podlinkuj zamiast tego osobną stronę.
Dostępność
Karta podglądu to wizualne udogodnienie dla widzących osób, które korzystają z myszy lub klawiatury. Otwiera się po najechaniu na link i wtedy, gdy link dostaje fokus z klawiatury, ale nie jest ogłaszana, a link się do niej nie odwołuje — osoby korzystające z czytników ekranu poznają więc sam link. Traktuj kartę jako opcjonalny kontekst.
| Klawisz | Działanie |
|---|---|
Tab | Gdy link dostaje fokus, karta otwiera się po upływie opóźnienia. |
Enter | Otwiera link. |
Esc | Zamyka kartę. |
- Link musi się bronić sam. Jego tekst powinien mówić, dokąd prowadzi; karta tylko dodaje kontekst.
- Nie ukrywaj w niej rzeczy kluczowych. Nic, co trzeba wiedzieć lub zrobić, nie może istnieć wyłącznie w karcie podglądu.
- Można na nią najechać. Przesunięcie kursora z linku na kartę utrzymuje ją otwartą, o ile zmieścisz się w
closeDelay.
Dokumentacja API
HoverCard
Komponent główny. Nie renderuje żadnego elementu. Przyjmuje wszystkie propsy PreviewCard.Root z Base UI.
HoverCardTrigger
Link, który otwiera kartę. Renderuje <a> i przyjmuje wszystkie atrybuty odnośnika.
HoverCardContent
Renderuje portal, element pozycjonujący i wyskakujące okienko.