Această bibliotecă vă oferă componente curate și extensibile pe care le puteți utiliza în aplicația dvs. și le puteți dezvolta în continuare.

Radix UI este o bibliotecă de componente de nivel scăzut, fără stil, accesibilă pentru construirea de interfețe web de înaltă calitate, ușor de utilizat. Îl puteți folosi împreună cu React pentru a crea aplicații cu componente complete pe care le puteți modela cu ușurință pentru a se potrivi cu designul dvs.

Ce este Radix UI?

Radix UI este o colecție de componente UI primitive, fără stil și accesibile pentru aplicațiile React. Acesta oferă elementele de bază de care aveți nevoie pentru a vă crea sistemul de proiectare.

Scopul principal al interfeței de utilizare Radix este de a oferi un set de componente utilitare de nivel scăzut care vă ajută să construiți componente reutilizabile. Componentele vin fără stil în mod implicit, ceea ce înseamnă că aveți control complet asupra stilului lor.

Configurarea aplicației dvs. React

Trebuie să configurați o aplicație React pentru a utiliza Radix UI. Pentru a face acest lucru, trebuie să aveți Node.js și

instagram viewer
npm, managerul de pachete Node, instalat pe computerul dvs.

Cu acestea instalate, puteți crea o nouă aplicație React cu această comandă de terminal:

npm init vite

Această comandă va inițializa Vite. Vite este un instrument de construcție rapidă care vă permite să creați rapid aplicații web moderne. Puteți utilizați Vite pentru a vă crea aplicația React.

După ce rulați comanda de mai sus, veți răspunde la o serie de solicitări pentru a vă configura aplicația React. Creați o aplicație React, denumiți-o radix-ui-appși asigurați-vă că folosește limbajul TypeScript.

Apoi, introduceți directorul rădăcină al noii aplicații și instalați dependențele necesare:

cd radix-ui-app
npm install

Aplicația dvs. React este acum gata.

Instalarea Radix UI

Radix UI este o bibliotecă de componente grozavăy pe care le puteți utiliza pentru a crea aplicații React accesibile. Vă permite să instalați fiecare componentă individual ca un pachet separat. Veți specifica numele componentei în comanda dumneavoastră pentru ao instala.

De exemplu:

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

Aceasta va instala componenta meniului derulant Radix UI. Radix UI are multe alte componente pe care le puteți instala în funcție de nevoile dvs.

Creați aplicația dvs. folosind Radix UI

Acum că ați instalat componenta meniului drop-down din Radix UI, puteți crea un meniu drop-down simplu folosind Radix UI. Pentru a face acest lucru, mai întâi veți importa componentele necesare din componenta meniului derulant Radix UI.

Iată un exemplu care arată cum puteți crea un meniu derulant simplu folosind 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;

Acest cod importă toate componentele din @radix-ui/react-dropdown-menu pachet ca Meniu dropdown. Apoi folosește aceste componente pentru a crea un meniu drop-down în interiorul div element.

The Meniu dropdown. Rădăcină este componenta rădăcină a meniului drop-down. Ar trebui să așezați toate celelalte componente ale meniului drop-down în cadrul acestuia. Puteți defini un declanșator pentru meniul drop-down utilizând Meniu dropdown. Trigger componentă. În acest caz, declanșatorul este a buton element cu textul „Click Me”. Când faceți clic pe buton, va apărea meniul drop-down.

Cu Meniu dropdown. Conţinut componentă, definiți conținutul meniului drop-down și Meniu dropdown. grup componenta reprezintă un grup de elemente de meniu înrudite. Utilizați Meniu dropdown. Articol componentă pentru a defini elementele individuale din meniul drop-down.

În acest exemplu, există două meniu derulant. Grupați componente, fiecare dintre ele conține un singur meniu dropdown. Componenta articolului. Aceste componente sunt toate împachetate într-un meniu dropdown. Componenta de continut.

Redarea blocului de cod de mai sus va modifica interfața astfel încât să arate astfel:

După cum puteți vedea, rezultatelor le lipsește orice stil, așa că va trebui să adăugați propriul dvs. CSS în continuare.

Stilizarea componentelor UI Radix

Unul dintre avantajele Radix UI este că nu impune nici un stil asupra componentelor dumneavoastră. Aceasta înseamnă că aveți control complet asupra stilului componentei dvs. Puteți să vă stilați componentele folosind biblioteci CSS-in-JS, cum ar fi componentele stilizate și emoția, sau puteți utiliza CSS tradițional.

Iată un exemplu despre cum să vă stilați componentele Radix UI folosind CSS tradițional:

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





"trigger">


exportdefault App;

Acest exemplu adaugă numele clasei prop la buton elementul, cel Meniu dropdown. Trigger, cel Meniu dropdown. Conţinut, si Meniu dropdown. Articol componente.

După aplicarea claselor, puteți apoi stila componentele folosind 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;
}

Blocul de cod de mai sus va aplica stilurile definite componentelor pentru un aspect mai atractiv:

Radix UI oferă, de asemenea, pictograme React, astfel încât să puteți adăuga pictograme aplicației dvs. pentru a o înfrumuseța mai mult. Începeți prin a instala pachetul de pictograme Radix UI:

npm install @radix-ui/react-icons

După instalarea pachetului, puteți utiliza unele dintre pictogramele acestuia în aplicația dvs.

De exemplu:

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;

Acest exemplu adaugă Pictograma HamburgerMenu și PlusIcon la aplicație. Primul se află în interiorul unei componente de buton, iar cel de-al doilea îl sporește pe primul Scapă jos. Articol componentă.

Apoi, actualizați .articol clasa în fișierul dvs. CSS:

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

Acum aplicația dvs. ar trebui să arate așa.

Creați aplicație React de calitate folosind interfața de utilizare Radix

Radix UI este un instrument puternic pentru construirea de aplicații React. Acesta oferă un set de componente de nivel scăzut, fără stil și accesibile, pe care le puteți utiliza ca elemente de bază pentru aplicația dvs.

Folosind Radix UI, vă puteți concentra asupra funcționalității aplicației dvs. fără a vă face griji cu privire la complexitățile subiacente ale UI. Indiferent dacă sunteți un dezvoltator experimentat sau un începător, Radix UI vă poate ajuta să construiți interfețe web de înaltă calitate, ușor de utilizat.