Tato knihovna vám poskytuje čisté, rozšiřitelné komponenty, které můžete používat ve své aplikaci a dále rozvíjet.

Radix UI je nízkoúrovňová, nestylovaná, přístupná knihovna komponent pro vytváření vysoce kvalitních, uživatelsky přívětivých webových rozhraní. Můžete jej používat společně s Reactem k vytváření aplikací s plnohodnotnými komponentami, které si můžete snadno upravit podle svého návrhu.

Co je Radix UI?

Radix UI je kolekce primitivních, nestylovaných a přístupných komponent uživatelského rozhraní pro aplikace React. Poskytuje stavební kameny, které potřebujete k vytvoření vašeho návrhového systému.

Hlavním cílem Radix UI je poskytnout sadu nízkoúrovňových obslužných komponent, které vám pomohou vytvářet opakovaně použitelné komponenty. Komponenty jsou standardně dodávány bez stylu, což znamená, že máte úplnou kontrolu nad jejich stylem.

Nastavení aplikace React

Chcete-li používat Radix UI, musíte nastavit aplikaci React. K tomu potřebujete mít Node.js a npm, správce balíčků Node, nainstalovaný na vašem počítači.

instagram viewer

S těmito nainstalovanými můžete vytvořit novou aplikaci React pomocí tohoto příkazu terminálu:

npm init vite

Tento příkaz inicializuje Vite. Vite je rychle sestavitelný nástroj, který vám umožní rychle vytvářet moderní webové aplikace. Můžeš použijte Vite k vytvoření aplikace React.

Po spuštění výše uvedeného příkazu odpovíte na řadu výzev ke konfiguraci aplikace React. Vytvořte aplikaci React, pojmenujte ji aplikace radix-uia ujistěte se, že používá jazyk TypeScript.

Dále zadejte kořenový adresář nové aplikace a nainstalujte potřebné závislosti:

cd radix-ui-app
npm install

Vaše aplikace React je nyní připravena.

Instalace Radix UI

Radix UI je skvělá knihovna komponenty, které můžete použít k vytvoření přístupných aplikací React. Umožňuje nainstalovat každou komponentu samostatně jako samostatný balíček. V příkazu k instalaci zadáte název komponenty.

Například:

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

Tím se nainstaluje komponenta rozbalovací nabídky Radix UI. Radix UI má mnoho dalších komponent, které můžete nainstalovat v závislosti na vašich potřebách.

Vytváření vaší aplikace pomocí Radix UI

Nyní, když jste nainstalovali komponentu rozbalovací nabídky z uživatelského rozhraní Radix, můžete pomocí uživatelského rozhraní Radix vytvořit jednoduchou rozevírací nabídku. Chcete-li to provést, nejprve naimportujte potřebné komponenty z rozbalovací nabídky Radix UI.

Zde je příklad ukazující, jak můžete vytvořit jednoduchou rozbalovací nabídku pomocí 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;

Tento kód importuje všechny komponenty z @radix-ui/react-dropdown-menu balíček jako Rozbalovací nabídka. Tyto komponenty pak použije k vytvoření rozbalovací nabídky uvnitř div živel.

The Rozbalovací nabídka. Vykořenit je kořenová součást rozbalovací nabídky. Všechny ostatní komponenty rozbalovací nabídky byste měli vnořit do této. Spouštěč pro rozevírací nabídku můžete definovat pomocí Rozbalovací nabídka. Spoušť komponent. V tomto případě je spouštěčem a knoflík prvek s textem „Klikni na mě“. Po kliknutí na tlačítko se zobrazí rozbalovací nabídka.

s Rozbalovací nabídka. Obsah komponentu, definujete obsah rozbalovací nabídky a Rozbalovací nabídka. Skupina komponenta představuje skupinu souvisejících položek nabídky. Používáte Rozbalovací nabídka. Položka komponentu k definování jednotlivých položek rozbalovací nabídky.

V tomto příkladu jsou dvě rozbalovací nabídky. Seskupit komponenty, z nichž každá obsahuje jednu rozbalovací nabídku. Komponenta položky. Všechny tyto komponenty jsou zabaleny do rozbalovací nabídky. Obsahová složka.

Vykreslení bloku kódu výše upraví vaše rozhraní tak, aby vypadalo takto:

Jak vidíte, výsledky postrádají jakýkoli styl, takže budete muset přidat vlastní CSS.

Styling vašich komponent uživatelského rozhraní Radix

Jednou z výhod uživatelského rozhraní Radix je, že vašim komponentám nevnucuje žádný styl. To znamená, že máte úplnou kontrolu nad stylem vašeho komponentu. Komponenty můžete stylovat pomocí knihoven CSS-in-JS, jako jsou stylizované komponenty a emoce, nebo můžete použít tradiční CSS.

Zde je příklad, jak stylizovat komponenty uživatelského rozhraní Radix pomocí tradičních CSS:

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





"trigger">


exportdefault App;

Tento příklad přidává jméno třídy podpěra k knoflík prvek, Rozbalovací nabídka. Spoušť, Rozbalovací nabídka. Obsaha Rozbalovací nabídka. Položka komponenty.

Po použití tříd pak můžete stylovat komponenty pomocí 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;
}

Blok kódu výše použije definované styly na komponenty pro atraktivnější vzhled:

Radix UI také nabízí React Icons, takže do aplikace můžete přidat ikony a ještě ji zkrášlit. Začněte instalací balíčku ikon uživatelského rozhraní Radix:

npm install @radix-ui/react-icons

Po instalaci balíčku můžete ve své aplikaci používat některé jeho ikony.

Napří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">


exportdefault App;

Tento příklad přidává HamburgerMenuIkona a PlusIcon do aplikace. První je uvnitř tlačítka a druhý rozšiřuje první Rozbalovací nabídka. Položka komponent.

Dále aktualizujte .položka třídy ve vašem souboru CSS:

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

Vaše aplikace by nyní měla vypadat takto.

Sestavte kvalitní aplikaci React pomocí Radix UI

Radix UI je výkonný nástroj pro vytváření aplikací React. Poskytuje sadu nízkoúrovňových, nestylovaných, přístupných komponent, které můžete použít jako stavební bloky pro vaši aplikaci.

Pomocí uživatelského rozhraní Radix se můžete soustředit na funkčnost své aplikace, aniž byste se museli starat o základní složitost uživatelského rozhraní. Ať už jste zkušený vývojář nebo začátečník, Radix UI vám může pomoci vytvořit vysoce kvalitní a uživatelsky přívětivá webová rozhraní.