Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Juurdepääsetavus peaks olema arenduse ajal üks teie peamisi prioriteete. Juurdepääsetavad komponendid parandavad rakenduse kasutatavust ja laiendavad selle vaatajaskonna baasi. Ligipääsetavate rakenduste loomine võib aga ehitus- ja testimisaja osas olla kulukas.

Aja säästmiseks võite kasutada kasutajaliidese komponentide teeki, mis pakub juurdepääsetavaid komponente, mida on põhjalikult testitud. Juurdepääsetavate kasutajaliidese komponentide teekide näited on Chakra UI, Radix UI, Material UI, Headless UI ja Next UI.

Chakra kasutajaliides on lihtne komponentide kogu, mis sobib suurepäraselt juurdepääsetavate rakenduste loomiseks. 1,4 miljoni allalaadimisega kuus kasvab see kasutajaliidese teek kiiresti ja leiate kindlasti vastused, kui selle kasutamisega jänni jääte. See on komponeeritav ja sisaldab väikseid ja minimaalse keerukusega komponente. See lähenemine suurendab selle kohandamisvõimalusi, kuna arendajad saavad need väikesed komponendid kombineerida suuremate komponendid.

instagram viewer

Chakra UI-l on tasuta versioon ja tasulised versioonid. Tasuta versioonist piisab väikeste projektide jaoks.

Chakra kasutajaliidese põhifunktsioonid

  • Chakra kasutajaliidese komponendid järgivad WAI-ARIA standardeid ja on kõik juurdepääsetavad.
  • Komponendid on kohandatavad ja saate neid vastavalt oma disaininõuetele muuta.
  • Komponendid on komponeeritavad. Saate neid hõlpsasti kombineerida, et ehitada suuremaid komponente.
  • Chakra kasutajaliidese teek on tüübikindel, kuna see on kirjutatud TypeScriptis.
  • Sellel on suur kogukonna tugi ja ulatuslik dokumentatsioon.
  • See pakub heledat ja tumedat kasutajaliidest, mis välistab keerukuse tumeda režiimi rakendamine rakenduses React.
  • See toetab mobiilipõhist disaini ja iga komponent on tundlik.

Mine järgi Chakra UI paigaldusjuhend et alustada oma projektis Chakra kasutajaliidese kasutamist.

Radix UI on avatud lähtekoodiga raamatukogu juurdepääsetavate veebirakenduste ja disainisüsteemide loomiseks. Radix pakub primitiive, ikoone ja värve.

Radixi primitiivid on stiilita, juurdepääsetavad komponendid. Primitiivid kiirendavad arengut, hoolitsedes selliste keeruliste osade eest nagu WAI-ARIA vastavus, klaviatuuriga navigeerimine ja fookuse haldamine. Kuna need on stiilita, võite vabalt rakendada oma disaini enda valitud stiililahendusega.

Radix värvid pakkuda juurdepääsetavat värvisüsteemi kasutajaliidese komponentide kujundamiseks, mis sobivad teie teema ja kaubamärgiga. Sellel on automaatne tume režiim, mida rakendatakse klassi nime ja mitme värvikombinatsiooni valiku kaudu, mis läbivad WCAG kontrastsuse suhte.

Radixi ikoonid on 15*15 ikooni komplekt, mis on saadaval üksikute Reacti komponentidena. Need ikoonid on saadaval ka SVG-failidena ja saate neid avada ka Figmas või Sketchis.

Üheskoos lihtsustavad primitiivid, värvid ja ikoonid rakenduse esiosa loomist.

Radixi kasutajaliidese põhifunktsioonid

  • Radixi komponendid järgivad WAI-ARIA disainimustreid.
  • Radixi kasutajaliidese komponendid on stiilita, mis annab teile vabaduse neid oma maitse järgi kohandada.
  • Komponendid võivad olla juhitavad või mittekontrollitavad. Vaikimisi on need kontrollimatud, mis võimaldab teil neid kasutada ilma, et peaksite kohalikku osariiki haldama.
  • Iga primitiivi saab installida eraldi, mis tähendab, et saate installida primitiivid vastavalt vajadusele.
  • Komponentidel on sarnane API, mis on täielikult sisestatud.

Järgige seda primitiivide õpetus Radixi kasutamise alustamiseks.

