Dette biblioteket gir deg rene, utvidbare komponenter du kan bruke i appen din og utvikle videre.

Radix UI er et lavt nivå, ustilt, tilgjengelig komponentbibliotek for å bygge høykvalitets, brukervennlige nettgrensesnitt. Du kan bruke den sammen med React for å lage apper med fullverdige komponenter som du enkelt kan style for å passe til ditt design.

Hva er Radix UI?

Radix UI er en samling av primitive, ustilte, tilgjengelige UI-komponenter for React-applikasjoner. Det gir byggeklossene du trenger for å lage ditt designsystem.

Hovedmålet med Radix UI er å tilby et sett med verktøykomponenter på lavt nivå som hjelper deg med å bygge gjenbrukbare komponenter. Komponentene kommer ustylet som standard, noe som betyr at du har full kontroll over stilen deres.

Sette opp din React-applikasjon

Du må sette opp en React-applikasjon for å bruke Radix UI. For å gjøre det, må du ha Node.js og npm, Node-pakkebehandleren, installert på datamaskinen din.

Med disse installert kan du opprette en ny React-applikasjon med denne terminalkommandoen:

instagram viewer 
npm init vite

Denne kommandoen vil initialisere Vite. Vite er et hurtigbyggende verktøy som lar deg lage moderne webapplikasjoner raskt. Du kan bruk Vite for å lage din React-applikasjon.

Etter å ha kjørt kommandoen ovenfor, vil du svare på en rekke spørsmål for å konfigurere React-applikasjonen din. Lag en React-applikasjon, navngi den radix-ui-app, og sørg for at den bruker TypeScript-språket.

Deretter går du inn i den nye appens rotkatalog og installer de nødvendige avhengighetene:

cd radix-ui-app
npm install

React-applikasjonen din er nå klar.

Installerer Radix UI

Radix UI er et flott komponentbiblioteky som du kan bruke til å lage tilgjengelige React-applikasjoner. Den lar deg installere hver komponent individuelt som en separat pakke. Du vil spesifisere komponentens navn i kommandoen for å installere den.

For eksempel:

npm install @radix-ui/react-dropdown-menu

Dette vil installere Radix UI-rullegardinmenyen. Radix UI har mange andre komponenter du kan installere avhengig av dine behov.

Bygg applikasjonen din ved å bruke Radix UI

Nå som du har installert rullegardinmenykomponenten fra Radix UI, kan du bygge en enkel rullegardinmeny ved hjelp av Radix UI. For å gjøre dette, vil du først importere de nødvendige komponentene fra rullegardinmenyen Radix UI.

Her er et eksempel som viser hvordan du kan bygge en enkel rullegardinmeny ved hjelp av Radix:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (













New Tab</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>




More tools</p>
 </DropdownMenu.Item>
 </DropdownMenu.Group>
 </DropdownMenu.Content>
 </DropdownMenu.Root>
 </div>
 );
}
exportdefault App;

Denne koden importerer alle komponentene fra @radix-ui/react-dropdown-meny pakke som Nedtrekksmenyen. Den bruker deretter disse komponentene til å lage en rullegardinmeny inne i div element.

De Nedtrekksmenyen. Rot er rotkomponenten i rullegardinmenyen. Du bør legge alle andre rullegardinmenykomponenter i denne. Du kan definere en utløser for rullegardinmenyen ved å bruke Nedtrekksmenyen. Avtrekker komponent. I dette tilfellet er utløseren en knapp element med "Klikk meg"-teksten. Når du klikker på knappen, vil rullegardinmenyen vises.

Med Nedtrekksmenyen. Innhold komponent, definerer du innholdet i rullegardinmenyen og Nedtrekksmenyen. Gruppe komponent representerer en gruppe relaterte menyelementer. Du bruker Nedtrekksmenyen. Punkt komponent for å definere individuelle elementer i rullegardinmenyen.

I dette eksemplet er det to DropdownMenu. Gruppekomponenter, som hver inneholder en enkelt rullegardinmeny. Varekomponent. Disse komponentene er alle pakket inn i en rullegardinmeny. Innholdskomponent.

Å gjengi kodeblokken ovenfor vil endre grensesnittet ditt til å se slik ut:

Som du kan se, mangler resultatene noen styling, så du må legge til din egen CSS neste.

Styling av Radix UI-komponentene dine

En av fordelene med Radix UI er at det ikke pålegger komponentene noen styling. Dette betyr at du har full kontroll over komponentens styling. Du kan style komponentene dine ved å bruke CSS-in-JS-biblioteker som stylede-komponenter og følelser, eller du kan bruke tradisjonell CSS.

Her er et eksempel på hvordan du kan style Radix UI-komponentene dine ved å bruke tradisjonell CSS:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
functionApp() {
return (





"trigger">


exportdefault App;

Dette eksemplet legger til klassenavn støtte til knapp element, den Nedtrekksmenyen. Avtrekker, den Nedtrekksmenyen. Innhold, og Nedtrekksmenyen. Punkt komponenter.

Etter å ha brukt klassene, kan du style komponentene ved å bruke CSS:

.button {
padding: 0.7rem 0.8rem;
border: none;
border-radius: 12px;
background-color: #333333;
color: #f2f2f2;
}
.trigger {
border: none;
}


.content {
margin: 1rem;
padding: 0.7rem;
background-color: #FFFFFF;
color: #333333;
border-radius: 7px;
}


.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
}
.item:hover {
background-color: #333333;
color: lightgray;
}

Kodeblokken ovenfor vil bruke de definerte stilene til komponentene for et mer attraktivt utseende:

Radix UI tilbyr også React Icons, slik at du kan legge til ikoner i applikasjonen din for å forskjønne den enda mer. Start med å installere Radix UI icons-pakken:

npm install @radix-ui/react-icons

Etter at du har installert pakken, kan du bruke noen av ikonene i programmet.

For eksempel:

import React from"react";
import * as DropdownMenu from"@radix-ui/react-dropdown-menu";
import { HamburgerMenuIcon, PlusIcon } from"@radix-ui/react-icons";
functionApp() {
return (





"trigger">


exportdefault App;

Dette eksemplet legger til HamburgerMenuIcon og PlusIcon til søknaden. Førstnevnte er inne i en knappekomponent, og sistnevnte forsterker den første Fall ned. Punkt komponent.

Deretter oppdaterer du .punkt klasse i CSS-filen din:

.item {
padding: 1rem;
cursor: pointer;
border-radius: 7px;
font-weight: bold;
display: flex;
gap: 1rem;
}

Nå skal søknaden din se slik ut.

Bygg Quality React-applikasjon ved hjelp av Radix UI

Radix UI er et kraftig verktøy for å bygge React-applikasjoner. Den gir et sett med lavt nivå, ustilte, tilgjengelige komponenter som du kan bruke som byggeklosser for applikasjonen din.

Ved å bruke Radix UI kan du fokusere på funksjonaliteten til applikasjonen din uten å bekymre deg for underliggende UI-kompleksitet. Enten du er en erfaren utvikler eller nybegynner, kan Radix UI hjelpe deg med å bygge høykvalitets, brukervennlige nettgrensesnitt.