Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Prieinamumas turėtų būti vienas iš svarbiausių prioritetų kuriant. Prieinami komponentai pagerina programos naudojimo patogumą ir išplečia jos auditorijos bazę. Tačiau prieinamų programų kūrimas gali brangiai kainuoti kūrimo ir bandymo laiko atžvilgiu.

Norėdami sutaupyti laiko, galite naudoti vartotojo sąsajos komponentų biblioteką, kurioje yra prieinami komponentai, kurie buvo kruopščiai išbandyti. Prieinamų vartotojo sąsajos komponentų bibliotekų pavyzdžiai yra „Chakra UI“, „Radix UI“, „Material UI“, „Headless UI“ ir „Next UI“.

„Chakra UI“ yra paprasta komponentų biblioteka, kuri puikiai tinka kuriant pasiekiamas programas. 1,4 mln. atsisiuntimų per mėnesį ši vartotojo sąsajos biblioteka sparčiai auga, todėl tikrai rasite atsakymus, kai užstrigsite ja naudodami. Jį galima sudėti ir jame yra mažų ir minimalaus sudėtingumo komponentų. Šis metodas padidina jo pritaikymo galimybes, nes kūrėjai gali sujungti šiuos mažus komponentus, kad sukurtų didesnius.

instagram viewer

„Chakra“ vartotojo sąsaja turi nemokamą ir mokamą versiją. Tačiau nemokamos versijos pakanka mažiems projektams.

Pagrindinės „Chakra“ vartotojo sąsajos savybės

  • Chakra UI komponentai atitinka WAI-ARIA standartus ir visi yra prieinami.
  • Komponentai yra pritaikomi ir galite juos keisti, kad atitiktų savo dizaino reikalavimus.
  • Komponentai yra komponuojami. Galite lengvai juos sujungti, kad sukurtumėte didesnius komponentus.
  • „Chakra“ vartotojo sąsajos biblioteka yra saugi, nes ji parašyta „TypeScript“.
  • Ji turi didelę bendruomenės paramą ir daug dokumentų.
  • Ji siūlo šviesią ir tamsią vartotojo sąsają, kuri pašalina sudėtingumą tamsaus režimo įdiegimas „React“ programoje.
  • Jis palaiko mobiliesiems skirtą dizainą ir kiekvienas komponentas yra jautrus.

Sekti Chakra UI diegimo vadovas pradėti naudoti Chakra UI savo projekte.

Radix UI yra atvirojo kodo biblioteka, skirta kurti prieinamas žiniatinklio programas ir projektavimo sistemas. Radix siūlo primityvus, piktogramas ir spalvas.

Radix primityvai yra nestiiliuoti, prieinami komponentai. Primityvai pagreitina kūrimą, nes pasirūpina tokiomis sudėtingomis dalimis kaip WAI-ARIA atitiktis, klaviatūros navigacija ir fokusavimo valdymas. Kadangi jie yra be stiliaus, galite laisvai įgyvendinti savo dizainą pasirinkdami stiliaus sprendimą.

Radix spalvos teikti prieinamą spalvų sistemą kuriant vartotojo sąsajos komponentus, atitinkančius jūsų temą ir prekės ženklą. Jame yra automatinis tamsus režimas, taikomas pagal klasės pavadinimą ir kelias spalvų derinių parinktis, kurios atitinka WCAG kontrasto santykį.

Radix piktogramos yra 15*15 piktogramų rinkinys, kurį galima įsigyti kaip atskirus „React“ komponentus. Šios piktogramos taip pat pasiekiamos kaip SVG failai, taip pat galite jas atidaryti naudodami „Figma“ arba „Sketch“.

Kartu primityvai, spalvos ir piktogramos supaprastina jūsų programos priekinės dalies kūrimą.

Pagrindinės Radix vartotojo sąsajos savybės

  • Radix komponentai atitinka WAI-ARIA dizaino modelius.
  • Radix vartotojo sąsajos komponentai yra nesuderinami, todėl galite juos pritaikyti pagal savo skonį.
  • Komponentai gali būti valdomi arba nevaldomi. Pagal numatytuosius nustatymus jie nekontroliuojami, todėl galite juos naudoti nevalydami vietinės būsenos.
  • Kiekvienas primityvus gali būti įdiegtas atskirai, tai reiškia, kad primityvus galite įdiegti taip, kaip jums reikia.
  • Komponentai turi panašią API, kuri yra visiškai įvesta.

Sekite tai primityvų pamoka pradėti naudoti Radix.

