Эта библиотека предоставляет вам чистые, расширяемые компоненты, которые вы можете использовать в своем приложении и развивать дальше.

Radix UI — это низкоуровневая, не стилизованная, доступная библиотека компонентов для создания высококачественных и удобных веб-интерфейсов. Вы можете использовать его вместе с React для создания приложений с полнофункциональными компонентами, которые можно легко стилизовать в соответствии с вашим дизайном.

Что такое Radix UI?

Radix UI — это набор примитивных, не стилизованных, доступных компонентов пользовательского интерфейса для приложений React. Он предоставляет строительные блоки, необходимые для создания вашей дизайн-системы.

Основная цель пользовательского интерфейса Radix — предоставить набор низкоуровневых служебных компонентов, которые помогут вам создавать повторно используемые компоненты. По умолчанию компоненты не имеют стилей, что означает, что вы полностью контролируете их стиль.

Настройка вашего приложения React

Вы должны настроить приложение React для использования Radix UI. Для этого вам нужно иметь Node.js и

instagram viewer
npm, менеджер пакетов Node, установлен на вашем компьютере.

Установив их, вы можете создать новое приложение React с помощью этой команды терминала:

npm init vite

Эта команда инициализирует Vite. Vite — это инструмент быстрой сборки, который позволяет быстро создавать современные веб-приложения. Ты можешь используйте Vite для создания своего приложения React.

После выполнения вышеуказанной команды вы ответите на ряд запросов по настройке приложения React. Создайте приложение React, назовите его radix-ui-приложениеи убедитесь, что он использует язык TypeScript.

Затем введите корневой каталог вашего нового приложения и установите необходимые зависимости:

cd radix-ui-app
npm install

Ваше приложение React готово.

Установка пользовательского интерфейса Radix

Пользовательский интерфейс Radix отличная библиотека компонентовy, которые вы можете использовать для создания доступных приложений React. Это позволяет вам устанавливать каждый компонент отдельно как отдельный пакет. Вы укажете имя компонента в своей команде для его установки.

Например:

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

Это установит компонент раскрывающегося меню Radix UI. Radix UI имеет много других компонентов, которые вы можете установить в зависимости от ваших потребностей.

Создание приложения с использованием пользовательского интерфейса Radix

Теперь, когда вы установили компонент раскрывающегося меню из пользовательского интерфейса Radix, вы можете создать простое раскрывающееся меню с помощью пользовательского интерфейса Radix. Для этого вы сначала импортируете необходимые компоненты из компонента раскрывающегося меню Radix UI.

Вот пример, показывающий, как вы можете создать простое выпадающее меню с помощью 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;

Этот код импортирует все компоненты из @radix-ui/реагировать-выпадающее-меню упаковать как Выпадающее меню. Затем он использует эти компоненты для создания выпадающего меню внутри див элемент.

Выпадающее меню. Корень является корневым компонентом выпадающего меню. Вы должны вложить все остальные компоненты выпадающего меню в этот. Вы можете определить триггер для выпадающего меню, используя Выпадающее меню. Курок компонент. В данном случае триггером является кнопка элемент с текстом «Click Me». При нажатии на кнопку появится выпадающее меню.

С Выпадающее меню. Содержание компонент, вы определяете содержимое выпадающего меню и Выпадающее меню. Группа компонент представляет собой группу связанных пунктов меню. Вы используете Выпадающее меню. Элемент компонент для определения отдельных пунктов выпадающего меню.

В этом примере есть два DropdownMenu. Групповые компоненты, каждый из которых содержит одно DropdownMenu. Компонент предмета. Все эти компоненты заключены в DropdownMenu. Контентная составляющая.

Рендеринг приведенного выше блока кода изменит ваш интерфейс, чтобы он выглядел следующим образом:

Как видите, в результатах отсутствуют какие-либо стили, поэтому вам нужно будет добавить свой собственный CSS.

Стилизация компонентов пользовательского интерфейса Radix

Одним из преимуществ пользовательского интерфейса Radix является то, что он не накладывает никаких стилей на ваши компоненты. Это означает, что у вас есть полный контроль над стилем вашего компонента. Вы можете стилизовать свои компоненты, используя библиотеки CSS-in-JS, такие как стилизованные компоненты и эмоции, или вы можете использовать традиционный CSS.

Вот пример того, как стилизовать компоненты пользовательского интерфейса Radix с помощью традиционного CSS:

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





"trigger">


exportdefault App;

Этот пример добавляет className опора кнопка элемент, Выпадающее меню. Курок, Выпадающее меню. Содержание, и Выпадающее меню. Элемент компоненты.

После применения классов вы можете стилизовать компоненты с помощью 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;
}

Блок кода выше применит определенные стили к компонентам для более привлекательного вида:

Radix UI также предлагает значки React, поэтому вы можете добавлять значки в свое приложение, чтобы еще больше украсить его. Начните с установки пакета значков Radix UI:

npm install @radix-ui/react-icons

После установки пакета вы можете использовать некоторые его значки в своем приложении.

Например:

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;

Этот пример добавляет ГамбургерМенюЗначок и ПлюсИконка к приложению. Первый находится внутри компонента кнопки, а второй дополняет первый. Падать. Элемент компонент.

Далее обновите .элемент класс в вашем файле CSS:

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

Теперь ваше приложение должно выглядеть так.

Создание качественного приложения React с использованием Radix UI

Radix UI — это мощный инструмент для создания приложений React. Он предоставляет набор низкоуровневых, не оформленных, доступных компонентов, которые можно использовать в качестве строительных блоков для своего приложения.

Используя Radix UI, вы можете сосредоточиться на функциональности своего приложения, не беспокоясь о базовых сложностях пользовательского интерфейса. Являетесь ли вы опытным разработчиком или новичком, Radix UI поможет вам создавать высококачественные и удобные веб-интерфейсы.