Vytvorenie aplikácie React pomocou používateľského rozhrania Radix

Radix UI je nízkoúrovňová, neštylizovaná, prístupná knižnica komponentov na vytváranie vysokokvalitných a užívateľsky prívetivých webových rozhraní. Môžete ho použiť spolu s Reactom na vytváranie aplikácií s plnohodnotnými komponentmi, ktoré si môžete jednoducho upraviť podľa svojho dizajnu.

Čo je to Radix UI?

Radix UI je kolekcia primitívnych, neštýlových, prístupných UI komponentov pre aplikácie React. Poskytuje stavebné bloky, ktoré potrebujete na vytvorenie systému návrhu.

Hlavným cieľom Radix UI je poskytnúť sadu nízkoúrovňových pomocných komponentov, ktoré vám pomôžu vytvoriť opakovane použiteľné komponenty. Komponenty sa štandardne dodávajú bez štýlu, čo znamená, že máte úplnú kontrolu nad ich štýlom.

Nastavenie aplikácie React

Ak chcete používať Radix UI, musíte si nastaviť aplikáciu React. Na to potrebujete mať Node.js a npm, správca balíkov Node, nainštalovaný na vašom počítači.

S týmito nainštalovanými môžete vytvoriť novú aplikáciu React pomocou tohto príkazu terminálu:

npm init vite

Tento príkaz inicializuje Vite. Vite je rýchlo zostaviteľný nástroj, ktorý vám umožní rýchlo vytvárať moderné webové aplikácie. Môžeš použite Vite na vytvorenie aplikácie React.

Po spustení vyššie uvedeného príkazu odpoviete na sériu výziev na konfiguráciu vašej aplikácie React. Vytvorte aplikáciu React, pomenujte ju aplikácia radix-uia uistite sa, že používa jazyk TypeScript.

Ďalej zadajte koreňový adresár novej aplikácie a nainštalujte potrebné závislosti:

cd radix-ui-app
npm install

Vaša aplikácia React je teraz pripravená.

Inštalácia Radix UI

Radix UI je skvelá knižnica komponentovy, ktoré môžete použiť na vytváranie prístupných aplikácií React. Umožňuje vám nainštalovať každý komponent samostatne ako samostatný balík. V príkaze na inštaláciu zadáte názov komponentu.

Napríklad:

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

Týmto sa nainštaluje komponent rozbaľovacej ponuky Radix UI. Radix UI má mnoho ďalších komponentov, ktoré môžete nainštalovať v závislosti od vašich potrieb.

Vytvorenie vašej aplikácie pomocou Radix UI

Teraz, keď ste nainštalovali komponent rozbaľovacej ponuky z používateľského rozhrania Radix, môžete pomocou používateľského rozhrania Radix vytvoriť jednoduchú rozbaľovaciu ponuku. Aby ste to urobili, najprv naimportujte potrebné komponenty z komponentu rozbaľovacej ponuky Radix UI.

Tu je príklad, ktorý ukazuje, ako môžete vytvoriť jednoduchú rozbaľovaciu ponuku pomocou Radix:

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;

Tento kód importuje všetky komponenty z @radix-ui/react-dropdown-menu balík ako Rozbaľovacia ponuka. Potom použije tieto komponenty na vytvorenie rozbaľovacej ponuky vo vnútri div element.

The Rozbaľovacia ponuka. Root je koreňová súčasť rozbaľovacej ponuky. Všetky ostatné komponenty rozbaľovacej ponuky by ste mali vnoriť do tejto. Môžete definovať spúšťač pre rozbaľovaciu ponuku pomocou Rozbaľovacia ponuka. Spúšťač komponent. V tomto prípade je spúšťačom a tlačidlo prvok s textom „Klikni na mňa“. Po kliknutí na tlačidlo sa zobrazí rozbaľovacia ponuka.

S Rozbaľovacia ponuka. Obsah komponent, definujete obsah rozbaľovacej ponuky a Rozbaľovacia ponuka. Skupina komponent predstavuje skupinu súvisiacich položiek menu. Používate Rozbaľovacia ponuka. Položka komponent na definovanie jednotlivých položiek roletového menu.

V tomto príklade sú dve rozbaľovacie ponuky. Skupinové komponenty, z ktorých každý obsahuje jednu rozbaľovaciu ponuku. Komponent položky. Všetky tieto komponenty sú zabalené v rozbaľovacej ponuke. Obsahová zložka.

Vykreslenie bloku kódu vyššie upraví vaše rozhranie tak, aby vyzeralo takto:

Ako vidíte, výsledkom chýba akýkoľvek štýl, takže budete musieť pridať svoj vlastný CSS.

Úprava štýlu komponentov používateľského rozhrania Radix

Jednou z výhod používateľského rozhrania Radix je, že vašim komponentom nevnucuje žiadny štýl. To znamená, že máte úplnú kontrolu nad štýlom vášho komponentu. Komponenty môžete upravovať pomocou knižníc CSS-in-JS, ako sú napríklad komponenty so štýlom a emócie, alebo môžete použiť tradičné CSS.

Tu je príklad, ako štýlovať komponenty používateľského rozhrania Radix pomocou tradičného CSS:

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;

Tento príklad pridáva className podpera k tlačidlo prvok, Rozbaľovacia ponuka. Spúšťač, Rozbaľovacia ponuka. Obsah, a Rozbaľovacia ponuka. Položka komponentov.

Po aplikovaní tried potom môžete štýlovať komponenty pomocou 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;
}

Vyššie uvedený blok kódu použije definované štýly na komponenty pre atraktívnejší vzhľad:

Radix UI tiež ponúka React Icons, takže do aplikácie môžete pridať ikony, aby ste ju ešte viac skrášlili. Začnite inštaláciou balíka ikon používateľského rozhrania Radix:

npm install @radix-ui/react-icons

Po nainštalovaní balíka môžete použiť niektoré jeho ikony vo svojej aplikácii.

Napríklad:

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;

Tento príklad pridáva Ikona ponuky Hamburger a PlusIcon do aplikácie. Prvý je vo vnútri komponentu tlačidla a druhý dopĺňa prvý Rozbaľovacia ponuka. Položka komponent.

Ďalej aktualizujte .položka triedy vo vašom súbore CSS:

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

Teraz by vaša aplikácia mala vyzerať takto.

Vybudujte kvalitnú aplikáciu React pomocou používateľského rozhrania Radix

Radix UI je výkonný nástroj na vytváranie aplikácií React. Poskytuje súpravu nízkoúrovňových, neštýlových, prístupných komponentov, ktoré môžete použiť ako stavebné bloky pre vašu aplikáciu.

Pomocou používateľského rozhrania Radix sa môžete zamerať na funkčnosť svojej aplikácie bez obáv zo zložitosti používateľského rozhrania. Či už ste skúsený vývojár alebo začiatočník, Radix UI vám môže pomôcť vytvoriť vysokokvalitné a užívateľsky prívetivé webové rozhrania.