Ова библиотека вам даје чисте, прошириве компоненте које можете користити у својој апликацији и даље развијати.

Радик УИ је ниског нивоа, нестилизована, доступна библиотека компоненти за изградњу висококвалитетних веб интерфејса прилагођених кориснику. Можете га користити заједно са Реацт-ом за креирање апликација са потпуно функционалним компонентама које можете лако да стилизујете тако да одговарају вашем дизајну.

Шта је Радик кориснички интерфејс?

Радик УИ је колекција примитивних, нестилизованих, приступачних УИ компоненти за Реацт апликације. Обезбеђује градивне блокове који су вам потребни да креирате свој систем дизајна.

Главни циљ Радик корисничког интерфејса је да обезбеди скуп услужних компоненти ниског нивоа које вам помажу да направите компоненте за вишекратну употребу. Компоненте подразумевано долазе без стила, што значи да имате потпуну контролу над њиховим стилом.

Подешавање ваше Реацт апликације

Морате да подесите Реацт апликацију да бисте користили Радик кориснички интерфејс. Да бисте то урадили, морате имати Ноде.јс и

instagram viewer
нпм, Ноде менаџер пакета, инсталиран на вашем рачунару.

Са овим инсталираним, можете креирати нову Реацт апликацију са овом командом терминала:

npm init vite

Ова команда ће иницијализовати Вите. Вите је алатка за брзу израду која вам омогућава да брзо креирате модерне веб апликације. Можете користите Вите да направите своју Реацт апликацију.

Након што покренете горњу команду, одговорићете на низ упита да конфигуришете своју Реацт апликацију. Направите Реацт апликацију, дајте јој назив радик-уи-апп, и уверите се да користи језик ТипеСцрипт.

Затим унесите основни директоријум нове апликације и инсталирајте потребне зависности:

cd radix-ui-app
npm install

Ваша Реацт апликација је сада спремна.

Инсталирање Радик корисничког интерфејса

Радик УИ је одлична библиотека компонентии које можете користити за креирање приступачних Реацт апликација. Омогућава вам да инсталирате сваку компоненту појединачно као посебан пакет. У команди ћете навести име компоненте да бисте је инсталирали.

На пример:

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

Ово ће инсталирати компоненту падајућег менија Радик корисничког интерфејса. Радик УИ има много других компоненти које можете инсталирати у зависности од ваших потреба.

Изградња ваше апликације помоћу Радик корисничког интерфејса

Сада када сте инсталирали компоненту падајућег менија из Радик корисничког интерфејса, можете да направите једноставан падајући мени помоћу Радик корисничког интерфејса. Да бисте то урадили, прво ћете увести потребне компоненте из компоненте падајућег менија Радик корисничког интерфејса.

Ево примера који показује како можете да направите једноставан падајући мени користећи Радик:

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;

Овај код увози све компоненте из @радик-уи/реацт-дропдовн-мену пакет као Падајући мени. Затим користи ове компоненте за креирање падајућег менија унутар див елемент.

Тхе Падајући мени. Корен је основна компонента падајућег менија. Требало би да угнездите све остале компоненте падајућег менија унутар ове. Можете дефинисати окидач за падајући мени помоћу Падајући мени. Окидач саставни део. У овом случају, окидач је а дугме елемент са текстом „Кликни ме“. Када кликнете на дугме, појавиће се падајући мени.

Са Падајући мени. Садржај компоненту, дефинишете садржај падајућег менија и Падајући мени. Група компонента представља групу повезаних ставки менија. Ви користите Падајући мени. Ставка компоненту за дефинисање појединачних ставки падајућег менија.

У овом примеру постоје два падајућег менија. Групне компоненте, од којих свака садржи један падајући мени. Компонента ставке. Све ове компоненте су умотане у падајући мени. Садржајна компонента.

Приказивање блока кода изнад ће модификовати ваш интерфејс да изгледа овако:

Као што видите, резултатима недостаје било какав стил, тако да ћете морати да додате сопствени ЦСС.

Стилизирање ваших Радик УИ компоненти

Једна од предности Радик корисничког интерфејса је та што не намеће никакав стил вашим компонентама. То значи да имате потпуну контролу над стилом своје компоненте. Можете да стилизујете своје компоненте користећи ЦСС-ин-ЈС библиотеке као што су стилед-цомпонентс и емотион, или можете користити традиционални ЦСС.

Ево примера како да стилизујете своје Радик УИ компоненте користећи традиционални ЦСС:

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





"trigger">


exportdefault App;

Овај пример додаје Назив класе проп то тхе дугме елемент, тхе Падајући мени. Окидач, тхе Падајући мени. Садржај, анд тхе Падајући мени. Ставка компоненте.

Након примене класа, можете да стилизујете компоненте користећи ЦСС:

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

Горњи блок кода ће применити дефинисане стилове на компоненте за привлачнији изглед:

Радик УИ такође нуди Реацт иконе, тако да можете додати иконе својој апликацији да бисте је још улепшали. Почните тако што ћете инсталирати Радик УИ пакет икона:

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;

Овај пример додаје ХамбургерМенуИцон и ПлусИцон на апликацију. Први је унутар компоненте дугмета, а други повећава прву Испустити. Ставка саставни део.

Затим ажурирајте .итем класе у вашој ЦСС датотеци:

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

Сада би ваша апликација требала изгледати овако.

Направите квалитетну Реацт апликацију користећи Радик УИ

Радик УИ је моћан алат за прављење Реацт апликација. Пружа скуп приступачних компоненти ниског нивоа, нестилизованих, које можете користити као градивне блокове за своју апликацију.

Коришћењем Радик корисничког интерфејса, можете се фокусирати на функционалност ваше апликације без бриге о сложености корисничког интерфејса. Било да сте искусан програмер или почетник, Радик УИ вам може помоћи да изградите висококвалитетне веб интерфејсе прилагођене кориснику.