Katalog

Wszystkie komponenty

Wszystko, czego potrzebujesz, by zbudować pełny produkt, na iOS i Androida.

10 Prymitywy
41 Komponenty
1022 Testy jednostkowe
100% TypeScript

Prymitywy 10

Box

  • Layout

Widok przyjmujący jako propsy tokeny odstępów, koloru, zaokrągleń i elewacji.

  • Propsy padding i margin
  • Tło w kolorze motywu
  • Zaokrąglenia i 6 poziomów elewacji

Stack

  • Layout

Stosy pionowe i poziome z odstępami opartymi na tokenach.

  • VStack i HStack
  • Odstęp z tokenów spacingu
  • Wyrównanie, rozkład i zawijanie

Text

  • Typografia

Prymityw typograficzny powiązany ze skalą typografii motywu.

  • 18 wariantów typografii
  • Tokeny kolorów motywu
  • Czytelne kolory akcentu

Heading

  • Typografia

Tekst z rolą nagłówka, oparty na stylach nagłówków.

  • Poziomy 1-3 i 2 rozmiary display
  • Rola nagłówka dla czytników ekranu

PressableScale

  • Animacje

Pressable ze sprężynowym skalowaniem Reanimated przy naciśnięciu.

  • Konfigurowalna skala
  • Respektuje ograniczenie ruchu
  • Obwódka fokusu klawiatury

MarqueeText

  • Animacje
  • Typografia

Jednoliniowy tekst, który przewija się tylko wtedy, gdy się nie mieści.

  • Wykrywanie przepełnienia
  • Konfigurowalna prędkość i pauza
  • Statyczny przy ograniczeniu ruchu

PaginationDots

  • Nawigacja

Animowany wskaźnik strony lub kroku.

  • Aktywna kropka się poszerza
  • Ogłasza bieżący krok

SectionLabel

  • Typografia

Mała etykieta wielkimi literami (overline) z rolą nagłówka.

  • Domyślnie wielkie litery
  • Własna transformacja i kolor

SystemIcon

  • Layout

Rysowany zestaw ikon, który wygląda tak samo na iOS i Androidzie.

  • 12 glifów
  • Chevrony odbijane w RTL
  • Ukryte przed czytnikami ekranu

Komponenty 41

ActionTile

  • Akcje

Klikalny kafelek z podbarwionym chipem ikony i etykietą.

  • 5 tonów
  • Sprężynowa skala naciśnięcia
  • Lekka haptyka przy naciśnięciu

Avatar

  • Wyświetlanie danych

Okrągły awatar ze zdjęciem lub inicjałami.

  • 4 rozmiary (sm-xl)
  • Inicjały z imienia i nazwiska
  • Własne tło inicjałów

Badge

  • Feedback

Licznik, krótka etykieta lub kropka statusu.

  • 5 wariantów kolorów
  • Limit przepełnienia (99+)
  • Tryb kropki

BottomSheet

  • Overlaye

Modalny arkusz wysuwany od dołu.

  • Przeciągnij w dół, aby zamknąć
  • Części Header, Body i Footer
  • Omijanie klawiatury
  • Gest wyjścia w czytniku ekranu

BottomTabBar

  • Nawigacja

Dolny pasek zakładek z animowaną pigułką aktywnej zakładki.

  • Plakietki na zakładkach
  • Role zakładek ze stanem wybrania
  • Inset safe area

Button

  • Akcje

Główny przycisk akcji z wariantami, rozmiarami, stanem ładowania i ikonami.

  • 5 wariantów
  • 3 rozmiary (sm/md/lg)
  • Stan ładowania
  • Naciśnięcie haptyczne

Card

  • Layout

Powierzchnia z motywem, która staje się klikalna po przekazaniu handlera.

  • 4 poziomy elewacji
  • 3 rozmiary gęstości
  • Sloty nagłówka i stopki

Checkbox

  • Formularze

Pole wyboru z opcjonalną etykietą.

  • 2 rozmiary
  • Rola i stan checkboxa
  • Lekka haptyka przy przełączeniu

ConfettiOverlay

  • Animacje

Świętujący wybuch konfetti, który nigdy nie blokuje dotyku.

  • Konfigurowalna liczba cząstek
  • Wystrzeliwuje po pokazaniu
  • Respektuje ograniczenie ruchu

Countdown

  • Wyświetlanie danych

Samoaktualizujące się odliczanie do terminu.

  • 4 formaty
  • Lokalizowalne jednostki
  • Etykieta i callback po upływie czasu

DatePickerInput

  • Formularze

Pole daty, godziny lub daty z godziną.

  • 3 tryby
  • Data minimalna i maksymalna
  • Możliwość wyczyszczenia
  • Tylko do odczytu, gdy brak pickera

DateRangePickerInput

  • Formularze

Pola daty początkowej i końcowej dla zakresu.

  • Początek i koniec wzajemnie się ograniczają
  • Osobny błąd dla początku i końca
  • Możliwość wyczyszczenia

EmptyState

  • Feedback

Wyśrodkowany stan pusty z ikoną, tytułem, komunikatem i akcją.

  • 3 rozmiary
  • Slot akcji
  • Rola podsumowania

