Šī bibliotēka nodrošina tīrus, paplašināmus komponentus, kurus varat izmantot savā lietotnē un attīstīt tālāk.

Radix UI ir zema līmeņa, bez stila, pieejama komponentu bibliotēka augstas kvalitātes, lietotājam draudzīgu tīmekļa saskarņu izveidei. Varat to izmantot kopā ar React, lai izveidotu lietotnes ar pilnvērtīgiem komponentiem, kuras varat viegli veidot atbilstoši savam dizainam.

Kas ir Radix UI?

Radix UI ir primitīvu, bez stila, pieejamu lietotāja saskarnes komponentu kolekcija React lietojumprogrammām. Tas nodrošina konstrukcijas sistēmas izveidei nepieciešamos pamatelementus.

Radix UI galvenais mērķis ir nodrošināt zema līmeņa utilītas komponentu kopu, kas palīdz izveidot atkārtoti lietojamus komponentus. Komponenti pēc noklusējuma tiek atveidoti, kas nozīmē, ka jums ir pilnīga kontrole pār to stilu.

React lietojumprogrammas iestatīšana

Lai izmantotu Radix UI, ir jāiestata lietojumprogramma React. Lai to izdarītu, jums ir jābūt Node.js un npm, mezgla pakotņu pārvaldnieks, instalēta jūsu datorā.

instagram viewer

Kad tie ir instalēti, varat izveidot jaunu React lietojumprogrammu ar šo termināļa komandu:

npm init vite

Šī komanda inicializēs Vite. Vite ir ātras izveides rīks, kas ļauj ātri izveidot modernas tīmekļa lietojumprogrammas. Jūs varat izmantojiet Vite, lai izveidotu savu React lietojumprogrammu.

Pēc iepriekš minētās komandas palaišanas jūs atbildēsit uz virkni uzvedņu, lai konfigurētu savu React lietojumprogrammu. Izveidojiet React lietojumprogrammu, nosauciet to radix-ui-app, un pārliecinieties, ka tā izmanto TypeScript valodu.

Pēc tam ievadiet jaunās lietotnes saknes direktoriju un instalējiet nepieciešamās atkarības:

cd radix-ui-app
npm install

Jūsu React pieteikums tagad ir gatavs.

Radix UI instalēšana

Radix UI ir lieliska komponentu bibliotēkay, ko varat izmantot, lai izveidotu pieejamas React lietojumprogrammas. Tas ļauj instalēt katru komponentu atsevišķi kā atsevišķu pakotni. Komponenta nosaukumu norādīsit savā komandā, lai to instalētu.

Piemēram:

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

Tādējādi tiks instalēts Radix UI nolaižamās izvēlnes komponents. Radix UI ir daudz citu komponentu, kurus varat instalēt atkarībā no jūsu vajadzībām.

Lietojumprogrammas izveide, izmantojot Radix UI

Tagad, kad esat instalējis nolaižamās izvēlnes komponentu no Radix UI, varat izveidot vienkāršu nolaižamo izvēlni, izmantojot Radix UI. Lai to izdarītu, vispirms no Radix UI nolaižamās izvēlnes komponenta importēsiet nepieciešamos komponentus.

Šeit ir piemērs, kas parāda, kā varat izveidot vienkāršu nolaižamo izvēlni, izmantojot 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;

Šis kods importē visus komponentus no @radix-ui/react-nolaižamā izvēlne iepakojums kā Nolaižamā izvēlne. Pēc tam tas izmanto šos komponentus, lai iekšā izveidotu nolaižamo izvēlni div elements.

The Nolaižamā izvēlne. Sakne ir nolaižamās izvēlnes saknes sastāvdaļa. Šajā sadaļā ir jāievieto visi pārējie nolaižamās izvēlnes komponenti. Varat definēt nolaižamās izvēlnes aktivizētāju, izmantojot Nolaižamā izvēlne. Sprūda komponents. Šajā gadījumā sprūda ir a pogu elements ar tekstu "Noklikšķiniet uz mani". Noklikšķinot uz pogas, parādīsies nolaižamā izvēlne.

Ar Nolaižamā izvēlne. Saturs komponents, jūs definējat nolaižamās izvēlnes saturu un Nolaižamā izvēlne. Grupa komponents apzīmē saistītu izvēlnes vienumu grupu. Jūs izmantojat Nolaižamā izvēlne. Lieta komponents, lai definētu atsevišķus nolaižamās izvēlnes vienumus.

Šajā piemērā ir divas nolaižamās izvēlnes. Grupas komponenti, no kuriem katrs satur vienu nolaižamo izvēlni. Preces sastāvdaļa. Visi šie komponenti ir iesaiņoti nolaižamajā izvēlnē. Satura sastāvdaļa.

Atveidojot iepriekš minēto koda bloku, interfeiss tiks pārveidots, lai tas izskatītos šādi:

Kā redzat, rezultātiem nav nekāda stila, tāpēc pēc tam jums būs jāpievieno savs CSS.

Radix UI komponentu veidošana

Viena no Radix UI priekšrocībām ir tā, ka tā neuzliek jūsu komponentiem nekādu stilu. Tas nozīmē, ka jums ir pilnīga kontrole pār sava komponenta stilu. Varat veidot savus komponentus, izmantojot CSS-in-JS bibliotēkas, piemēram, stilizētus komponentus un emocijas, vai arī varat izmantot tradicionālo CSS.

Šeit ir piemērs, kā veidot Radix UI komponentus, izmantojot tradicionālo CSS:

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





"trigger">


exportdefault App;

Šis piemērs pievieno klasesNosaukums balsts uz pogu elements, Nolaižamā izvēlne. Sprūda, Nolaižamā izvēlne. Saturs, un Nolaižamā izvēlne. Lieta sastāvdaļas.

Pēc klašu pielietošanas varat veidot komponentus, izmantojot 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;
}

Iepriekš minētais koda bloks komponentiem piemēros definētos stilus, lai iegūtu pievilcīgāku izskatu:

Radix UI piedāvā arī React Icons, lai jūs varētu pievienot ikonas savai lietojumprogrammai, lai to vēl vairāk izdaiļotu. Sāciet, instalējot Radix UI ikonu pakotni:

npm install @radix-ui/react-icons

Pēc pakotnes instalēšanas savā lietojumprogrammā varat izmantot dažas tās ikonas.

Piemēram:

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;

Šis piemērs pievieno HamburgerMenuIcon un PlusIcon uz pieteikumu. Pirmais atrodas pogas komponenta iekšpusē, bet pēdējais papildina pirmo Nomest lejā. Lieta komponents.

Pēc tam atjauniniet .lieta klase jūsu CSS failā:

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

Tagad jūsu lietojumprogrammai vajadzētu izskatīties šādi.

Veidojiet kvalitatīvu React lietojumprogrammu, izmantojot Radix UI

Radix UI ir spēcīgs rīks React lietojumprogrammu veidošanai. Tas nodrošina zema līmeņa, nestilētu, pieejamu komponentu kopu, ko varat izmantot kā savas lietojumprogrammas pamatelementus.

Izmantojot Radix UI, varat koncentrēties uz savas lietojumprogrammas funkcionalitāti, neuztraucoties par pamata lietotāja saskarnes sarežģītību. Neatkarīgi no tā, vai esat pieredzējis izstrādātājs vai iesācējs, Radix UI var palīdzēt jums izveidot augstas kvalitātes, lietotājam draudzīgas tīmekļa saskarnes.