Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Pieejamībai ir jābūt vienai no jūsu galvenajām prioritātēm izstrādes laikā. Pieejamie komponenti uzlabo lietojumprogrammas lietojamību un paplašina tās auditorijas bāzi. Tomēr pieejamu lietojumprogrammu izveide var būt dārga izveides un pārbaudes laika ziņā.

Lai ietaupītu laiku, varat izmantot UI komponentu bibliotēku, kas nodrošina pieejamus komponentus, kas ir rūpīgi pārbaudīti. Pieejamo UI komponentu bibliotēku piemēri ir Chakra UI, Radix UI, Material UI, Headless UI un Next UI.

Chakra UI ir vienkārša komponentu bibliotēka, kas ir lieliski piemērota pieejamu lietojumprogrammu izveidei. Ar 1,4 miljoniem lejupielāžu mēnesī šī lietotāja interfeisa bibliotēka strauji aug, un jūs noteikti atradīsit atbildes, kad to izmantosit. Tas ir saliekams un nodrošina mazas sastāvdaļas ar minimālu sarežģītību. Šī pieeja palielina tās pielāgošanas iespējas, jo izstrādātāji var apvienot šos mazos komponentus, lai izveidotu lielākus.

Chakra UI ir bezmaksas versija un maksas versijas. Tomēr maziem projektiem pietiek ar bezmaksas versiju.

Galvenās Chakra UI iezīmes

  • Chakra UI komponenti atbilst WAI-ARIA standartiem un visi ir pieejami.
  • Komponenti ir pielāgojami, un jūs varat tos mainīt, lai tie atbilstu jūsu dizaina prasībām.
  • Sastāvdaļas ir saliekamas. Jūs varat tos viegli apvienot, lai izveidotu lielākas sastāvdaļas.
  • Chakra UI bibliotēka ir droša tipam, jo ​​tā ir rakstīta TypeScript.
  • Tam ir liels kopienas atbalsts un plaša dokumentācija.
  • Tas piedāvā gaišu un tumšu lietotāja interfeisu, kas novērš sarežģītību tumšā režīma ieviešana React lietotnē.
  • Tā atbalsta dizainu vispirms mobilajām ierīcēm, un katrs komponents ir atsaucīgs.

Seko Chakra UI instalēšanas rokasgrāmata lai sāktu izmantot Chakra UI savā projektā.

Radix UI ir atvērtā pirmkoda bibliotēka pieejamu tīmekļa lietojumprogrammu un dizaina sistēmu izveidei. Radix piedāvā primitīvus, ikonas un krāsas.

Radix primitīvie elementi ir nestilēti, pieejamie komponenti. Primitīvie elementi paātrina izstrādi, rūpējoties par sarežģītām daļām, piemēram, WAI-ARIA atbilstību, tastatūras navigāciju un fokusa pārvaldību. Tā kā tie tiek piegādāti bez stila, jūs varat brīvi īstenot savu dizainu ar jūsu izvēlētu stila risinājumu.

Radix krāsas nodrošināt pieejamu krāsu sistēmu, lai izstrādātu lietotāja interfeisa komponentus, kas atbilst jūsu tēmai un zīmolam. Tam ir automātisks tumšais režīms, kas tiek lietots, izmantojot klases nosaukumu un vairākas krāsu kombinācijas opcijas, kas iztur WCAG kontrasta attiecību.

Radix ikonas ir 15*15 ikonu kopa, kas pieejama kā atsevišķi React komponenti. Šīs ikonas ir pieejamas arī kā SVG faili, un tās var atvērt arī programmā Figma vai Sketch.

Kopā primitīvie elementi, krāsas un ikonas vienkāršo lietojumprogrammas priekšpuses izveidi.

Radix UI galvenās iezīmes

  • Radix komponenti atbilst WAI-ARIA dizaina modeļiem.
  • Radix UI komponenti ir bez stila, kas sniedz jums brīvību tos pielāgot pēc savām vēlmēm.
  • Sastāvdaļas var kontrolēt vai nekontrolēt. Pēc noklusējuma tie ir nekontrolēti, ļaujot tos izmantot bez nepieciešamības pārvaldīt vietējo stāvokli.
  • Katru primitīvu var instalēt atsevišķi, kas nozīmē, ka jūs varat instalēt primitīvus pēc vajadzības.
  • Komponentiem ir līdzīga API, kas ir pilnībā ievadīta.

Sekojiet šim primitīvu apmācība lai sāktu lietot Radix.

