Ta biblioteka zapewnia czyste, rozszerzalne komponenty, których możesz używać w swojej aplikacji i dalej ją rozwijać.

Radix UI to niskopoziomowa, niestylizowana, dostępna biblioteka komponentów do tworzenia wysokiej jakości, przyjaznych dla użytkownika interfejsów internetowych. Możesz go używać razem z React, aby tworzyć aplikacje z w pełni funkcjonalnymi komponentami, które możesz łatwo dopasować do swojego projektu.

Co to jest interfejs użytkownika Radix?

Radix UI to zbiór prymitywnych, niestylizowanych, dostępnych komponentów interfejsu użytkownika dla aplikacji React. Zapewnia elementy potrzebne do stworzenia systemu projektowego.

Głównym celem Radix UI jest zapewnienie zestawu niskopoziomowych komponentów narzędziowych, które pomogą Ci zbudować komponenty wielokrotnego użytku. Komponenty są domyślnie dostarczane bez stylu, co oznacza, że ​​masz pełną kontrolę nad ich stylem.

Konfigurowanie aplikacji React

Aby korzystać z Radix UI, musisz skonfigurować aplikację React. Aby to zrobić, musisz mieć Node.js i npm, menedżer pakietów Node, zainstalowany na twoim komputerze.

instagram viewer

Po ich zainstalowaniu możesz utworzyć nową aplikację React za pomocą tego polecenia terminala:

npm init vite

To polecenie zainicjuje Vite. Vite to szybkie narzędzie, które pozwala szybko tworzyć nowoczesne aplikacje internetowe. Możesz użyj Vite do stworzenia swojej aplikacji React.

Po uruchomieniu powyższego polecenia odpowiesz na serię monitów, aby skonfigurować swoją aplikację React. Utwórz aplikację React, nazwij ją aplikacja radix-UIi upewnij się, że używa języka TypeScript.

Następnie wejdź do katalogu głównego nowej aplikacji i zainstaluj niezbędne zależności:

cd radix-ui-app
npm install

Twoja aplikacja React jest już gotowa.

Instalowanie interfejsu użytkownika Radix

Interfejs Radix jest świetna biblioteka komponentówy, których możesz używać do tworzenia dostępnych aplikacji React. Pozwala zainstalować każdy komponent osobno jako osobny pakiet. Określisz nazwę komponentu w swoim poleceniu, aby go zainstalować.

Na przykład:

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

Spowoduje to zainstalowanie składnika menu rozwijanego Radix UI. Radix UI ma wiele innych komponentów, które możesz zainstalować w zależności od potrzeb.

Budowanie aplikacji przy użyciu interfejsu użytkownika Radix

Teraz, gdy zainstalowałeś komponent menu rozwijanego z Radix UI, możesz zbudować proste menu rozwijane za pomocą Radix UI. Aby to zrobić, najpierw zaimportujesz niezbędne komponenty z komponentu menu rozwijanego Radix UI.

Oto przykład pokazujący, jak zbudować proste menu rozwijane za 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;

Ten kod importuje wszystkie komponenty z pliku @radix-ui/react-dropdown-menu paczka jako Menu rozwijane. Następnie wykorzystuje te komponenty do utworzenia rozwijanego menu wewnątrz pliku dz element.

The Menu rozwijane. Źródło jest głównym składnikiem menu rozwijanego. Powinieneś zagnieździć wszystkie inne elementy menu rozwijanego w tym jednym. Możesz zdefiniować wyzwalacz dla menu rozwijanego za pomocą Menu rozwijane. Spust część. W tym przypadku wyzwalaczem jest a przycisk element z tekstem „Kliknij mnie”. Po kliknięciu przycisku pojawi się menu rozwijane.

z Menu rozwijane. Treść składnika, definiujesz zawartość menu rozwijanego i Menu rozwijane. Grupa komponent reprezentuje grupę powiązanych elementów menu. Używasz Menu rozwijane. Przedmiot komponent do definiowania poszczególnych pozycji menu rozwijanego.

W tym przykładzie istnieją dwa DropdownMenu. Składniki grupy, z których każdy zawiera jeden DropdownMenu. Składnik pozycji. Wszystkie te komponenty są opakowane w DropdownMenu. Składnik zawartości.

Renderowanie powyższego bloku kodu zmodyfikuje interfejs tak, aby wyglądał następująco:

Jak widać, w wynikach brakuje jakiejkolwiek stylizacji, więc w następnej kolejności musisz dodać własny CSS.

Stylizowanie komponentów interfejsu Radix

Jedną z zalet Radix UI jest to, że nie narzuca żadnych stylów Twoim komponentom. Oznacza to, że masz pełną kontrolę nad stylem swojego komponentu. Możesz stylizować swoje komponenty za pomocą bibliotek CSS-in-JS, takich jak stylizowane-komponenty i emocje, lub możesz użyć tradycyjnego CSS.

Oto przykład, jak stylizować komponenty Radix UI przy użyciu tradycyjnego CSS:

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





"trigger">


exportdefault App;

Ten przykład dodaje Nazwa klasy podpora do przycisk pierwiastek, Menu rozwijane. Spust, Menu rozwijane. Treść, i Menu rozwijane. Przedmiot składniki.

Po zastosowaniu klas możesz stylizować komponenty za 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;
}

Powyższy blok kodu zastosuje zdefiniowane style do komponentów, aby uzyskać bardziej atrakcyjny wygląd:

Radix UI oferuje również React Icons, więc możesz dodawać ikony do swojej aplikacji, aby jeszcze bardziej ją upiększyć. Zacznij od zainstalowania pakietu ikon Radix UI:

npm install @radix-ui/react-icons

Po zainstalowaniu pakietu możesz użyć niektórych jego ikon w swojej aplikacji.

Na przykład:

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;

Ten przykład dodaje HamburgerMenuIkona I PlusIkona do aplikacji. Ten pierwszy znajduje się w komponencie przycisku, a drugi rozszerza pierwszy Upuścić. Przedmiot część.

Następnie zaktualizuj plik .przedmiot class w swoim pliku CSS:

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

Teraz Twoja aplikacja powinna wyglądać tak.

Zbuduj wysokiej jakości aplikację React przy użyciu interfejsu użytkownika Radix

Radix UI to potężne narzędzie do budowania aplikacji React. Zapewnia zestaw przystępnych komponentów niskiego poziomu, bez stylów, których można użyć jako elementów konstrukcyjnych aplikacji.

Korzystając z Radix UI, możesz skupić się na funkcjonalności swojej aplikacji, nie martwiąc się o złożoność UI. Niezależnie od tego, czy jesteś doświadczonym programistą, czy początkującym, Radix UI może pomóc w tworzeniu wysokiej jakości, przyjaznych dla użytkownika interfejsów internetowych.