Materjali kasutajaliides (MUI) on üks populaarsemaid Reacti komponentide teeke, millel on GitHubis enam kui 80 000 tärni. Vaikimisi pakub MUI komponente, mis järgivad Google'i materjalidisaini standardeid. Siiski saate neid komponente kohandada vastavalt oma disainivajadustele.

Lisaks komponentidele pakub MUI ka malle ja kujunduskomplekte. Mallid on eelkujundatud kasutajaliidese kujundused, mis aitavad teil kiiresti esiotsad luua. Disainikomplekt on disainielementide ja stiilide kogum, mille eesmärk on aidata disaineritel ja arendajatel saavutada ühtne disain.

MUI kogukonnaversioon on tasuta, kuid seal on täiustatud funktsioonidega pro- ja premium-versioon.

Materjali kasutajaliidese põhifunktsioonid

  • Komponendid on teemade koostamise võimalustega väga kohandatavad.
  • Komponendid on tootmisvalmis.
  • Juurdepääsetavus on kõigi MUI tarnitavate komponentide peamine prioriteet.
  • Sellel on põhjalik dokumentatsioon, milles on lihtne navigeerida.
  • Sellel on mitu MUI kasutamise näited tehnoloogiaid, nagu Remix, Next.js, Gatsby.js ja palju muud, mis näitavad, kuidas MUI-d kasutada.
  • See toetab TypeScripti.
  • See on väga populaarne ja sellel on suur kogukond, kes saab aidata MUI-ga seotud küsimuste korral.
  • See pakub Figma, Adobe XD, Sketchi ja UXPini materjalide disainikomponentide jaoks valmis kasutajaliidese komplekte.
  • MUI pakub suurt valikut ikoone.

Installige oma projekti materjali kasutajaliides MUI komponentide kasutamise alustamiseks.

Peata kasutajaliides on stiilita ja juurdepääsetavate komponentide teek. Peata kasutajaliides aitab teil luua kaasavaid komponente, käsitledes aria atribuute ja rolle, fookuse haldamist, klaviatuuril navigeerimist ja tagades, et need toetavad ekraanilugejaid.

Need komponendid töötavad hästi Tailtuule CSS.

Peata kasutajaliidese põhifunktsioonid

  1. Selle komponendid on kujundamata, mis annab teile täieliku kontrolli nende välimuse üle.
  2. Peata kasutajaliidese komponendid on täielikult juurdepääsetavad, mis aitab teil luua kaasavaid rakendusi, kulutamata palju aega komponentide ehitamisele ja testimisele.
  3. See pakub eelkujundatud näiteid kaudu Tailwind UI mida saate oma projektis kasutada.

Järgmine kasutajaliides on suhteliselt uus Reacti teek. See ühildub täielikult Next.js-iga, mis võimaldab teil seda teha luua Next.js projekt minimaalse seadistusega.

Järgmine kasutajaliides on veel beetaversioonis, kuid sellel on palju funktsioone vapustavate ja juurdepääsetavate veebisaitide loomiseks.

Järgmise kasutajaliidese põhifunktsioonid

  • Kõik komponendid järgivad WAI-ARIA juhiseid ning toetavad klaviatuuril navigeerimist ja teravustamist.
  • Kaasas vaiketeemad, mida saate oma vajadustele vastavaks kohandada.
  • Tumeda režiimi saate rakendada ka vaid mõne koodireaga.
  • See pakub komplekti CSS-i meediumipäringud tundlike paigutuste loomiseks.
  • Sellel on täielikult sisestatud API, mis aitab teil luua tüübikindlat rakendust.
  • Järgmised kasutajaliidese komponendid toetavad serveripoolset renderdamist.

Valige oma raamatukogu hoolikalt

Juurdepääsetavate rakenduste loomine võib olla aeganõudev; UI teegi kasutamine on lihtsam. Reacti projektide jaoks on valida mitme teeki vahel. Teegi valimisel otsustage, kas soovite ilma peata komponenti, mis annab teile täieliku kontrolli stiili ja funktsionaalsuse üle, või eelstiilis kohandatavaid komponente.

Radix UI ja Headless UI on suurepärased, kui soovite kujunduse üle täielikku kontrolli, samas kui materjali kasutajaliides ja järgmine kasutajaliides on head võimalused, kui soovite kasutusvalmis teeki.