Izdelava aplikacije React z uporabniškim vmesnikom Radix

Radix UI je nizkonivojska, neoblikovana, dostopna knjižnica komponent za gradnjo visokokakovostnih, uporabniku prijaznih spletnih vmesnikov. Uporabite ga lahko skupaj z Reactom za ustvarjanje aplikacij s komponentami z vsemi funkcijami, ki jih lahko preprosto oblikujete tako, da ustrezajo vašemu dizajnu.

Kaj je Radix UI?

Radix UI je zbirka primitivnih, neslogovnih, dostopnih komponent uporabniškega vmesnika za aplikacije React. Zagotavlja gradnike, ki jih potrebujete za ustvarjanje vašega oblikovalskega sistema.

Glavni cilj uporabniškega vmesnika Radix je zagotoviti nabor nizkonivojskih pomožnih komponent, ki vam pomagajo zgraditi komponente za večkratno uporabo. Komponente privzeto niso oblikovane, kar pomeni, da imate popoln nadzor nad njihovim slogom.

Nastavitev vaše aplikacije React

Za uporabo uporabniškega vmesnika Radix morate nastaviti aplikacijo React. Če želite to narediti, morate imeti Node.js in

npm, upravitelj paketov Node, nameščen na vašem računalniku.

Ko so ti nameščeni, lahko ustvarite novo aplikacijo React s tem terminalskim ukazom:

npm init vite

Ta ukaz bo inicializiral Vite. Vite je orodje za hitro izdelavo, ki vam omogoča hitro ustvarjanje sodobnih spletnih aplikacij. Ti lahko uporabite Vite za ustvarjanje vaše aplikacije React.

Ko zaženete zgornji ukaz, boste odgovorili na vrsto pozivov za konfiguracijo vaše aplikacije React. Ustvarite aplikacijo React, poimenujte jo radix-ui-aplikacijain zagotovite, da uporablja jezik TypeScript.

Nato vnesite korenski imenik svoje nove aplikacije in namestite potrebne odvisnosti:

cd radix-ui-app
npm install

Vaša aplikacija React je zdaj pripravljena.

Namestitev uporabniškega vmesnika Radix

Uporabniški vmesnik Radix je odlična knjižnica komponenty, ki jih lahko uporabite za ustvarjanje dostopnih aplikacij React. Omogoča vam namestitev vsake komponente posebej kot ločen paket. V ukazu boste določili ime komponente, da jo namestite.

Na primer:

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

S tem boste namestili komponento spustnega menija uporabniškega vmesnika Radix. Radix UI ima veliko drugih komponent, ki jih lahko namestite glede na vaše potrebe.

Gradnja vaše aplikacije z uporabniškim vmesnikom Radix

Zdaj, ko ste namestili komponento spustnega menija iz uporabniškega vmesnika Radix, lahko sestavite preprost spustni meni z uporabniškim vmesnikom Radix. Če želite to narediti, morate najprej uvoziti potrebne komponente iz komponente spustnega menija uporabniškega vmesnika Radix.

Tukaj je primer, ki prikazuje, kako lahko s pomočjo Radixa sestavite preprost spustni meni:

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;

Ta koda uvozi vse komponente iz @radix-ui/react-dropdown-menu paket kot Spustni meni. Nato uporabi te komponente za ustvarjanje spustnega menija znotraj div element.

The Spustni meni. Root je korenska komponenta spustnega menija. Vse druge komponente spustnega menija bi morali ugnezditi znotraj tega. Sprožilec za spustni meni lahko določite z uporabo Spustni meni. Sprožilec komponento. V tem primeru je sprožilec a gumb element z besedilom "Klikni me". Ko kliknete na gumb, se prikaže spustni meni.

z Spustni meni. Vsebina komponento, določite vsebino spustnega menija in Spustni meni. skupina komponenta predstavlja skupino povezanih elementov menija. Uporabljate Spustni meni. Postavka komponento za določanje posameznih elementov spustnega menija.

V tem primeru sta dva spustna menija. Združite komponente, od katerih vsaka vsebuje en spustni meni. Sestavni del predmeta. Vse te komponente so zavite v spustni meni. Vsebinska komponenta.

Upodabljanje zgornjega bloka kode bo spremenilo vaš vmesnik takole:

Kot lahko vidite, rezultatom manjka stil, zato boste morali dodati svoj CSS.

Oblikovanje vaših komponent uporabniškega vmesnika Radix

Ena od prednosti uporabniškega vmesnika Radix UI je, da vašim komponentam ne vsiljuje stilov. To pomeni, da imate popoln nadzor nad slogom svoje komponente. Svoje komponente lahko oblikujete s knjižnicami CSS-in-JS, kot sta styled-components in emotion, ali pa uporabite tradicionalni CSS.

Tukaj je primer, kako oblikovati komponente uporabniškega vmesnika Radix z uporabo tradicionalnega 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;

Ta primer dodaja className prop na gumb element, the Spustni meni. Sprožilec, the Spustni meni. Vsebina, in Spustni meni. Postavka komponente.

Po uporabi razredov lahko nato oblikujete komponente z uporabo 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;
}

Zgornji blok kode bo za komponente uporabil definirane sloge za privlačnejši videz:

Uporabniški vmesnik Radix ponuja tudi ikone React, tako da lahko svoji aplikaciji dodate ikone in jo še dodatno polepšate. Začnite z namestitvijo paketa ikon Radix UI:

npm install @radix-ui/react-icons

Po namestitvi paketa lahko nekatere njegove ikone uporabite v svoji aplikaciji.

Na primer:

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;

Ta primer dodaja Hamburger MenuIcon in PlusIcon na aplikacijo. Prvi je znotraj komponente gumba, drugi pa dopolnjuje prvega Spustni meni. Postavka komponento.

Nato posodobite .predmet razred v vaši datoteki CSS:

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

Zdaj bi morala vaša aplikacija izgledati takole.

Izdelajte kakovostno aplikacijo React z uporabniškim vmesnikom Radix

Radix UI je zmogljivo orodje za izdelavo aplikacij React. Zagotavlja nabor nizkonivojskih, neoblikovanih, dostopnih komponent, ki jih lahko uporabite kot gradnike svoje aplikacije.

Z uporabo uporabniškega vmesnika Radix se lahko osredotočite na funkcionalnost svoje aplikacije, ne da bi vas skrbelo zapletenost uporabniškega vmesnika. Ne glede na to, ali ste izkušen razvijalec ali začetnik, vam lahko uporabniški vmesnik Radix pomaga zgraditi visokokakovostne, uporabniku prijazne spletne vmesnike.