Material UI (MUI) yra viena iš populiariausių „React“ komponentų bibliotekų, turinti daugiau nei 80 000 žvaigždučių „GitHub“. Pagal numatytuosius nustatymus MUI siūlo komponentus, kurie atitinka „Google“ medžiagų projektavimo standartus. Tačiau šiuos komponentus galite pritaikyti pagal savo dizaino poreikius.

Be komponentų, MUI taip pat siūlo šablonus ir dizaino rinkinius. Šablonai yra iš anksto sukurti vartotojo sąsajos dizainai, padedantys greitai sukurti priekines dalis. Dizaino rinkinys – tai dizaino elementų ir stilių rinkinys, skirtas padėti dizaineriams ir kūrėjams sukurti nuoseklų dizainą.

MUI bendruomenės versija yra nemokama, tačiau yra profesionali ir aukščiausios kokybės versija su pažangesnėmis funkcijomis.

Pagrindinės medžiagos vartotojo sąsajos savybės

  • Komponentai yra labai pritaikomi su teminėmis galimybėmis.
  • Komponentai yra paruošti gamybai.
  • Prieinamumas yra pagrindinis visų komponentų, kuriuos pristato MUI, prioritetas.
  • Jame yra išsami dokumentacija, kurią lengva naršyti.
  • Jis turi keletą MUI naudojimo pavyzdžiai technologijų, tokių kaip Remix, Next.js, Gatsby.js ir daugelis kitų, demonstruojančių, kaip naudoti MUI.
  • Tai palaiko TypeScript.
  • Tai labai populiarus ir turi didelę bendruomenę, kuri gali padėti iškilus klausimams apie MUI.
  • Jis siūlo iš anksto sukurtus UI rinkinius, skirtus „Figma“, „Adobe XD“, „Sketch“ ir „UXPin“ medžiagų projektavimo komponentams.
  • MUI suteikia didelį piktogramų pasirinkimą.

Įdiekite Material UI savo projekte norėdami pradėti naudoti MUI komponentus.

UI be galvos yra nestilių ir prieinamų komponentų biblioteka. NS be galvos padeda kurti įtraukiančius komponentus tvarkant arijos atributus ir vaidmenis, valdant fokusavimą, naršant klaviatūra ir užtikrinant, kad jie palaiko ekrano skaitytuvus.

Šie komponentai puikiai veikia Tailwind CSS.

Pagrindinės begalvės vartotojo sąsajos savybės

  1. Jo komponentai yra nesuderinami, todėl galite visiškai kontroliuoti, kaip jie atrodo.
  2. UI komponentai be galvos yra visiškai pasiekiami, todėl galite kurti įtraukias programas, neskiriant daug laiko komponentams kurti ir testuoti.
  3. Ji siūlo iš anksto suformuotus pavyzdžius per Tailwind UI kurį galite panaudoti savo projekte.

Kita vartotojo sąsaja yra palyginti nauja „React“ biblioteka. Jis visiškai suderinamas su Next.js, leidžiančiu tai padaryti sukurti Next.js projektą su minimalia sąranka.

Kita vartotojo sąsaja vis dar yra beta versijos, tačiau joje yra daug funkcijų, leidžiančių kurti nuostabias ir prieinamas svetaines.

Pagrindinės kitos vartotojo sąsajos savybės

  • Visi komponentai atitinka WAI-ARIA gaires ir palaiko klaviatūros naršymą bei fokusavimą.
  • Jame yra numatytosios temos, kurias galite tinkinti pagal savo poreikius.
  • Taip pat galite įdiegti tamsųjį režimą naudodami tik kelias kodo eilutes.
  • Jame pateikiamas rinkinys CSS medijos užklausos pritaikytų maketų kūrimui.
  • Jis turi visiškai įvestą API, padedančią sukurti tipo saugią programą.
  • Kiti vartotojo sąsajos komponentai palaiko atvaizdavimą serverio pusėje.

Atsargiai pasirinkite biblioteką

Prieinamų programų kūrimas gali užtrukti; naudotis vartotojo sąsajos biblioteka yra lengviau. „React“ projektams galite rinktis iš kelių bibliotekų. Rinkdamiesi biblioteką nuspręskite, ar norite komponento be galvos, kuris suteiks jums visišką stiliaus ir funkcionalumo kontrolę, ar iš anksto sukurtų, tinkinamų komponentų.

Radix UI ir Headless UI yra puikūs, jei norite visiškai valdyti dizainą, o Material UI ir Next UI yra geros parinktys, jei norite naudoti paruoštos bibliotekos.