Mit dieser Bibliothek erhalten Sie saubere, erweiterbare Komponenten, die Sie in Ihrer App verwenden und weiterentwickeln können.

Radix UI ist eine einfache, nicht gestaltete, zugängliche Komponentenbibliothek zum Erstellen hochwertiger, benutzerfreundlicher Webschnittstellen. Sie können es zusammen mit React verwenden, um Apps mit voll ausgestatteten Komponenten zu erstellen, die Sie ganz einfach an Ihr Design anpassen können.

Was ist die Radix-Benutzeroberfläche?

Radix UI ist eine Sammlung einfacher, nicht gestalteter, zugänglicher UI-Komponenten für React-Anwendungen. Es stellt die Bausteine ​​bereit, die Sie zum Erstellen Ihres Designsystems benötigen.

Das Hauptziel von Radix UI besteht darin, eine Reihe von Hilfskomponenten auf niedriger Ebene bereitzustellen, die Sie beim Erstellen wiederverwendbarer Komponenten unterstützen. Die Komponenten werden standardmäßig ohne Stil geliefert, sodass Sie die vollständige Kontrolle über deren Stil haben.

Einrichten Ihrer React-Anwendung

Sie müssen eine React-Anwendung einrichten, um die Radix-Benutzeroberfläche verwenden zu können. Dazu benötigen Sie Node.js und

npm, der Node-Paketmanager, auf Ihrem Computer installiert.

Wenn diese installiert sind, können Sie mit diesem Terminalbefehl eine neue React-Anwendung erstellen:

npm init vite

Dieser Befehl initialisiert Vite. Vite ist ein Schnell-Build-Tool, mit dem Sie schnell moderne Webanwendungen erstellen können. Du kannst Verwenden Sie Vite, um Ihre React-Anwendung zu erstellen.

Nachdem Sie den obigen Befehl ausgeführt haben, beantworten Sie eine Reihe von Eingabeaufforderungen zum Konfigurieren Ihrer React-Anwendung. Erstellen Sie eine React-Anwendung und benennen Sie sie radix-ui-appund stellen Sie sicher, dass die TypeScript-Sprache verwendet wird.

Geben Sie als Nächstes das Stammverzeichnis Ihrer neuen App ein und installieren Sie die erforderlichen Abhängigkeiten:

cd radix-ui-app
npm install

Ihre React-Anwendung ist jetzt fertig.

Radix-Benutzeroberfläche installieren

Radix-Benutzeroberfläche ist eine großartige Komponentenbibliotheky, mit dem Sie barrierefreie React-Anwendungen erstellen können. Damit können Sie jede Komponente einzeln als separates Paket installieren. Sie geben den Namen der Komponente in Ihrem Befehl an, um sie zu installieren.

Zum Beispiel:

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

Dadurch wird die Dropdown-Menükomponente der Radix-Benutzeroberfläche installiert. Radix UI verfügt über viele weitere Komponenten, die Sie je nach Bedarf installieren können.

Erstellen Sie Ihre Anwendung mit der Radix-Benutzeroberfläche

Nachdem Sie nun die Dropdown-Menükomponente von Radix UI installiert haben, können Sie mit Radix UI ein einfaches Dropdown-Menü erstellen. Dazu importieren Sie zunächst die erforderlichen Komponenten aus der Dropdown-Menükomponente der Radix-Benutzeroberfläche.

Hier ist ein Beispiel, das zeigt, wie Sie mit Radix ein einfaches Dropdown-Menü erstellen können:

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;

Dieser Code importiert alle Komponenten aus dem @radix-ui/react-dropdown-menu Paket als Dropdown-Menü. Anschließend werden diese Komponenten verwendet, um ein Dropdown-Menü innerhalb des zu erstellen div Element.

