Przejdź do treści
prfct.dev

Komponenty

Wszystkie komponenty prfct pogrupowane według tego, do czego służą. Każdy jest dostępny, obsługuje motywy, a jego kod należy do ciebie.

Akcje

4
ButtonWywołuje akcję. Najważniejszy element interaktywny każdego interfejsu — i ten, którego najłatwiej nadużyć.
Button GroupŁączy powiązane przyciski, pola i tekst w jedną kontrolkę, dzięki czemu odbiera się je jako jeden zestaw akcji.
ToggleDwustanowy przycisk, który włącza lub wyłącza jedną opcję i pokazuje jej bieżący stan.
Toggle GroupZestaw przycisków przełączających do wyboru jednej opcji — albo kilku — z małego, widocznego zbioru.

Formularze

14
CalendarSiatka miesiąca do wyboru jednej daty, kilku dat lub zakresu — podstawa każdego selektora daty.
CheckboxWłącza lub wyłącza pojedynczą opcję albo zaznacza dowolną liczbę opcji z zestawu — zmiana obowiązuje po wysłaniu formularza.
ComboboxPole tekstowe z filtrowaną listą do wyboru spośród większej liczby opcji, niż wygodnie pomieści lista wyboru.
FieldSystem układu formularzy — etykiety, kontrolki, opisy i błędy rozmieszczone spójnie, dostępnie i przy każdej szerokości.
InputJednowierszowe pole tekstowe na imiona, adresy e-mail, liczby i wyszukiwane frazy — zawsze w parze z widoczną etykietą.
Input GroupPole z dołączonymi ikonami, tekstem, przyciskami lub podpowiedziami klawiszy — z jednym obramowaniem, fokusem i walidacją, jak pojedyncza kontrolka.
Input OTPSegmentowane pole na kody jednorazowe, PIN-y i kody odzyskiwania — z obsługą wklejania, autouzupełniania z SMS-ów i menedżerów haseł.
LabelDostępna nazwa kontrolki formularza. Kliknięcie etykiety ustawia fokus na kontrolce, do której należy, albo ją przełącza.
Native SelectNatywny element select przeglądarki, dopasowany wyglądem do prfct — najlepszy na urządzeniach mobilnych, w długich formularzach i wszędzie tam, gdzie kontrolka ma działać bez JavaScriptu.
Radio GroupPozwala wybrać dokładnie jedną opcję z niewielkiego zestawu, pokazując wszystkie opcje naraz.
SelectPozwala wybrać jedną opcję — albo kilka — z listy, która pozostaje schowana, dopóki nie jest potrzebna.
SliderWybiera wartość lub zakres wartości przez przeciąganie wzdłuż toru — sprawdza się najlepiej, gdy przybliżone położenie liczy się bardziej niż dokładna liczba.
SwitchWłącza lub wyłącza ustawienie — zmiana działa w chwili przełączenia.
TextareaWielowierszowe pole tekstowe, które rośnie razem z treścią — na wiadomości, opisy i opinie.

Nakładki

11
Alert DialogModalne okno potwierdzenia, które zatrzymuje użytkownika przed akcją o poważnych lub nieodwracalnych skutkach. Zamknąć je można tylko, dokonując wyboru.
CommandSzybka, projektowana z myślą o klawiaturze lista poleceń i wyników z wyszukiwaniem rozmytym — osadzona w stronie albo jako paleta ⌘K nad jej treścią.
Context MenuAkcje dla konkretnego obiektu, otwierane prawym przyciskiem myszy lub długim przytrzymaniem dokładnie tam, gdzie jest kursor — skrót, nigdy jedyna droga.
DialogOkno nałożone na stronę, które skupia uwagę na jednym zadaniu i blokuje wszystko inne, dopóki zadanie nie zostanie zakończone albo okno zamknięte.
DrawerPanel projektowany z myślą o dotyku, który wysuwa się od krawędzi, podąża za palcem, zatrzymuje się w punktach przyciągania i zamyka gestem przesunięcia.
Dropdown MenuLista akcji lub opcji rozwijana z wyzwalacza, dzięki której polecenia drugorzędne są o jedno kliknięcie stąd i nie zagracają interfejsu.
Hover CardPodgląd treści, która kryje się za linkiem — osoby, repozytorium, strony — wyświetlany po najechaniu na link lub ustawieniu na nim fokusu.
MenubarStały pasek menu — Plik, Edycja, Widok — który daje aplikacjom klasy desktopowej pełny, łatwy do odkrycia zestaw poleceń.
PopoverPływający panel przypięty do wyzwalacza, na niewielkie interaktywne treści — ustawienia, szybkie formularze, selektory — który nie blokuje strony.
SheetPanel wysuwany z krawędzi ekranu na dłuższe formularze, szczegóły i filtry — strona pod spodem pozostaje przy tym w zasięgu wzroku.
TooltipKrótka etykieta tekstowa, która pojawia się po najechaniu i przy fokusie z klawiatury, żeby nazwać kontrolkę z samą ikoną albo pokazać jej skrót.

