React-rakenduse loomine Radixi kasutajaliidese abil

Radix UI on madala tasemega, stiilita, juurdepääsetav komponentide teek kvaliteetsete ja kasutajasõbralike veebiliideste loomiseks. Saate seda kasutada koos Reactiga, et luua täisfunktsionaalsete komponentidega rakendusi, mida saate hõlpsalt oma disainiga sobivaks kujundada.

Mis on Radix UI?

Radix UI on Reacti rakenduste jaoks primitiivsete, stiilideta juurdepääsetavate kasutajaliidese komponentide kogum. See pakub ehitusplokke, mida vajate oma disainisüsteemi loomiseks.

Radixi kasutajaliidese põhieesmärk on pakkuda madala tasemega utiliidi komponente, mis aitavad teil luua korduvkasutatavaid komponente. Komponendid on vaikimisi stiilita, mis tähendab, et teil on täielik kontroll nende stiili üle.

Reacti rakenduse seadistamine

Radixi kasutajaliidese kasutamiseks peate seadistama rakenduse React. Selleks peab teil olema Node.js ja npm, sõlme paketihaldur, arvutisse installitud.

Kui need on installitud, saate selle terminalikäsuga luua uue Reacti rakenduse:

npm init vite

See käsk initsialiseerib Vite. Vite on kiirelt koosnev tööriist, mis võimaldab kiiresti luua kaasaegseid veebirakendusi. Sa saad kasutage Reacti rakenduse loomiseks Vite'i.

Pärast ülaltoodud käsu käivitamist vastate oma Reacti rakenduse konfigureerimiseks viipadele. Looge rakendus React, andke sellele nimi radix-ui-rakendusja veenduge, et see kasutab TypeScripti keelt.

Järgmisena sisestage oma uue rakenduse juurkataloog ja installige vajalikud sõltuvused:

cd radix-ui-app
npm install

Teie Reacti rakendus on nüüd valmis.

Radixi kasutajaliidese installimine

Radix UI on suurepärane komponentide raamatukoguy, mida saate kasutada juurdepääsetavate Reacti rakenduste loomiseks. See võimaldab teil installida iga komponendi eraldi eraldi paketina. Selle installimise käsus määrate komponendi nime.

Näiteks:

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

See installib Radixi kasutajaliidese rippmenüü komponendi. Radix UI-l on palju muid komponente, mida saate vastavalt oma vajadustele installida.

Rakenduse loomine Radixi kasutajaliidese abil

Nüüd, kui olete Radixi kasutajaliidese rippmenüü komponendi installinud, saate Radixi kasutajaliidese abil luua lihtsa rippmenüü. Selleks importige esmalt vajalikud komponendid Radixi kasutajaliidese rippmenüü komponendist.

Siin on näide, mis näitab, kuidas saate Radixi abil luua lihtsa rippmenüü:

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





Click Me</button>
 </DropdownMenu.Trigger>




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


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

See kood impordib kõik komponendid failist @radix-ui/react-rippmenüü pakend as Rippmenüü. Seejärel kasutab see neid komponente rippmenüü loomiseks div element.

The Rippmenüü. Juur on rippmenüü juurkomponent. Peaksite sellesse pesastama kõik muud rippmenüü komponendid. Saate määrata rippmenüü päästiku, kasutades Rippmenüü. Päästik komponent. Sel juhul on päästik a nuppu element tekstiga "Click Me". Kui klõpsate nupul, ilmub rippmenüü.

Koos Rippmenüü. Sisu komponent, saate määrata rippmenüü sisu ja Rippmenüü. Grupp komponent esindab seotud menüüüksuste rühma. Te kasutate Rippmenüü. Üksus komponent rippmenüü üksikute üksuste määratlemiseks.

Selles näites on kaks rippmenüüd. Rühmakomponendid, millest igaüks sisaldab ühte rippmenüüd. Kauba komponent. Kõik need komponendid on pakitud rippmenüüsse. Sisu komponent.

Ülaltoodud koodiploki renderdamine muudab teie liidese selliseks:

Nagu näete, puudub tulemustel igasugune stiil, seega peate järgmisena lisama oma CSS-i.

Radixi kasutajaliidese komponentide kujundamine

Üks Radixi kasutajaliidese eeliseid on see, et see ei kehtesta teie komponentidele mingit stiili. See tähendab, et teil on täielik kontroll oma komponendi stiili üle. Saate oma komponente stiilida, kasutades CSS-in-JS-i teeke, nagu stiilitud komponendid ja emotsioonid, või kasutada traditsioonilist CSS-i.

Siin on näide Radixi kasutajaliidese komponentide stiili muutmisest traditsioonilise CSS-i abil.

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




"trigger">
"button">Click Me</button>
 </DropdownMenu.Trigger>
"content">

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

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

exportdefault App;

See näide lisab klassi nimi toetada nuppu element, Rippmenüü. Päästik, Rippmenüü. Sisu, ja Rippmenüü. Üksus komponendid.

Pärast klasside rakendamist saate CSS-i abil komponente stiilida:

.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;
}

Ülaltoodud koodiplokk rakendab komponentidele atraktiivsema välimuse saamiseks määratletud stiile:

Radix UI pakub ka reaktsiooniikoone, nii et saate oma rakendusele ikoone lisada, et seda veelgi kaunistada. Alustage Radixi kasutajaliidese ikoonide paketi installimisega:

npm install @radix-ui/react-icons

Pärast paketi installimist saate mõnda selle ikoone oma rakenduses kasutada.

Näiteks:

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




"trigger">
"button">

 </button>
 </DropdownMenu.Trigger>
"content">

"item">
New Tab</p>

 </DropdownMenu.Item>
 </DropdownMenu.Group>

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

exportdefault App;

See näide lisab Hamburgeri menüüikoon ja PlusIcon rakendusele. Esimene on nupukomponendi sees ja viimane suurendab esimest Rippmenüü. Üksus komponent.

Järgmisena värskendage .element klass oma CSS-failis:

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

Nüüd peaks teie rakendus välja nägema selline.

Kvaliteetse reageerimisrakenduse loomine Radixi kasutajaliidese abil

Radix UI on võimas tööriist Reacti rakenduste loomiseks. See pakub madala taseme, stiilita, juurdepääsetavate komponentide komplekti, mida saate kasutada oma rakenduse ehitusplokkidena.

Radixi kasutajaliidest kasutades saate keskenduda oma rakenduse funktsionaalsusele, muretsemata kasutajaliidese keerukuse pärast. Olenemata sellest, kas olete kogenud arendaja või algaja, Radix UI aitab teil luua kvaliteetseid ja kasutajasõbralikke veebiliideseid.