Dette bibliotek giver dig rene, udvidelige komponenter, du kan bruge i din app og udvikle videre.

Radix UI er et lavt niveau, ustilet, tilgængeligt komponentbibliotek til opbygning af højkvalitets, brugervenlige webgrænseflader. Du kan bruge det sammen med React til at skabe apps med fuldt udstyrede komponenter, som du nemt kan style, så det passer til dit design.

Hvad er Radix UI?

Radix UI er en samling af primitive, ustylede, tilgængelige UI-komponenter til React-applikationer. Det giver de byggesten, du skal bruge til at skabe dit designsystem.

Hovedmålet med Radix UI er at levere et sæt hjælpekomponenter på lavt niveau, der hjælper dig med at bygge genbrugelige komponenter. Komponenterne kommer som standard ustylede, hvilket betyder, at du har fuld kontrol over deres stil.

Opsætning af din React-applikation

Du skal konfigurere en React-applikation for at bruge Radix UI. For at gøre det skal du have Node.js og npm, Node-pakkemanageren, installeret på din computer.

Med disse installeret kan du oprette en ny React-applikation med denne terminalkommando:

npm init vite

Denne kommando vil initialisere Vite. Vite er et hurtigt byggeværktøj, der lader dig oprette moderne webapplikationer hurtigt. Du kan brug Vite til at oprette din React-applikation.

Efter at have kørt ovenstående kommando, vil du besvare en række meddelelser for at konfigurere din React-applikation. Opret en React-applikation, navngiv den radix-ui-app, og sørg for, at den bruger TypeScript-sproget.

Indtast derefter din nye apps rodmappe og installer de nødvendige afhængigheder:

cd radix-ui-app
npm install

Din React-applikation er nu klar.

Installation af Radix UI

Radix UI er et fantastisk komponentbiblioteky, som du kan bruge til at oprette tilgængelige React-applikationer. Det lader dig installere hver komponent individuelt som en separat pakke. Du vil angive komponentens navn i din kommando for at installere den.

For eksempel:

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

Dette vil installere Radix UI-rullemenukomponenten. Radix UI har mange andre komponenter, du kan installere afhængigt af dine behov.

Byg din applikation ved hjælp af Radix UI

Nu hvor du har installeret rullemenukomponenten fra Radix UI, kan du bygge en simpel rullemenu ved hjælp af Radix UI. For at gøre dette skal du først importere de nødvendige komponenter fra Radix UI-rullemenukomponenten.

Her er et eksempel, der viser, hvordan du kan bygge en simpel rullemenu ved hjælp af 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 kode importerer alle komponenter fra @radix-ui/react-dropdown-menu pakke som Drop down menu. Den bruger derefter disse komponenter til at oprette en rullemenu inde i div element.

Det Drop down menu. Rod er rodkomponenten i rullemenuen. Du bør indlejre alle andre dropdown-menukomponenter i denne. Du kan definere en trigger for rullemenuen ved hjælp af Drop down menu. Udløser komponent. I dette tilfælde er udløseren en knap element med "Klik mig"-teksten. Når du klikker på knappen, vises rullemenuen.

Med Drop down menu. Indhold komponent, definerer du indholdet af rullemenuen og Drop down menu. Gruppe komponent repræsenterer en gruppe af relaterede menupunkter. Du bruger Drop down menu. Vare komponent til at definere individuelle elementer i rullemenuen.

I dette eksempel er der to DropdownMenuer. Gruppekomponenter, som hver indeholder en enkelt dropdownMenu. Varekomponent. Disse komponenter er alle pakket ind i en DropdownMenu. Indholdskomponent.

Gengivelse af kodeblokken ovenfor vil ændre din grænseflade til at se sådan ud:

Som du kan se, mangler resultaterne enhver styling, så du bliver nødt til at tilføje din egen CSS næste gang.

Stil dine Radix UI-komponenter

En af fordelene ved Radix UI er, at det ikke pålægger dine komponenter nogen styling. Det betyder, at du har fuld kontrol over din komponents styling. Du kan style dine komponenter ved hjælp af CSS-in-JS-biblioteker som stylede-komponenter og følelser, eller du kan bruge traditionel CSS.

Her er et eksempel på, hvordan du style dine Radix UI-komponenter ved hjælp af traditionel CSS:

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





"trigger">


exportdefault App;

Dette eksempel tilføjer klassenavn støtte til knap element, den Drop down menu. Udløser, det Drop down menu. Indhold, og Drop down menu. Vare komponenter.

Efter at have anvendt klasserne, kan du style komponenterne ved hjælp af 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 anvende de definerede stilarter på komponenterne for et mere attraktivt udseende:

Radix UI tilbyder også React Icons, så du kan tilføje ikoner til din applikation for at forskønne den endnu mere. Start med at installere Radix UI icons-pakken:

npm install @radix-ui/react-icons

Efter installation af pakken kan du bruge nogle af dens ikoner i din applikation.

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 eksempel tilføjer HamburgerMenuIkon og PlusIkon til ansøgningen. Førstnævnte er inde i en knapkomponent, og sidstnævnte forstærker den første Dropdown. Vare komponent.

Dernæst skal du opdatere .vare klasse i din CSS-fil:

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

Nu skulle din ansøgning se sådan ud.

Byg Quality React-applikation ved hjælp af Radix UI

Radix UI er et kraftfuldt værktøj til at bygge React-applikationer. Det giver et sæt af lavt niveau, ustilede, tilgængelige komponenter, som du kan bruge som byggesten til din applikation.

Ved at bruge Radix UI kan du fokusere på funktionaliteten af ​​din applikation uden at bekymre dig om underliggende UI kompleksitet. Uanset om du er en erfaren udvikler eller nybegynder, kan Radix UI hjælpe dig med at bygge højkvalitets, brugervenlige webgrænseflader.