Deze bibliotheek biedt u schone, uitbreidbare componenten die u in uw app kunt gebruiken en verder kunt ontwikkelen.

Radix UI is een low-level, ongestylede, toegankelijke componentenbibliotheek voor het bouwen van hoogwaardige, gebruiksvriendelijke webinterfaces. Je kunt het samen met React gebruiken om apps te maken met complete componenten die je gemakkelijk kunt stylen om bij je ontwerp te passen.

Wat is de gebruikersinterface van Radix?

Radix UI is een verzameling primitieve, ongestylede, toegankelijke UI-componenten voor React-applicaties. Het biedt de bouwstenen die u nodig hebt om uw ontwerpsysteem te maken.

Het belangrijkste doel van Radix UI is om een ​​set low-level hulpprogramma-componenten te bieden die u helpen bij het bouwen van herbruikbare componenten. De componenten worden standaard ongestyled geleverd, wat betekent dat je volledige controle hebt over hun styling.

Uw React-toepassing instellen

U moet een React-applicatie instellen om Radix UI te gebruiken. Om dit te doen, moet u Node.js en npm, de Node-pakketbeheerder, geïnstalleerd op uw computer.

instagram viewer

Als deze zijn geïnstalleerd, kunt u een nieuwe React-toepassing maken met deze terminalopdracht:

npm init vite

Deze opdracht zal Vite initialiseren. Vite is een snel te bouwen tool waarmee je snel moderne webapplicaties kunt maken. Jij kan gebruik Vite om uw React-applicatie te maken.

Nadat u de bovenstaande opdracht hebt uitgevoerd, beantwoordt u een reeks prompts om uw React-toepassing te configureren. Maak een React-applicatie, noem maar op radix-ui-appen zorg ervoor dat het de TypeScript-taal gebruikt.

Voer vervolgens de hoofdmap van uw nieuwe app in en installeer de benodigde afhankelijkheden:

cd radix-ui-app
npm install

Je React-applicatie is nu klaar.

Radix-gebruikersinterface installeren

Radix-gebruikersinterface is een geweldige componentenbibliotheeky die u kunt gebruiken om toegankelijke React-applicaties te maken. Hiermee kunt u elk onderdeel afzonderlijk installeren als een afzonderlijk pakket. U geeft de naam van het onderdeel op in uw opdracht om het te installeren.

Bijvoorbeeld:

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

Dit zal het vervolgkeuzemenu van de Radix UI installeren. Radix UI heeft vele andere componenten die u kunt installeren, afhankelijk van uw behoeften.

Uw applicatie bouwen met behulp van Radix UI

Nu u de vervolgkeuzemenucomponent van Radix UI hebt geïnstalleerd, kunt u een eenvoudig vervolgkeuzemenu bouwen met behulp van Radix UI. Om dit te doen, importeert u eerst de benodigde componenten uit het Radix UI vervolgkeuzemenu component.

Hier is een voorbeeld dat laat zien hoe u een eenvoudig vervolgkeuzemenu kunt bouwen met 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;

Deze code importeert alle componenten uit het @radix-ui/react-dropdown-menu pakket als Drop-down menu. Vervolgens gebruikt het deze componenten om een ​​vervolgkeuzemenu te maken in het div element.

De Drop-down menu. Wortel is de hoofdcomponent van het vervolgkeuzemenu. U moet alle andere vervolgkeuzemenucomponenten hierin nesten. U kunt een trigger voor het vervolgkeuzemenu definiëren met behulp van de Drop-down menu. Trekker bestanddeel. In dit geval is de trigger een knop element met de tekst "Klik op mij". Wanneer u op de knop klikt, verschijnt het vervolgkeuzemenu.

Met de Drop-down menu. Inhoud component definieert u de inhoud van het vervolgkeuzemenu en de Drop-down menu. Groep component vertegenwoordigt een groep verwante menu-items. U gebruikt de Drop-down menu. Item component om individuele items van het vervolgkeuzemenu te definiëren.

In dit voorbeeld zijn er twee DropdownMenu. Groepeer componenten, die elk een enkel DropdownMenu bevatten. Artikelcomponent. Deze componenten zijn allemaal verpakt in een DropdownMenu. Inhoudscomponent.

Door het bovenstaande codeblok te renderen, wordt uw interface gewijzigd en ziet deze er als volgt uit:

Zoals u kunt zien, missen de resultaten enige stijl, dus u moet vervolgens uw eigen CSS toevoegen.

Styling van uw Radix UI-componenten

Een van de voordelen van Radix UI is dat het geen styling oplegt aan uw componenten. Dit betekent dat u volledige controle heeft over de styling van uw component. U kunt uw componenten stylen met behulp van CSS-in-JS-bibliotheken zoals gestileerde componenten en emotie, of u kunt traditionele CSS gebruiken.

Hier is een voorbeeld van hoe u uw Radix UI-componenten kunt stylen met behulp van traditionele CSS:

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





"trigger">


exportdefault App;

Dit voorbeeld voegt de naam van de klasse steun aan de knop onderdeel, de Drop-down menu. Trekker, de Drop-down menu. Inhoud, en de Drop-down menu. Item componenten.

Nadat u de klassen hebt toegepast, kunt u de componenten stylen met behulp van 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;
}

Het bovenstaande codeblok past de gedefinieerde stijlen toe op de componenten voor een aantrekkelijker uiterlijk:

Radix UI biedt ook React Icons, zodat u iconen aan uw applicatie kunt toevoegen om deze nog mooier te maken. Begin met het installeren van het Radix UI-pictogrammenpakket:

npm install @radix-ui/react-icons

Nadat u het pakket hebt geïnstalleerd, kunt u enkele van de pictogrammen in uw toepassing gebruiken.

Bijvoorbeeld:

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;

Dit voorbeeld voegt de HamburgerMenuIcon En PlusIcon naar de applicatie. De eerste zit in een knopcomponent en de laatste vergroot de eerste Laten vallen. Item bestanddeel.

Werk vervolgens de .item class in je CSS-bestand:

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

Nu zou je applicatie er zo uit moeten zien.

Bouw hoogwaardige React-applicatie met behulp van Radix UI

Radix UI is een krachtige tool voor het bouwen van React-applicaties. Het biedt een set low-level, ongestylede, toegankelijke componenten die u kunt gebruiken als bouwstenen voor uw toepassing.

Door Radix UI te gebruiken, kunt u zich concentreren op de functionaliteit van uw applicatie zonder u zorgen te hoeven maken over onderliggende UI-complexiteiten. Of u nu een doorgewinterde ontwikkelaar of een beginner bent, Radix UI kan u helpen bij het bouwen van hoogwaardige, gebruiksvriendelijke webinterfaces.