Questa libreria ti offre componenti puliti ed estensibili che puoi usare nella tua app e sviluppare ulteriormente.

Radix UI è una libreria di componenti di basso livello, senza stile e accessibile per la creazione di interfacce web di alta qualità e intuitive. Puoi usarlo insieme a React per creare app con componenti completi che puoi facilmente modellare per adattarli al tuo design.

Cos'è l'interfaccia utente di Radix?

Radix UI è una raccolta di componenti dell'interfaccia utente primitivi, senza stile e accessibili per le applicazioni React. Fornisce gli elementi costitutivi necessari per creare il tuo sistema di progettazione.

L'obiettivo principale di Radix UI è fornire una serie di componenti di utilità di basso livello che ti aiutino a creare componenti riutilizzabili. I componenti sono privi di stile per impostazione predefinita, il che significa che hai il controllo completo sul loro stile.

Configurazione dell'applicazione React

È necessario configurare un'applicazione React per utilizzare l'interfaccia utente di Radix. Per fare ciò, devi avere Node.js e

instagram viewer
npm, il gestore di pacchetti Node, installato sul tuo computer.

Con questi installati, puoi creare una nuova applicazione React con questo comando da terminale:

npm init vite

Questo comando inizializzerà Vite. Vite è uno strumento di compilazione rapida che ti consente di creare rapidamente applicazioni Web moderne. Puoi usa Vite per creare la tua applicazione React.

Dopo aver eseguito il comando precedente, risponderai a una serie di richieste per configurare la tua applicazione React. Crea un'applicazione React, chiamala radix-ui-appe assicurarsi che utilizzi il linguaggio TypeScript.

Quindi, inserisci la directory principale della tua nuova app e installa le dipendenze necessarie:

cd radix-ui-app
npm install

La tua applicazione React è ora pronta.

Installazione dell'interfaccia utente di Radix

L'interfaccia utente di Radix lo è una grande libreria di componentiy che puoi utilizzare per creare applicazioni React accessibili. Ti consente di installare ciascun componente singolarmente come pacchetto separato. Specificherai il nome del componente nel tuo comando per installarlo.

Per esempio:

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

Questo installerà il componente del menu a discesa dell'interfaccia utente Radix. Radix UI ha molti altri componenti che puoi installare a seconda delle tue esigenze.

Creazione della tua applicazione utilizzando l'interfaccia utente di Radix

Ora che hai installato il componente del menu a discesa dall'interfaccia utente di Radix, puoi creare un semplice menu a discesa utilizzando l'interfaccia utente di Radix. Per fare ciò, importerai prima i componenti necessari dal componente del menu a discesa dell'interfaccia utente di Radix.

Ecco un esempio che mostra come creare un semplice menu a discesa utilizzando 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;

Questo codice importa tutti i componenti dal file @radix-ui/react-dropdown-menu pacchetto come Menu a discesa. Quindi utilizza questi componenti per creare un menu a discesa all'interno del file div elemento.

IL Menu a discesa. Radice è il componente principale del menu a discesa. Dovresti nidificare tutti gli altri componenti del menu a discesa all'interno di questo. È possibile definire un trigger per il menu a discesa utilizzando il Menu a discesa. Grilletto componente. In questo caso, il trigger è a pulsante elemento con il testo "Fai clic su di me". Quando fai clic sul pulsante, verrà visualizzato il menu a discesa.

Con il Menu a discesa. Contenuto componente, si definisce il contenuto del menu a discesa e il Menu a discesa. Gruppo componente rappresenta un gruppo di voci di menu correlate. Stai usando il Menu a discesa. Articolo componente per definire le singole voci del menu a discesa.

In questo esempio, ci sono due DropdownMenu. Componenti di gruppo, ognuno dei quali contiene un singolo menu a discesa. Componente articolo. Questi componenti sono tutti racchiusi in un DropdownMenu. Componente di contenuto.

Il rendering del blocco di codice sopra modificherà la tua interfaccia in modo che assomigli a questa:

Come puoi vedere, i risultati non hanno alcuno stile, quindi dovrai aggiungere il tuo CSS in seguito.

Styling dei componenti dell'interfaccia utente Radix

Uno dei vantaggi dell'interfaccia utente di Radix è che non impone alcuno stile ai componenti. Ciò significa che hai il controllo completo sullo stile del tuo componente. Puoi modellare i tuoi componenti usando le librerie CSS-in-JS come styled-components ed emotion, oppure puoi usare i CSS tradizionali.

Ecco un esempio di come definire lo stile dei componenti dell'interfaccia utente Radix utilizzando i CSS tradizionali:

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





"trigger">


exportdefault App;

Questo esempio aggiunge il nome della classe prop al pulsante elemento, il Menu a discesa. Grilletto, IL Menu a discesa. Contenuto, e il Menu a discesa. Articolo componenti.

Dopo aver applicato le classi, puoi quindi modellare i componenti usando i 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;
}

Il blocco di codice sopra applicherà gli stili definiti ai componenti per un aspetto più attraente:

L'interfaccia utente di Radix offre anche React Icons, quindi puoi aggiungere icone alla tua applicazione per abbellirla ancora di più. Inizia installando il pacchetto di icone dell'interfaccia utente Radix:

npm install @radix-ui/react-icons

Dopo aver installato il pacchetto, puoi utilizzare alcune delle sue icone nella tua applicazione.

Per esempio:

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;

Questo esempio aggiunge il HamburgerMenuIcona E Icona Più all'applicazione. Il primo è all'interno di un componente pulsante e il secondo aumenta il primo Cadere in picchiata. Articolo componente.

Successivamente, aggiorna il file .articolo classe nel tuo file CSS:

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

Ora la tua applicazione dovrebbe assomigliare a questa.

Costruisci un'applicazione React di qualità utilizzando l'interfaccia utente di Radix

Radix UI è un potente strumento per la creazione di applicazioni React. Fornisce una serie di componenti di basso livello, senza stile e accessibili che è possibile utilizzare come elementi costitutivi per la propria applicazione.

Utilizzando Radix UI, puoi concentrarti sulla funzionalità della tua applicazione senza preoccuparti delle complessità dell'interfaccia utente sottostante. Che tu sia uno sviluppatore esperto o un principiante, Radix UI può aiutarti a creare interfacce web di alta qualità e intuitive.