Dostupnosť by mala byť jednou z vašich najvyšších priorít počas vývoja. Dostupné komponenty zlepšujú použiteľnosť aplikácie a rozširujú jej základňu publika. Vytváranie prístupných aplikácií však môže byť nákladné z hľadiska času zostavovania a testovania.
Ak chcete ušetriť čas, môžete použiť knižnicu komponentov používateľského rozhrania, ktorá poskytuje prístupné komponenty, ktoré boli dôkladne otestované. Príkladmi prístupných knižníc súčastí používateľského rozhrania sú Chakra UI, Radix UI, Material UI, Headless UI a Next UI.
Chakra UI je jednoduchá knižnica komponentov, ktorá je skvelá na vytváranie aplikácií, ktoré sú prístupné. S 1,4 miliónmi stiahnutí za mesiac táto knižnica používateľského rozhrania rýchlo rastie a určite nájdete odpovede, keď ju budete používať. Je skladateľný a poskytuje komponenty, ktoré sú malé s minimálnou zložitosťou. Tento prístup zvyšuje jeho možnosti prispôsobenia, pretože vývojári môžu kombinovať tieto malé komponenty a vytvárať väčšie.
Chakra UI má bezplatnú verziu a platené verzie. Bezplatná verzia je však postačujúca pre malé projekty.
Kľúčové vlastnosti používateľského rozhrania Chakra
- Komponenty používateľského rozhrania čakry sa riadia štandardmi WAI-ARIA a všetky sú prístupné.
- Komponenty sú prispôsobiteľné a môžete ich zmeniť tak, aby zodpovedali vašim požiadavkám na dizajn.
- Komponenty sú skladateľné. Môžete ich ľahko kombinovať a vytvárať tak väčšie komponenty.
- Knižnica používateľského rozhrania Chakra je typovo bezpečná, pretože je napísaná v TypeScript.
- Má veľkú podporu komunity a rozsiahlu dokumentáciu.
- Ponúka svetlé a tmavé používateľské rozhranie, ktoré eliminuje zložitosť implementácia tmavého režimu vo vašej aplikácii React.
- Podporuje dizajn určený predovšetkým pre mobilné zariadenia a každý komponent reaguje.
Nasleduj Sprievodca inštaláciou používateľského rozhrania Chakra začať vo svojom projekte používať používateľské rozhranie Chakra.
Radix UI je open-source knižnica na vytváranie prístupných webových aplikácií a návrhových systémov. Radix ponúka primitívy, ikony a farby.
Primitívy Radix sú neštylizované, prístupné komponenty. Primitívy urýchľujú vývoj tým, že sa starajú o zložité časti, ako je súlad s WAI-ARIA, navigácia pomocou klávesnice a správa zaostrenia. Pretože sa dodávajú neštýlové, môžete svoj dizajn realizovať podľa vlastného výberu.
Farby Radix poskytnúť prístupný systém farieb na navrhovanie komponentov používateľského rozhrania, ktoré zapadajú do vašej témy a značky. Má automatický tmavý režim aplikovaný prostredníctvom názvu triedy a viacerých možností kombinácie farieb, ktoré spĺňajú kontrastný pomer WCAG.
Radixové ikony sú sada 15*15 ikon dostupných ako jednotlivé komponenty Reactu. Tieto ikony sú dostupné aj ako súbory SVG a môžete ich otvoriť aj v aplikácii Figma alebo Sketch.
Primitívy, farby a ikony spolu zjednodušujú spôsob, akým vytvárate frontend vašej aplikácie.
Kľúčové vlastnosti používateľského rozhrania Radix
- Komponenty Radix sa riadia dizajnovými vzormi WAI-ARIA.
- Komponenty používateľského rozhrania Radix sú bez štýlu, čo vám dáva slobodu prispôsobiť si ich podľa svojich predstáv.
- Komponenty môžu byť riadené alebo nekontrolované. V predvolenom nastavení sú nekontrolované, čo vám umožňuje používať ich bez toho, aby ste museli spravovať miestny štát.
- Každé primitívum je možné nainštalovať samostatne, čo znamená, že primitíva môžete nainštalovať tak, ako ich potrebujete.
- Komponenty zdieľajú podobné API, ktoré je úplne napísané.
Postupujte podľa tohto primitívny tutoriál začať používať Radix.
Material UI (MUI) je jednou z najpopulárnejších knižníc komponentov React s viac ako 80 000 hviezdičkami na GitHub. V predvolenom nastavení ponúka MUI komponenty, ktoré spĺňajú štandardy materiálového dizajnu Google. Tieto komponenty si však môžete prispôsobiť tak, aby vyhovovali vašim konštrukčným potrebám.
Okrem komponentov ponúka MUI aj šablóny a dizajnové súpravy. Šablóny sú vopred navrhnuté návrhy používateľského rozhrania, ktoré vám pomôžu rýchlo vytvoriť klientske rozhrania. Dizajnová súprava je kolekcia dizajnových prvkov a štýlov, ktorých cieľom je pomôcť dizajnérom a vývojárom dosiahnuť konzistentný dizajn.
Komunitná verzia MUI je bezplatná, ale existuje profesionálna a prémiová verzia s pokročilejšími funkciami.
Kľúčové vlastnosti používateľského rozhrania Material
- Komponenty sú vysoko prispôsobiteľné pomocou tematických možností.
- Komponenty sú pripravené na výrobu.
- Prístupnosť je základnou prioritou pre všetky komponenty, ktoré MUI dodáva.
- Má komplexnú dokumentáciu, v ktorej sa dá ľahko orientovať.
- Má niekoľko Príklady použitia MUI technológií ako Remix, Next.js, Gatsby.js a mnohých ďalších, ktoré ukazujú, ako používať MUI.
- to podporuje TypeScript.
- Je veľmi populárny a má veľkú komunitu, ktorá môže pomôcť s otázkami o MUI.
- Ponúka vopred zostavené súpravy používateľského rozhrania pre komponenty materiálového dizajnu pre Figma, Adobe XD, Sketch a UXPin.
- MUI poskytuje veľký výber ikon.
Nainštalujte Material UI do svojho projektu začať používať komponenty MUI.
Headless UI je knižnica neštylizovaných a prístupných komponentov. Bezhlavé používateľské rozhranie vám pomáha vytvárať inkluzívne komponenty spracovaním atribútov a rolí árií, správou zaostrenia, navigáciou pomocou klávesnice a zabezpečením podpory čítačiek obrazovky.
S týmito komponentmi sa pracuje dobre Tailwind CSS.
Kľúčové vlastnosti bezhlavého používateľského rozhrania
- Jeho komponenty sú neštýlové, čo vám dáva úplnú kontrolu nad tým, ako vyzerajú.
- Bezhlavé komponenty používateľského rozhrania sú plne prístupné, čo vám pomáha vytvárať inkluzívne aplikácie bez toho, aby ste museli tráviť veľa času vytváraním a testovaním komponentov.
- Ponúka vopred štylizované príklady cez Používateľské rozhranie služby Tailwind ktoré môžete použiť vo svojom projekte.
Next UI je relatívne nová knižnica React. Je plne kompatibilný s Next.js, čo vám umožňuje vytvorte projekt Next.js s minimálnym nastavením.
Ďalšie používateľské rozhranie je stále v beta verzii, ale má množstvo funkcií na vytváranie úžasných a prístupných webových stránok.
Kľúčové vlastnosti ďalšieho používateľského rozhrania
- Všetky komponenty sa riadia pokynmi WAI-ARIA a podporujú navigáciu a zaostrovanie pomocou klávesnice.
- Dodáva sa s predvolenými témami, ktoré si môžete prispôsobiť podľa svojich potrieb.
- Môžete tiež implementovať tmavý režim pomocou niekoľkých riadkov kódu.
- Poskytuje sadu Dopyty na médiá CSS pre rozloženie citlivé na budovanie.
- Má plne napísané API, ktoré vám pomôže vytvoriť typovo bezpečnú aplikáciu.
- Ďalšie komponenty používateľského rozhrania podporujú vykresľovanie na strane servera.
Vyberajte si knižnicu opatrne
Vytváranie prístupných aplikácií môže byť časovo náročné; používanie knižnice používateľského rozhrania je jednoduchšie. Pre projekty React je na výber niekoľko knižníc. Pri výbere knižnice sa rozhodnite, či chcete bezhlavý komponent, ktorý vám poskytne úplnú kontrolu nad štýlom a funkčnosťou, alebo vopred upravené, prispôsobiteľné komponenty.
Radix UI a Headless UI sú skvelé, ak chcete plnú kontrolu nad dizajnom, zatiaľ čo Material UI a Next UI sú dobré možnosti, ak chcete knižnicu pripravenú na použitie.