Materiāla lietotāja saskarne (MUI) ir viena no populārākajām React komponentu bibliotēkām ar vairāk nekā 80 000 zvaigznēm vietnē GitHub. Pēc noklusējuma MUI piedāvā komponentus, kas atbilst Google materiālu dizaina standartiem. Tomēr jūs varat pielāgot šos komponentus atbilstoši savām dizaina vajadzībām.

Papildus komponentiem MUI piedāvā arī veidnes un dizaina komplektus. Veidnes ir iepriekš izstrādāti lietotāja interfeisa dizaini, kas palīdz ātri izveidot priekšgalus. Dizaina komplekts ir dizaina elementu un stilu kolekcija, kuras mērķis ir palīdzēt dizaineriem un izstrādātājiem sasniegt konsekventu dizainu.

MUI kopienas versija ir bezmaksas, taču ir arī profesionāla un premium versija ar uzlabotām funkcijām.

Materiāla lietotāja saskarnes galvenās iezīmes

  • Komponenti ir ļoti pielāgojami ar tēmu veidošanas iespējām.
  • Sastāvdaļas ir gatavas ražošanai.
  • Pieejamība ir visu MUI piegādāto komponentu galvenā prioritāte.
  • Tam ir visaptveroša dokumentācija, kurā ir viegli orientēties.
  • Tam ir vairāki MUI lietošanas piemēri tehnoloģijas, piemēram, Remix, Next.js, Gatsby.js un daudzas citas, kas parāda, kā izmantot MUI.
  • Tas atbalsta TypeScript.
  • Tas ir ļoti populārs, un tajā ir liela kopiena, kas var palīdzēt ar jautājumiem par MUI.
  • Tas piedāvā iepriekš izveidotus lietotāja interfeisa komplektus materiālu dizaina komponentiem Figma, Adobe XD, Sketch un UXPin.
  • MUI nodrošina lielu ikonu izvēli.

Instalējiet Material UI savā projektā lai sāktu lietot MUI komponentus.

UI ir bezstilētu un pieejamu komponentu bibliotēka. UI palīdz izveidot iekļaujošus komponentus, apstrādājot aria atribūtus un lomas, fokusa pārvaldību, tastatūras navigāciju un nodrošinot, ka tie atbalsta ekrāna lasītājus.

Šie komponenti labi darbojas ar Tailwind CSS.

Bezgalvas lietotāja interfeisa galvenās iezīmes

  1. Tās sastāvdaļas ir bez stila, nodrošinot pilnīgu kontroli pār to izskatu.
  2. UI komponenti bez galvas ir pilnībā pieejami, kas palīdz izveidot iekļaujošas lietojumprogrammas, netērējot daudz laika komponentu veidošanai un testēšanai.
  3. Tas piedāvā iepriekš veidotus piemērus, izmantojot Tailwind UI ko varat izmantot savā projektā.

Nākamā lietotāja saskarne ir salīdzinoši jauna React bibliotēka. Tas ir pilnībā saderīgs ar Next.js, kas ļauj jums to izdarīt izveidot Next.js projektu ar minimālu uzstādīšanu.

Nākamais lietotāja interfeiss joprojām ir beta versijā, taču tajā ir daudz funkciju satriecošu un pieejamu vietņu izveidei.

Nākamās lietotāja saskarnes galvenās iezīmes

  • Visi komponenti atbilst WAI-ARIA vadlīnijām un atbalsta tastatūras navigāciju un fokusēšanu.
  • Tam ir noklusējuma motīvi, kurus varat pielāgot savām vajadzībām.
  • Varat arī ieviest tumšo režīmu, izmantojot tikai dažas koda rindiņas.
  • Tas nodrošina komplektu CSS multivides vaicājumi lai izveidotu atsaucīgus izkārtojumus.
  • Tam ir pilnībā ievadīta API, kas palīdz izveidot tipam drošu lietojumprogrammu.
  • Nākamie UI komponenti atbalsta servera puses renderēšanu.

Rūpīgi izvēlieties savu bibliotēku

Pieejamu lietojumprogrammu izveide var būt laikietilpīga; UI bibliotēkas izmantošana ir vienkāršāka. React projektiem ir pieejamas vairākas bibliotēkas, no kurām izvēlēties. Izvēloties bibliotēku, izlemiet, vai vēlaties komponentu bez galvas, kas sniegs pilnīgu kontroli pār stilu un funkcionalitāti, vai iepriekš noformētus, pielāgojamus komponentus.

Radix UI un Headless UI ir lieliski piemēroti, ja vēlaties pilnībā kontrolēt dizainu, savukārt Material UI un Next UI ir labas iespējas, ja vēlaties lietošanai gatavu bibliotēku.