Tilgængelighed bør være en af dine topprioriteter under udvikling. Tilgængelige komponenter forbedrer en applikations anvendelighed og udvider dens publikumsbase. Men at skabe tilgængelige applikationer kan være dyrt i forhold til opbygning og testtid.
For at spare tid kan du bruge et UI-komponentbibliotek, der giver tilgængelige komponenter, der er blevet grundigt testet. Eksempler på tilgængelige UI-komponentbiblioteker er Chakra UI, Radix UI, Material UI, Headless UI og Next UI.
Chakra UI er et simpelt komponentbibliotek, der er fantastisk til at skabe applikationer, der er tilgængelige. Med 1,4 millioner downloads om måneden vokser dette UI-bibliotek hurtigt, og du er sikker på at finde svar, når du går i stå med at bruge det. Det er komponerbart og giver komponenter, der er små med minimal kompleksitet. Denne tilgang øger dens tilpasningsevne, da udviklere kan kombinere disse små komponenter for at bygge større.
Chakra UI har en gratis version og betalte versioner. Den gratis version er dog tilstrækkelig til små projekter.
Nøglefunktioner i Chakra UI
- Chakra UI-komponenter følger WAI-ARIA-standarderne og er alle tilgængelige.
- Komponenter kan tilpasses, og du kan ændre dem, så de matcher dine designkrav.
- Komponenter er komponerbare. Du kan nemt kombinere dem til at bygge større komponenter.
- Chakra UI-biblioteket er typesikkert, da det er skrevet i TypeScript.
- Det har stor fællesskabsstøtte og omfattende dokumentation.
- Det tilbyder en lys og mørk UI, som eliminerer kompleksiteten af implementering af en mørk tilstand i din React-app.
- Den understøtter et mobil-først-design, og hver komponent er lydhør.
Følg Chakra UI installationsvejledning at begynde at bruge Chakra UI i dit projekt.
Radix UI er et open source-bibliotek til at bygge tilgængelige webapplikationer og designsystemer. Radix tilbyder primitiver, ikoner og farver.
Radix primitiver er de ustylede, tilgængelige komponenter. Primitiver fremskynder udviklingen ved at tage sig af vanskelige dele som WAI-ARIA-overholdelse, tastaturnavigation og fokusstyring. Fordi de kommer ustylede, er du fri til at implementere dit design med en stylingløsning efter eget valg.
Radix farver leverer et tilgængeligt farvesystem til at designe UI-komponenter, der passer ind i dit tema og dit brand. Den har en automatisk mørk tilstand anvendt via et klassenavn og flere farvekombinationsmuligheder, der passerer WCAG-kontrastforholdet.
Radix ikoner er et sæt på 15*15 ikoner tilgængelige som individuelle React-komponenter. Disse ikoner er også tilgængelige som SVG-filer, og du kan også åbne dem i Figma eller Sketch.
Tilsammen forenkler primitiver, farver og ikoner den måde, du bygger din applikations frontend på.
Vigtigste funktioner i Radix UI
- Radix-komponenter følger WAI-ARIA-designmønstrene.
- Radix UI-komponenter er ustylede, hvilket giver dig frihed til at tilpasse dem til din smag.
- Komponenter kan enten være kontrollerede eller ukontrollerede. Som standard er de ukontrollerede, så du kan bruge dem uden at skulle administrere den lokale stat.
- Hver primitiv kan installeres individuelt, hvilket betyder, at du kan installere primitiver, som du har brug for dem.
- Komponenter deler en lignende API, der er fuldt indtastet.
Følg dette primitiver tutorial for at begynde at bruge Radix.
Material UI (MUI) er et af de mest populære React-komponentbiblioteker med mere end 80.000 stjerner på GitHub. Som standard tilbyder MUI komponenter, der følger Googles standarder for materialedesign. Du kan dog tilpasse disse komponenter, så de passer til dine designbehov.
Udover komponenter tilbyder MUI også skabeloner og designsæt. Skabeloner er prædesignede UI-design, der hjælper dig med at opbygge frontends hurtigt. Et designsæt er en samling af designelementer og stilarter, der har til formål at hjælpe designere og udviklere med at opnå et ensartet design.
MUI's community-version er gratis, men der er en pro- og premium-version med mere avancerede funktioner.
Nøglefunktioner i Material UI
- Komponenter kan i høj grad tilpasses med temafunktioner.
- Komponenterne er produktionsklare.
- Tilgængelighed er en kerneprioritet for alle de komponenter, som MUI sender.
- Den har omfattende dokumentation, der er nem at navigere i.
- Den har flere Eksempler på MUI-brug af teknologier som Remix, Next.js, Gatsby.js og mange flere, der demonstrerer, hvordan man bruger MUI.
- Det understøtter TypeScript.
- Det er meget populært og har et stort fællesskab, der kan hjælpe med spørgsmål om MUI.
- Det tilbyder præbyggede UI-sæt til materialedesignkomponenter til Figma, Adobe XD, Sketch og UXPin.
- MUI giver et stort udvalg af ikoner.
Installer Material UI i dit projekt for at begynde at bruge MUI-komponenter.
Headless UI er et bibliotek af ustylede og tilgængelige komponenter. Headless UI hjælper dig med at bygge inkluderende komponenter ved at håndtere aria-attributter og roller, fokusstyring, tastaturnavigation og sikre, at de understøtter skærmlæsere.
Disse komponenter fungerer godt med Medvind CSS.
Nøglefunktioner i Headless UI
- Dens komponenter er ustylede, hvilket giver dig total kontrol over, hvordan de ser ud.
- Hovedløse UI-komponenter er fuldt tilgængelige, hvilket hjælper dig med at skabe inkluderende applikationer uden at bruge en masse tid på at bygge og teste komponenter.
- Det tilbyder præ-stylede eksempler via Tailwind UI som du kan bruge i dit projekt.
Next UI er et relativt nyt React-bibliotek. Den er fuldt ud kompatibel med Next.js, så du kan oprette et Next.js-projekt med minimal opsætning.
Next UI er stadig i beta, men har adskillige funktioner til at bygge fantastiske og tilgængelige websteder.
Nøglefunktioner i Next UI
- Alle komponenter følger WAI-ARIA-retningslinjerne og understøtter tastaturnavigation og fokusering.
- Den leveres med standardtemaer, som du kan tilpasse til at matche dine behov.
- Du kan også implementere mørk tilstand med blot et par linjer kode.
- Det giver et sæt af CSS-medieforespørgsler til at bygge responsive layouts.
- Den har en fuldt indtastet API, der hjælper dig med at oprette en typesikker applikation.
- Næste UI-komponenter understøtter gengivelse på serversiden.
Vælg dit bibliotek med omhu
Det kan være tidskrævende at oprette tilgængelige applikationer; det er nemmere at bruge et UI-bibliotek. Til React-projekter er der flere biblioteker at vælge imellem. Når du vælger et bibliotek, skal du beslutte, om du vil have en hovedløs komponent, der giver dig total kontrol over styling og funktionalitet eller præ-stylede komponenter, der kan tilpasses.
Radix UI og Headless UI er gode, hvis du vil have fuld kontrol over designet, mens Material UI og Next UI er gode muligheder, hvis du vil have et klar-til-brug bibliotek.