Ez a könyvtár tiszta, bővíthető összetevőket kínál, amelyeket az alkalmazásban használhat, és továbbfejleszthet.

A Radix UI egy alacsony szintű, stílustalan, hozzáférhető komponenskönyvtár kiváló minőségű, felhasználóbarát webes felületek készítéséhez. Használhatja a React-tal együtt, hogy olyan teljes funkcionalitású összetevőket tartalmazó alkalmazásokat készítsen, amelyeket könnyedén stílusához igazíthat.

Mi az a Radix UI?

A Radix UI primitív, stílustalan, elérhető felhasználói felület-összetevők gyűjteménye a React alkalmazásokhoz. Ez biztosítja a tervezési rendszer létrehozásához szükséges építőelemeket.

A Radix UI fő célja, hogy alacsony szintű segédprogram-összetevőket biztosítson, amelyek segítik az újrafelhasználható összetevők létrehozását. Az összetevők alapértelmezés szerint stílustalanok, ami azt jelenti, hogy teljes mértékben Ön irányíthatja a stílusukat.

A React alkalmazás beállítása

A Radix UI használatához be kell állítania egy React alkalmazást. Ehhez a Node.js és a npm, a Node csomagkezelő, telepítve van a számítógépére.

instagram viewer

Ezek telepítésével új React alkalmazást hozhat létre ezzel a terminálparanccsal:

npm init vite

Ez a parancs inicializálja a Vite-ot. A Vite egy gyors felépítésű eszköz, amellyel gyorsan hozhat létre modern webes alkalmazásokat. tudsz használja a Vite-ot a React alkalmazás létrehozásához.

A fenti parancs futtatása után egy sor kérdésre válaszol a React alkalmazás konfigurálásához. Hozzon létre egy React alkalmazást, nevezze el radix-ui-app, és győződjön meg arról, hogy a TypeScript nyelvet használja.

Ezután írja be az új alkalmazás gyökérkönyvtárát, és telepítse a szükséges függőségeket:

cd radix-ui-app
npm install

A React alkalmazás készen áll.

Radix UI telepítése

A Radix UI az nagyszerű komponenskönyvtáry, amellyel elérhető React-alkalmazásokat hozhat létre. Lehetővé teszi az egyes összetevők külön-külön, külön csomagként történő telepítését. A telepítéshez meg kell adnia az összetevő nevét a parancsban.

Például:

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

Ezzel telepíti a Radix UI legördülő menü összetevőjét. A Radix UI számos egyéb összetevőt tartalmaz, amelyeket az Ön igényei szerint telepíthet.

Alkalmazásának elkészítése Radix UI használatával

Most, hogy telepítette a legördülő menü összetevőjét a Radix felhasználói felületről, létrehozhat egy egyszerű legördülő menüt a Radix UI használatával. Ehhez először importálja a szükséges összetevőket a Radix UI legördülő menü összetevőjéből.

Íme egy példa, amely bemutatja, hogyan hozhat létre egyszerű legördülő menüt a Radix segítségével:

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;

Ez a kód importálja az összes összetevőt a @radix-ui/react-legördülő menü csomag mint Legördülő menü. Ezután ezeket az összetevőket használja fel egy legördülő menü létrehozásához div elem.

A Legördülő menü. Gyökér a legördülő menü gyökérkomponense. Az összes többi legördülő menüelemet ebbe kell beágyazni. A legördülő menü triggerét a gombbal határozhatja meg Legördülő menü. Kioldó összetevő. Ebben az esetben a trigger a gomb elemet a „Click Me” szöveggel. Ha rákattint a gombra, megjelenik a legördülő menü.

A... val Legördülő menü. Tartalom komponens, akkor határozza meg a legördülő menü tartalmát és a Legördülő menü. Csoport komponens kapcsolódó menüelemek csoportját képviseli. Ön a Legördülő menü. Tétel összetevőt a legördülő menü egyes elemeinek meghatározásához.

Ebben a példában két legördülő menü található. Csoportos összetevők, amelyek mindegyike egyetlen legördülő menüt tartalmaz. Tétel komponens. Ezek az összetevők mind egy legördülő menübe vannak csomagolva. Tartalmi komponens.

A fenti kódblokk megjelenítése a következőre módosítja a felületet:

Amint látja, az eredményekből hiányzik a stílus, ezért legközelebb hozzá kell adnia a saját CSS-jét.

A Radix UI összetevőinek stílusa

A Radix UI egyik előnye, hogy nem kényszerít semmilyen stílust az összetevőkre. Ez azt jelenti, hogy teljes mértékben uralhatja alkatrésze stílusát. Az összetevőket stílusozhatja a CSS-in-JS könyvtárak használatával, például a stílusos összetevőket és az érzelmeket, vagy használhatja a hagyományos CSS-t.

Íme egy példa a Radix UI összetevők stílusának kialakítására hagyományos CSS használatával:

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





"trigger">


exportdefault App;

Ez a példa hozzáadja a osztály név támasz a gomb elem, a Legördülő menü. Kioldó, a Legördülő menü. Tartalom, és a Legördülő menü. Tétel alkatrészek.

Az osztályok alkalmazása után CSS segítségével stílusozhatja az összetevőket:

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

A fenti kódblokk a meghatározott stílusokat alkalmazza az összetevőkre a vonzóbb megjelenés érdekében:

A Radix UI React Iconokat is kínál, így ikonokat adhat hozzá az alkalmazáshoz, hogy még szebbé tegye azt. Kezdje a Radix UI ikonok csomag telepítésével:

npm install @radix-ui/react-icons

A csomag telepítése után néhány ikonját használhatja az alkalmazásban.

Például:

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;

Ez a példa hozzáadja a HamburgerMenuIcon és PlusIcon az alkalmazáshoz. Az előbbi egy gombkomponens belsejében található, az utóbbi pedig az elsőt bővíti Ledob. Tétel összetevő.

Ezután frissítse a .tétel osztály a CSS-fájlban:

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

Most az alkalmazásának így kell kinéznie.

Minőségi React alkalmazás létrehozása Radix UI használatával

A Radix UI egy hatékony eszköz a React alkalmazások építéséhez. Alacsony szintű, stílustalan, hozzáférhető összetevőket biztosít, amelyeket az alkalmazás építőelemeiként használhat.

A Radix UI használatával az alkalmazás funkcionalitására összpontosíthat anélkül, hogy aggódnia kellene a mögöttes felhasználói felület bonyolultsága miatt. Akár tapasztalt fejlesztő, akár kezdő, a Radix UI segíthet kiváló minőségű, felhasználóbarát webes felületek létrehozásában.