Motívy založené na tokenoch
Každý povrch - farba, medzera, polomer, typografia, tieň - je pomenovaný token. Prepínajte svetlý / tmavý / vlastný motív jedným providerom; komponenty čítajú iba tokeny, takže jedna zmena sa propaguje systémovo.
Native-UI
Design systém pre React Native
Design systém pre React Native - komponenty s natívnym pocitom na iOS aj Android.
Nástroj pre vývojárov
Oficiálna stránka produktu
Vydavateľ:
POLPROG
Oficiálna stránka produktu
40+
Komponentov
2
Platformy
100%
TypeScript
MIT
Licencia
01 / Native-UI
O projekte
Native-UI je design systém pre React Native postavený na tokenoch, motívoch a primitívach s dôrazom na prístupnosť. Dodáva 32 komponentov a 9 layoutových primitív - Button, Input, Select, BottomSheet, HeaderBar, ListItem, Toast, Modal a ďalšie - každý so správnym správaním na iOS aj Android, s plnými svetlými / tmavými motívmi, podporou reduce-motion a typovanými API. Publikované ako @polprog/native-ui na npm, poháňa niekoľko interných mobilných produktov a je teraz verejne dostupné pod licenciou MIT.
02 / Využitie
Čo to rieši
Problém
- Rovnakú obrazovku píšete dvakrát, pre každú platformu
- Rozostupy, farby a tmavý režim sa rozchádzajú
- Popisy pre čítačky dorábate nakoniec
Výsledok
- Jeden komponent sa správa natívne na oboch systémoch
- Všetky obrazovky berú vzhľad z jedného miesta
- Prístupnosť je v komponentoch od začiatku
Pre koho
- Vývojári React Native a Expo
- Tímy s jednou aplikáciou pre iOS aj Android
- Kto zodpovedá za prístupnosť aplikácie
03 / Kľúčové funkcie
Kľúčové funkcie
Najdôležitejšie možnosti vysvetlené prakticky.
40+ komponentov a primitív
32 komponentov - Button, Input, Select, BottomSheet, HeaderBar, ListItem, Modal, Toast, Switch, Checkbox, Radio, Card, Avatar, Badge, Chip, Spinner, Skeleton, SearchBar a ďalšie - plus 9 layoutových primitív (Box, Stack, Heading, Text, Divider).
Natívne správanie podľa platformy
iOS používa natívnu SF spätnú väzbu a rozmery sheetov; Android používa ripple a Material elevation. Rovnaké props, správne správanie na každej platforme - žiadny platformovo špecifický kód vo vašej aplikácii.
Prístupnosť na prvom mieste
Každý interaktívny komponent prichádza s popiskami, hit-slopmi, poradím fokusu, rolami pre čítačky obrazovky a rešpektovaním reduce-motion. Prepíšte akékoľvek predvolené nastavenie pre konkrétnu inštanciu podľa potreby.
Plne typované API
100% TypeScript. Vyčerpávajúce typy props, variantov a kontraktov motívov sa automaticky dopĺňajú v editore - chybné použitie je zachytené ešte pred runtime.
Nula runtime závislostí
Žiadne štylovacie knižnice, žiadne ťažkopádne UI frameworky - iba samotný React Native plus tenký theme provider. Minimálna inštalačná stopa, žiadne riziko uzamknutia verzií.
04 / Stiahnuť
Prístup k produktu
Jasná cesta od oficiálneho zdroja k prvému úspešnému použitiu.
Vyberte správnu platformu
Použite jeden z oficiálnych odkazov pre svoje zariadenie alebo prehliadač.
Nainštalujte alebo otvorte
Postupujte podľa pokynov obchodu alebo otvorte webovú aplikáciu. Bez inštalátorov tretích strán.
Nastavte a začnite
Prejdite možnosti, vyberte predvoľby a začnite hlavným pracovným postupom.
Oficiálne možnosti prístupu
05 / Technológia
Technológia produktu
Transparentný prehľad hlavných technológií použitých na vývoj a údržbu produktu.
React Native
TypeScript
Expo