Tämä kirjasto tarjoaa sinulle puhtaita, laajennettavia komponentteja, joita voit käyttää sovelluksessasi ja kehittää edelleen.

Radix UI on matalan tason, tyylitön, helppopääsyinen komponenttikirjasto korkealaatuisten, käyttäjäystävällisten verkkokäyttöliittymien rakentamiseen. Voit käyttää sitä yhdessä Reactin kanssa luodaksesi sovelluksia, joissa on monipuoliset komponentit, joita voit helposti muotoilla suunnitteluasi sopivaksi.

Mikä on Radix UI?

Radix UI on kokoelma primitiivisiä, tyylittelemättömiä, helppokäyttöisiä käyttöliittymäkomponentteja React-sovelluksille. Se tarjoaa rakennuspalikat, joita tarvitset suunnittelujärjestelmän luomiseen.

Radix UI: n päätavoite on tarjota joukko matalan tason apukomponentteja, jotka auttavat sinua rakentamaan uudelleenkäytettäviä komponentteja. Komponentit tulevat oletusarvoisesti tyylittämättöminä, joten voit hallita niiden tyyliä täysin.

React-sovelluksen määrittäminen

Sinun on määritettävä React-sovellus käyttääksesi Radix UI: ta. Tätä varten sinulla on oltava Node.js ja npm, Node-pakettien hallinta, asennettu tietokoneellesi.

instagram viewer

Kun nämä on asennettu, voit luoda uuden React-sovelluksen tällä päätekomennolla:

npm init vite

Tämä komento alustaa Viten. Vite on nopeasti rakennettava työkalu, jonka avulla voit luoda nykyaikaisia ​​verkkosovelluksia nopeasti. Sinä pystyt käytä Viteä React-sovelluksen luomiseen.

Kun olet suorittanut yllä olevan komennon, vastaat sarjaan kehotteita määrittääksesi React-sovelluksesi. Luo React-sovellus, anna sille nimi radix-ui-sovellus, ja varmista, että se käyttää TypeScript-kieltä.

Kirjoita seuraavaksi uuden sovelluksesi juurihakemisto ja asenna tarvittavat riippuvuudet:

cd radix-ui-app
npm install

React-sovelluksesi on nyt valmis.

Radix UI: n asentaminen

Radix UI on loistava komponenttikirjastoy, jonka avulla voit luoda helppokäyttöisiä React-sovelluksia. Sen avulla voit asentaa jokaisen komponentin erikseen erillisenä pakettina. Määrität komponentin nimen asennuskomennossasi.

Esimerkiksi:

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

Tämä asentaa Radix UI -pudotusvalikkokomponentin. Radix UI sisältää monia muita komponentteja, jotka voit asentaa tarpeidesi mukaan.

Sovelluksen rakentaminen Radix-käyttöliittymällä

Nyt kun olet asentanut avattavan valikon komponentin Radix UI: sta, voit rakentaa yksinkertaisen avattavan valikon Radix UI: n avulla. Voit tehdä tämän tuomalla ensin tarvittavat komponentit Radix UI -pudotusvalikosta.

Tässä on esimerkki siitä, kuinka voit luoda yksinkertaisen avattavan valikon Radixin avulla:

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;

Tämä koodi tuo kaikki komponentit tiedostosta @radix-ui/react-pudotusvalikko paketti as Pudotusvalikosta. Sitten se käyttää näitä komponentteja avattavan valikon luomiseen div elementti.

The Pudotusvalikosta. Juuri on avattavan valikon juurikomponentti. Sinun tulee sijoittaa kaikki muut avattavan valikon komponentit tähän. Voit määrittää pudotusvalikon laukaisun käyttämällä Pudotusvalikosta. Laukaista komponentti. Tässä tapauksessa laukaisin on a -painiketta elementti "Click Me" -tekstillä. Kun napsautat painiketta, avattava valikko tulee näkyviin.

Kanssa Pudotusvalikosta. Sisältö komponentti, määrität pudotusvalikon sisällön ja Pudotusvalikosta. Ryhmä komponentti edustaa ryhmää toisiinsa liittyviä valikon kohtia. Käytät Pudotusvalikosta. Tuote -komponentti, joka määrittää pudotusvalikon yksittäiset kohteet.

Tässä esimerkissä on kaksi pudotusvalikkoa. Ryhmäkomponentit, joista jokainen sisältää yhden pudotusvalikon. Kohteen komponentti. Nämä komponentit on kääritty pudotusvalikkoon. Sisältökomponentti.

Yllä olevan koodilohkon renderöiminen muuttaa käyttöliittymäsi tältä:

Kuten näet, tuloksista puuttuu tyyli, joten sinun on lisättävä seuraavaksi oma CSS.

Radix-käyttöliittymän komponenttien muotoilu

Yksi Radix UI: n eduista on, että se ei aseta komponenteillesi mitään tyyliä. Tämä tarkoittaa, että voit täysin hallita komponenttisi tyyliä. Voit muotoilla komponenttejasi käyttämällä CSS-in-JS-kirjastoja, kuten tyyliteltyjä komponentteja ja tunteita, tai voit käyttää perinteistä CSS: ää.

Tässä on esimerkki Radix UI -komponenttien tyylistä perinteisellä CSS: llä:

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





"trigger">


exportdefault App;

Tämä esimerkki lisää luokan nimi tuki siihen -painiketta elementti, Pudotusvalikosta. Laukaista, Pudotusvalikosta. Sisältö, ja Pudotusvalikosta. Tuote komponentit.

Luokkien käyttöönoton jälkeen voit muotoilla komponentit CSS: n avulla:

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

Yllä oleva koodilohko käyttää määritettyjä tyylejä komponentteihin houkuttelevamman ulkonäön saamiseksi:

Radix UI tarjoaa myös React Icons -kuvakkeita, joten voit lisätä sovellukseesi kuvakkeita kaunistaaksesi sitä. Aloita asentamalla Radix UI -kuvakepaketti:

npm install @radix-ui/react-icons

Paketin asennuksen jälkeen voit käyttää joitain sen kuvakkeita sovelluksessasi.

Esimerkiksi:

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;

Tämä esimerkki lisää HamburgerMenuIcon ja PlusIcon sovellukseen. Edellinen on painikekomponentin sisällä, ja jälkimmäinen täydentää ensimmäistä Pudota alas. Tuote komponentti.

Päivitä seuraavaksi .tuote luokka CSS-tiedostossasi:

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

Nyt sovelluksesi pitäisi näyttää tältä.

Luo laadukas React-sovellus Radix-käyttöliittymän avulla

Radix UI on tehokas työkalu React-sovellusten rakentamiseen. Se tarjoaa joukon matalan tason, tyylittämättömiä, helppokäyttöisiä komponentteja, joita voit käyttää sovelluksesi rakennuspalikoina.

Käyttämällä Radix UI: ta voit keskittyä sovelluksesi toimivuuteen murehtimatta taustalla olevista käyttöliittymän monimutkaisuudesta. Olitpa kokenut kehittäjä tai aloittelija, Radix UI voi auttaa sinua rakentamaan korkealaatuisia, käyttäjäystävällisiä verkkokäyttöliittymiä.