ErrorBoundary

  • Feedback

Error boundary z widokiem awaryjnym i opcją ponowienia.

  • Reset keys
  • Własny render widoku awaryjnego
  • HOC withErrorBoundary

FieldError

  • Formularze

Podpis błędu wyświetlany pod polami formularza.

  • Rola alertu
  • Region live w trybie polite

FieldLabel

  • Formularze

Etykieta pola wielkimi literami z oznaczeniem pola wymaganego.

  • Oznaczenie pola wymaganego
  • Ogłaszane jako wymagane

HeaderBar

  • Nawigacja

Nagłówek ekranu z przyciskiem wstecz, tytułem i akcjami.

  • Zwykły i duży tytuł
  • Tytuł wyśrodkowany lub do lewej
  • Chevron wstecz odbijany w RTL

Input

  • Formularze

Pole tekstowe z etykietą, błędem i obramowaniem fokusu.

  • Etykieta, błąd i pole wymagane
  • Przekazuje ref i propsy TextInput
  • Obsługa wielu linii

InputPrompt

  • Overlaye
  • Formularze

Wieloplatformowe okno dialogowe z polem tekstowym.

  • Systemowy Alert.prompt na iOS
  • Modal z motywem na Androidzie
  • Lokalizowane przyciski

KeyboardLiftedFooter

  • Layout

Dolny pasek akcji, który pozostaje nad klawiaturą.

  • Unosi się razem z klawiaturą
  • Domyślnie włączone na Androidzie

ListHeader

  • Typografia

Nagłówek listy lub strony w czterech rozmiarach.

  • 4 rozmiary
  • Opcje transformacji tekstu
  • Rola nagłówka

ListItem

  • Wyświetlanie danych

Wiersz listy z ikoną, podtytułem, wartością i chevronem.

  • Chevron, gdy wiersz jest klikalny
  • Styl destrukcyjny
  • Własne sloty

ListSection

  • Wyświetlanie danych

Grupowana sekcja listy z tytułem i notką w stopce.

  • Grupowana karta lub osobne wiersze
  • Tytuł i notka w stopce

ListSwitchItem

  • Wyświetlanie danych
  • Formularze

Wiersz listy z wbudowanym przełącznikiem.

  • Wbudowany przełącznik
  • Ikona i podtytuł

Modal

  • Overlaye

Wyśrodkowane okno dialogowe z tłem, tytułem i stopką.

  • Części Header, Body i Footer
  • Zamknięcie kliknięciem w tło
  • Gest wyjścia w czytniku ekranu

ProgressBar

  • Feedback

Poziomy pasek postępu o określonej wartości.

  • Kolor semantyczny lub własny
  • Rola paska postępu z wartością
  • Konfigurowalna wysokość

ScreenContainer

  • Layout

Kontener ekranu z safe area i maksymalną szerokością na tabletach.

  • Górna i dolna safe area
  • Wyśrodkowana treść na tabletach
  • Opcjonalny padding

SearchBar

  • Formularze

Pole wyszukiwania z debounce i przyciskiem czyszczenia.

  • Wbudowany debounce
  • Przycisk czyszczenia
  • Lewy i prawy slot

SegmentedControl

  • Formularze

Kontrolka segmentowa jednokrotnego wyboru w stylu iOS.

  • Grupa radio dla czytników ekranu
  • Typowane wartości
  • Lekka haptyka

Select

  • Formularze
  • Overlaye

Wybór jednej wartości z opcjami w dolnym arkuszu.

  • Picker w BottomSheet
  • Ikony opcji
  • Etykieta, błąd i pole wymagane

SettingsRow

  • Wyświetlanie danych

Wiersz ustawień z zaokrąglonym kafelkiem ikony.

  • Kafelek ikony
  • Styl destrukcyjny
  • Wariant SettingsSwitchRow

Skeleton

  • Feedback

Animowany placeholder ładowania.

  • Preset Card
  • Respektuje ograniczenie ruchu
  • Lokalizowana etykieta ładowania

Spinner

  • Feedback

Wyśrodkowany wskaźnik aktywności z opcjonalną etykietą.

  • 2 rozmiary
  • Ogłaszany czytnikom ekranu

StatTile

  • Wyświetlanie danych

Kafelek statystyki z etykietą, wartością i podpisem.

  • 5 tonów
  • 3 rozmiary
  • Cyfry tabelaryczne

Switch

  • Formularze

Natywny przełącznik z motywem, etykietą i podtytułem.

  • Cały wiersz klikalny
  • Lekka haptyka
  • Etykieta odczytywana z podtytułem

TextArea

  • Formularze

Wieloliniowe pole z etykietą i błędem.

  • Minimalna wysokość w liniach
  • Etykieta, błąd i pole wymagane

Toast

  • Feedback

Imperatywny toast montowany raz w korzeniu aplikacji.

  • 5 wariantów
  • Pozycja u góry lub na dole
  • Przycisk akcji
  • Komunikaty dla czytników ekranu
Expo React Native 0.84+ iOS Android TypeScript Accessible