Der Dropdown-Menü. Wurzel ist die Stammkomponente des Dropdown-Menüs. Sie sollten alle anderen Dropdown-Menükomponenten darin verschachteln. Mit können Sie einen Auslöser für das Dropdown-Menü definieren Dropdown-Menü. Abzug Komponente. In diesem Fall ist der Auslöser a Taste Element mit dem Text „Click Me“. Wenn Sie auf die Schaltfläche klicken, erscheint das Dropdown-Menü.

Mit dem Dropdown-Menü. Inhalt Komponente definieren Sie den Inhalt des Dropdown-Menüs und die Dropdown-Menü. Gruppe Die Komponente stellt eine Gruppe verwandter Menüelemente dar. Sie verwenden die Dropdown-Menü. Artikel Komponente zum Definieren einzelner Elemente des Dropdown-Menüs.

In diesem Beispiel gibt es zwei DropdownMenu. Gruppenkomponenten, von denen jede ein einzelnes DropdownMenu enthält. Artikelkomponente. Diese Komponenten sind alle in ein DropdownMenu eingeschlossen. Inhaltskomponente.

Durch das Rendern des obigen Codeblocks wird Ihre Schnittstelle so geändert, dass sie wie folgt aussieht:

Wie Sie sehen, fehlt den Ergebnissen jeglicher Stil, sodass Sie als Nächstes Ihr eigenes CSS hinzufügen müssen.

Gestalten Sie Ihre Radix-UI-Komponenten

Einer der Vorteile der Radix-Benutzeroberfläche besteht darin, dass sie Ihren Komponenten keinen Stil auferlegt. Das bedeutet, dass Sie die vollständige Kontrolle über das Design Ihrer Komponente haben. Sie können Ihre Komponenten mithilfe von CSS-in-JS-Bibliotheken wie „styled-components“ und „emotion“ formatieren oder traditionelles CSS verwenden.

Hier ist ein Beispiel dafür, wie Sie Ihre Radix-UI-Komponenten mit traditionellem CSS gestalten:

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





"trigger">


exportdefault App;

Dieses Beispiel fügt das hinzu Klassenname Stütze zum Taste Element, das Dropdown-Menü. Abzug, Die Dropdown-Menü. Inhalt, und das Dropdown-Menü. Artikel Komponenten.

Nachdem Sie die Klassen angewendet haben, können Sie die Komponenten mithilfe von CSS formatieren:

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

Der obige Codeblock wendet die definierten Stile auf die Komponenten an, um ein attraktiveres Aussehen zu erzielen:

Radix UI bietet auch React Icons, sodass Sie Ihrer Anwendung Symbole hinzufügen können, um sie noch mehr zu verschönern. Beginnen Sie mit der Installation des Radix UI-Icons-Pakets:

npm install @radix-ui/react-icons

Nach der Installation des Pakets können Sie einige seiner Symbole in Ihrer Anwendung verwenden.

Zum Beispiel:

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;

Dieses Beispiel fügt das hinzu HamburgerMenuIcon Und PlusIcon zur Bewerbung. Ersteres befindet sich in einer Schaltflächenkomponente und Letzteres erweitert Ersteres Dropdown-Liste. Artikel Komponente.

Als nächstes aktualisieren Sie die .Artikel Klasse in Ihrer CSS-Datei:

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

Nun sollte Ihre Bewerbung so aussehen.

Erstellen Sie eine hochwertige React-Anwendung mit der Radix-Benutzeroberfläche

Radix UI ist ein leistungsstarkes Tool zum Erstellen von React-Anwendungen. Es stellt eine Reihe von Low-Level-Komponenten ohne Stil und Zugriff bereit, die Sie als Bausteine ​​für Ihre Anwendung verwenden können.

Durch die Verwendung der Radix-Benutzeroberfläche können Sie sich auf die Funktionalität Ihrer Anwendung konzentrieren, ohne sich über die zugrunde liegende Komplexität der Benutzeroberfläche Gedanken machen zu müssen. Egal, ob Sie ein erfahrener Entwickler oder ein Anfänger sind, Radix UI kann Ihnen beim Erstellen hochwertiger, benutzerfreundlicher Weboberflächen helfen.