Ova vam biblioteka daje čiste, proširive komponente koje možete koristiti u svojoj aplikaciji i dalje razvijati.

Radix UI je niska razina, nestilizirana, dostupna biblioteka komponenti za izgradnju visokokvalitetnih web sučelja prilagođenih korisniku. Možete ga koristiti zajedno s Reactom za izradu aplikacija s potpunim komponentama koje možete jednostavno stilizirati kako bi odgovarale vašem dizajnu.

Što je Radix UI?

Radix UI zbirka je primitivnih, nestiliziranih, pristupačnih komponenti korisničkog sučelja za React aplikacije. Pruža građevne blokove koji su vam potrebni za stvaranje vašeg sustava dizajna.

Glavni cilj Radix UI je pružiti skup uslužnih komponenti niske razine koje vam pomažu izgraditi komponente za višekratnu upotrebu. Komponente prema zadanim postavkama dolaze bez stila, što znači da imate potpunu kontrolu nad njihovim stilom.

Postavljanje vaše aplikacije React

Morate postaviti React aplikaciju da biste koristili Radix UI. Da biste to učinili, trebate imati Node.js i npm, upravitelj paketa Node, instaliran na vašem računalu.

S ovim instaliranim, možete stvoriti novu React aplikaciju ovom terminalskom naredbom:

npm init vite

Ova naredba će pokrenuti Vite. Vite je alat za brzu izradu koji vam omogućuje brzu izradu modernih web aplikacija. Možeš koristite Vite za izradu svoje React aplikacije.

Nakon pokretanja gornje naredbe, odgovorit ćete na niz upita za konfiguriranje vaše React aplikacije. Napravite React aplikaciju, dajte joj naziv radix-ui-aplikacijai osigurajte da koristi jezik TypeScript.

Zatim unesite korijenski direktorij svoje nove aplikacije i instalirajte potrebne ovisnosti:

cd radix-ui-app
npm install

Vaša React aplikacija je sada spremna.

Instaliranje Radix UI

Radix UI je odlična biblioteka komponentiy koje možete koristiti za stvaranje pristupačnih React aplikacija. Omogućuje vam instalaciju svake komponente zasebno kao zasebnog paketa. Navest ćete naziv komponente u svojoj naredbi da biste je instalirali.

Na primjer:

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

Ovo će instalirati komponentu padajućeg izbornika Radix UI. Radix UI ima mnoge druge komponente koje možete instalirati ovisno o vašim potrebama.

Izrada vaše aplikacije pomoću Radix UI

Sada kada ste instalirali komponentu padajućeg izbornika iz Radix UI, možete napraviti jednostavan padajući izbornik koristeći Radix UI. Da biste to učinili, prvo ćete uvesti potrebne komponente iz komponente padajućeg izbornika Radix UI.

Evo primjera koji pokazuje kako možete napraviti jednostavan padajući izbornik koristeći 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;

Ovaj kod uvozi sve komponente iz @radix-ui/react-dropdown-menu pakirati kao Padajući izbornik. Zatim koristi te komponente za stvaranje padajućeg izbornika unutar div element.

The Padajući izbornik. Korijen je korijenska komponenta padajućeg izbornika. Trebali biste ugniježditi sve druge komponente padajućeg izbornika unutar ovog. Možete definirati okidač za padajući izbornik pomoću Padajući izbornik. Okidač komponenta. U ovom slučaju, okidač je a dugme element s tekstom "Klikni me". Kada kliknete na gumb, pojavit će se padajući izbornik.

s Padajući izbornik. Sadržaj komponentu, definirate sadržaj padajućeg izbornika i Padajući izbornik. Skupina komponenta predstavlja grupu povezanih stavki izbornika. Vi koristite Padajući izbornik. Artikal komponenta za definiranje pojedinačnih stavki padajućeg izbornika.

U ovom primjeru postoje dva padajuća izbornika. Grupirajte komponente od kojih svaka sadrži jedan padajući izbornik. Komponenta predmeta. Sve ove komponente su omotane u padajući izbornik. Sadržajna komponenta.

Renderiranje gornjeg bloka koda izmijenit će vaše sučelje da izgleda ovako:

Kao što vidite, rezultatima nedostaje bilo kakav stil, pa ćete zatim morati dodati vlastiti CSS.

Stilizirajte svoje Radix UI komponente

Jedna od prednosti Radix UI je ta što ne nameće nikakav stil vašim komponentama. To znači da imate potpunu kontrolu nad stilom svoje komponente. Svoje komponente možete stilizirati pomoću biblioteka CSS-in-JS kao što su styled-components i emotion ili možete koristiti tradicionalni CSS.

Evo primjera kako stilizirati svoje Radix UI komponente koristeći tradicionalni CSS:

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





"trigger">


exportdefault App;

Ovaj primjer dodaje naziv klase oslonac za dugme element, Padajući izbornik. Okidač, the Padajući izbornik. Sadržaj, i Padajući izbornik. Artikal komponente.

Nakon primjene klasa, možete oblikovati komponente koristeći 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;
}

Gornji blok koda primijenit će definirane stilove na komponente za privlačniji izgled:

Radix UI također nudi React Icons, tako da možete dodati ikone svojoj aplikaciji da je još više uljepšate. Započnite instaliranjem paketa Radix UI ikona:

npm install @radix-ui/react-icons

Nakon instaliranja paketa, možete koristiti neke od njegovih ikona u svojoj aplikaciji.

Na primjer:

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;

Ovaj primjer dodaje Ikona izbornika hamburgera i PlusIcon na aplikaciju. Prvi je unutar komponente gumba, a drugi povećava prvi Padajući izbornik. Artikal komponenta.

Zatim ažurirajte .artikal klasa u vašoj CSS datoteci:

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

Sada bi vaša aplikacija trebala izgledati ovako.

Izradite kvalitetnu React aplikaciju pomoću Radix korisničkog sučelja

Radix UI moćan je alat za izradu React aplikacija. Pruža skup pristupačnih komponenti niske razine, nestiliziranih, koje možete koristiti kao građevne blokove za svoju aplikaciju.

Korištenjem Radix korisničkog sučelja možete se usredotočiti na funkcionalnost svoje aplikacije bez brige o temeljnim složenostima korisničkog sučelja. Bilo da ste iskusni programer ili početnik, Radix UI može vam pomoći da izgradite visokokvalitetna web sučelja prilagođena korisniku.