Тази библиотека ви дава чисти, разширяеми компоненти, които можете да използвате в приложението си и да го развивате допълнително.

Radix UI е нестилизирана, достъпна библиотека с компоненти от ниско ниво за изграждане на висококачествени, удобни за потребителя уеб интерфейси. Можете да го използвате заедно с React, за да създавате приложения с пълнофункционални компоненти, които можете лесно да стилизирате, за да отговарят на вашия дизайн.

Какво е Radix UI?

Radix UI е колекция от примитивни, нестилизирани, достъпни UI компоненти за React приложения. Той осигурява градивните елементи, от които се нуждаете, за да създадете вашата система за проектиране.

Основната цел на Radix UI е да предостави набор от помощни компоненти на ниско ниво, които ви помагат да създавате компоненти за многократна употреба. Компонентите не са стилизирани по подразбиране, което означава, че имате пълен контрол върху техния стил.

Настройване на вашето приложение 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 UI

Radix UI е страхотна библиотека с компонентиy, които можете да използвате за създаване на достъпни React приложения. Позволява ви да инсталирате всеки компонент поотделно като отделен пакет. Ще посочите името на компонента във вашата команда, за да го инсталирате.

Например:

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

Това ще инсталира компонента на падащото меню на Radix UI. Radix UI има много други компоненти, които можете да инсталирате в зависимост от вашите нужди.

Изграждане на вашето приложение с помощта на Radix UI

Сега, след като сте инсталирали компонента на падащото меню от Radix UI, можете да създадете просто падащо меню с помощта на Radix UI. За да направите това, първо ще импортирате необходимите компоненти от компонента на падащото меню на 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/react-dropdown-menu опаковка като Падащо меню. След това използва тези компоненти, за да създаде падащо меню вътре в див елемент.

The Падащо меню. корен е основният компонент на падащото меню. Трябва да поставите всички други компоненти на падащото меню в това. Можете да дефинирате тригер за падащото меню, като използвате Падащо меню. Тригер компонент. В този случай тригерът е a бутон елемент с текст „Щракнете върху мен“. Когато щракнете върху бутона, ще се появи падащото меню.

С Падащо меню. Съдържание компонент, вие определяте съдържанието на падащото меню и Падащо меню. Група представлява група от свързани елементи от менюто. Вие използвате Падащо меню. Вещ компонент за дефиниране на отделни елементи от падащото меню.

В този пример има две падащи менюта. Групирайте компоненти, всеки от които съдържа едно падащо меню. Компонент арт. Всички тези компоненти са обвити в падащо меню. Съдържателен компонент.

Изобразяването на кодовия блок по-горе ще промени интерфейса ви така, че да изглежда така:

Както можете да видите, резултатите нямат стил, така че ще трябва да добавите свой собствен CSS.

Оформяне на вашите Radix UI компоненти

Едно от предимствата на Radix UI е, че той не налага никакъв стил върху вашите компоненти. Това означава, че имате пълен контрол върху стила на вашия компонент. Можете да стилизирате вашите компоненти с помощта на CSS-in-JS библиотеки като styled-components и emotion, или можете да използвате традиционен CSS.

Ето пример за това как да стилизирате вашите Radix UI компоненти с помощта на традиционния 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:

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;

Този пример добавя Икона на меню за хамбургер и PlusIcon към приложението. Първият е вътре в компонент на бутон, а вторият допълва първия Падащо меню. Вещ компонент.

След това актуализирайте .вещ клас във вашия CSS файл:

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

Сега вашето приложение трябва да изглежда така.

Качествено изграждане на React приложение с помощта на Radix UI

Radix UI е мощен инструмент за изграждане на React приложения. Той предоставя набор от ниско ниво, нестилизирани, достъпни компоненти, които можете да използвате като градивни елементи за вашето приложение.

Използвайки Radix UI, можете да се съсредоточите върху функционалността на вашето приложение, без да се притеснявате за основните сложности на UI. Независимо дали сте опитен разработчик или начинаещ, Radix UI може да ви помогне да изградите висококачествени, удобни за потребителя уеб интерфейси.