Nawigacja

5
BreadcrumbPokazuje, gdzie w hierarchii znajduje się bieżąca strona, i jednym kliknięciem prowadzi na każdy wyższy poziom.
Navigation MenuGłówna nawigacja witryny z rozbudowanymi, animowanymi panelami — dla stron marketingowych i dokumentacji, w których każda sekcja potrzebuje czegoś więcej niż jednego linku.
PaginationDzieli długi zbiór wyników na strony i pozwala się między nimi poruszać — przewidywalnie, z linkami, które można udostępnić, i z poczuciem, jak duży jest cały zbiór.
SidebarStała nawigacja aplikacji — zwija się do paska ikon, na telefonach wysuwa się spoza ekranu, a jej wygląd dopasujesz do motywu co do piksela.
TabsPrzełącza powiązane widoki o wspólnym kontekście — pokazuje jeden panel naraz, bez opuszczania strony.

Prezentacja danych

8
AvatarZwarta wizualna tożsamość osoby lub organizacji — z obrazem, inicjałami zastępczymi i opcjonalnym statusem obecności.
BadgeKrótka, nieinteraktywna etykieta, która oznacza obiekt statusem, kategorią lub liczbą.
CardWyniesiona powierzchnia, która grupuje powiązane treści i akcje dotyczące jednego tematu.
CarouselPrzewijany poziomo lub pionowo zestaw slajdów z nawigacją gestem przesunięcia, klawiaturą i przyciskami, zbudowany na Embla.
ChartDostępne wykresy dopasowane do motywu, zbudowane na Recharts — ze sprawdzoną paletą kategorialną, stonowaną oprawą i podpowiedziami spójnymi z systemem.
ItemElastyczny wiersz, który łączy grafikę, tytuł i opis z akcjami — podstawowy element list, ustawień i wierszy zasobów.
KbdWyświetla klawisz lub skrót klawiszowy — w tekście, w menu albo w podpowiedziach.
TableSemantyczne tabele HTML do danych ustrukturyzowanych — z cyframi tabelarycznymi, stanami wierszy i częściami do budowy tabel z sortowaniem i zaznaczaniem.

Informacja zwrotna

6
AlertTrwały komunikat osadzony w treści, który informuje o czymś ważnym dla bieżącej strony lub zadania.
EmptyWyjaśnia, dlaczego nie ma nic do pokazania i co zrobić dalej — przy pierwszym użyciu, braku wyników, gdy wszystko jest już zrobione i przy braku dostępu.
ProgressPokazuje, jak daleko zaszło zadanie — albo że trwa, gdy nie wiadomo, ile jeszcze potrwa.
SkeletonElement zastępczy, który podczas ładowania pokazuje kształt treści, dzięki czemu strona spokojnie się układa, zamiast skakać.
SpinnerNieokreślony wskaźnik aktywności na krótkie oczekiwanie — gdy system pracuje, a wynik jest już w drodze.
ToastKrótkie, nieblokujące powiadomienie, które potwierdza akcję lub informuje o zdarzeniu w tle, a potem schodzi z drogi.

Układ

6
AccordionStos nagłówków, z których każdy odsłania sekcję treści — stopniowe ujawnianie informacji drugorzędnych.
Aspect RatioUtrzymuje media w stałych proporcjach szerokości do wysokości i rezerwuje dla nich miejsce, zanim treść się załaduje.
CollapsiblePojedynczy obszar, który można pokazać lub ukryć — najmniejsza jednostka stopniowego ujawniania treści.
ResizablePanele, których rozmiar można zmieniać przeciąganiem lub z klawiatury — do układów, których proporcje każdy ustawia po swojemu.
Scroll AreaPrzewijany obszar z dyskretnymi, nakładanymi paskami przewijania dopasowanymi do motywu — pod spodem natywne przewijanie, na wierzchu spójna oprawa.
SeparatorCienka linia, która dzieli treść na grupy — poziomo między sekcjami, pionowo między elementami w jednym wierszu.