Cette bibliothèque vous offre des composants propres et extensibles que vous pouvez utiliser dans votre application et développer davantage.

Radix UI est une bibliothèque de composants de bas niveau, sans style et accessible pour la création d'interfaces Web conviviales de haute qualité. Vous pouvez l'utiliser avec React pour créer des applications avec des composants complets que vous pouvez facilement styliser pour s'adapter à votre conception.

Qu'est-ce que l'interface utilisateur Radix?

Radix UI est une collection de composants d'interface utilisateur primitifs, sans style et accessibles pour les applications React. Il fournit les éléments de base dont vous avez besoin pour créer votre système de conception.

L'objectif principal de Radix UI est de fournir un ensemble de composants utilitaires de bas niveau qui vous aident à créer des composants réutilisables. Les composants sont sans style par défaut, ce qui signifie que vous avez un contrôle total sur leur style.

Configuration de votre application React

instagram viewer

Vous devez configurer une application React pour utiliser l'interface utilisateur Radix. Pour ce faire, vous devez avoir Node.js et npm, le gestionnaire de paquets Node, installé sur votre ordinateur.

Avec ceux-ci installés, vous pouvez créer une nouvelle application React avec cette commande de terminal :

npm init vite

Cette commande initialisera Vite. Vite est un outil de construction rapide qui vous permet de créer rapidement des applications Web modernes. Tu peux utilisez Vite pour créer votre application React.

Après avoir exécuté la commande ci-dessus, vous répondrez à une série d'invites pour configurer votre application React. Créez une application React, nommez-la application radix-ui, et assurez-vous qu'il utilise le langage TypeScript.

Ensuite, entrez le répertoire racine de votre nouvelle application et installez les dépendances nécessaires :

cd radix-ui-app
npm install

Votre application React est maintenant prête.

Installation de l'interface utilisateur Radix

L'interface utilisateur Radix est une grande bibliothèque de composantsy que vous pouvez utiliser pour créer des applications React accessibles. Il vous permet d'installer chaque composant individuellement dans un package séparé. Vous spécifierez le nom du composant dans votre commande pour l'installer.

Par exemple:

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

Cela installera le composant de menu déroulant Radix UI. Radix UI possède de nombreux autres composants que vous pouvez installer en fonction de vos besoins.

Construire votre application à l'aide de l'interface utilisateur Radix

Maintenant que vous avez installé le composant de menu déroulant de Radix UI, vous pouvez créer un menu déroulant simple à l'aide de Radix UI. Pour ce faire, vous allez d'abord importer les composants nécessaires à partir du composant de menu déroulant Radix UI.

Voici un exemple montrant comment créer un menu déroulant simple à l'aide de 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;

Ce code importe tous les composants du @radix-ui/react-dropdown-menu paquet comme Menu déroulant. Il utilise ensuite ces composants pour créer un menu déroulant à l'intérieur du div élément.

Le Menu déroulant. Racine est le composant racine du menu déroulant. Vous devez imbriquer tous les autres composants du menu déroulant dans celui-ci. Vous pouvez définir un déclencheur pour le menu déroulant à l'aide de la Menu déroulant. Déclencher composant. Dans ce cas, le déclencheur est un bouton élément avec le texte "Cliquez-moi". Lorsque vous cliquez sur le bouton, le menu déroulant apparaît.

Avec le Menu déroulant. Contenu composant, vous définissez le contenu du menu déroulant et le Menu déroulant. Groupe Le composant représente un groupe d'éléments de menu associés. Vous utilisez le Menu déroulant. Article composant pour définir les éléments individuels du menu déroulant.

Dans cet exemple, il y a deux DropdownMenu. Composants de groupe, chacun contenant un seul DropdownMenu. Composant de l'article. Ces composants sont tous enveloppés dans un DropdownMenu. Composant de contenu.

Le rendu du bloc de code ci-dessus modifiera votre interface pour qu'elle ressemble à ceci :

Comme vous pouvez le voir, les résultats manquent de style, vous devrez donc ajouter votre propre CSS ensuite.

Styliser vos composants d'interface utilisateur Radix

L'un des avantages de Radix UI est qu'il n'impose aucun style à vos composants. Cela signifie que vous avez un contrôle total sur le style de votre composant. Vous pouvez styliser vos composants à l'aide de bibliothèques CSS-in-JS telles que les composants stylés et l'émotion, ou vous pouvez utiliser le CSS traditionnel.

Voici un exemple de style de vos composants d'interface utilisateur Radix à l'aide de CSS traditionnel :

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





"trigger">


exportdefault App;

Cet exemple ajoute le nom du cours appui à la bouton élément, le Menu déroulant. Déclencher, le Menu déroulant. Contenu, et le Menu déroulant. Article Composants.

Après avoir appliqué les classes, vous pouvez ensuite styliser les composants à l'aide de 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;
}

Le bloc de code ci-dessus appliquera les styles définis aux composants pour un look plus attrayant :

Radix UI propose également des icônes React, vous pouvez donc ajouter des icônes à votre application pour l'embellir davantage. Commencez par installer le package d'icônes Radix UI :

npm install @radix-ui/react-icons

Après avoir installé le package, vous pouvez utiliser certaines de ses icônes dans votre application.

Par exemple:

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;

Cet exemple ajoute le HamburgerMenuIcône et PlusIcône à la demande. Le premier est à l'intérieur d'un composant de bouton, et le second augmente le premier Menu déroulant. Article composant.

Ensuite, mettez à jour le .article classe dans votre fichier CSS :

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

Maintenant, votre application devrait ressembler à ceci.

Construire une application React de qualité à l'aide de l'interface utilisateur Radix

Radix UI est un outil puissant pour créer des applications React. Il fournit un ensemble de composants de bas niveau, sans style et accessibles que vous pouvez utiliser comme blocs de construction pour votre application.

En utilisant Radix UI, vous pouvez vous concentrer sur les fonctionnalités de votre application sans vous soucier des complexités sous-jacentes de l'interface utilisateur. Que vous soyez un développeur chevronné ou un débutant, Radix UI peut vous aider à créer des interfaces Web conviviales de haute qualité.