Šioje bibliotekoje rasite švarius, išplečiamus komponentus, kuriuos galite naudoti programoje ir toliau tobulinti.

Radix UI yra žemo lygio, nestilių, prieinama komponentų biblioteka, skirta kurti aukštos kokybės, patogias žiniatinklio sąsajas. Galite naudoti jį kartu su „React“, kad sukurtumėte programas su visapusiškais komponentais, kuriuos lengvai pritaikysite savo dizainui.

Kas yra Radix UI?

Radix UI yra primityvių, nestilių, prieinamų UI komponentų, skirtų „React“ programoms, rinkinys. Jame pateikiami elementai, kurių jums reikia kuriant projektavimo sistemą.

Pagrindinis Radix vartotojo sąsajos tikslas yra pateikti žemo lygio paslaugų komponentų rinkinį, kuris padėtų kurti daugkartinio naudojimo komponentus. Komponentai pagal numatytuosius nustatymus yra be stiliaus, o tai reiškia, kad jūs galite visiškai valdyti jų stilių.

„React“ programos nustatymas

Norėdami naudoti Radix UI, turite nustatyti programą „React“. Norėdami tai padaryti, turite turėti Node.js ir npm, mazgo paketų tvarkyklė, įdiegta jūsų kompiuteryje.

instagram viewer

Įdiegę juos, galite sukurti naują „React“ programą naudodami šią terminalo komandą:

npm init vite

Ši komanda inicijuos Vite. Vite yra greito kūrimo įrankis, leidžiantis greitai sukurti modernias žiniatinklio programas. Tu gali naudokite Vite, kad sukurtumėte savo React programą.

Paleidę aukščiau pateiktą komandą, atsakysite į keletą raginimų, kad sukonfigūruotumėte programą „React“. Sukurkite „React“ programą, pavadinkite ją radix-ui-app, ir įsitikinkite, kad ji naudoja „TypeScript“ kalbą.

Tada įveskite naujos programos šakninį katalogą ir įdiekite reikiamas priklausomybes:

cd radix-ui-app
npm install

Dabar jūsų „React“ programa paruošta.

Radix vartotojo sąsajos diegimas

Radix UI yra puiki komponentų bibliotekay, kurią galite naudoti kurdami prieinamas „React“ programas. Tai leidžia įdiegti kiekvieną komponentą atskirai kaip atskirą paketą. Komponento pavadinimą nurodysite komandoje, kad jį įdiegtumėte.

Pavyzdžiui:

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

Bus įdiegtas Radix UI išskleidžiamojo meniu komponentas. Radix UI turi daug kitų komponentų, kuriuos galite įdiegti atsižvelgdami į savo poreikius.

Programos kūrimas naudojant Radix vartotojo sąsają

Dabar, kai įdiegėte išskleidžiamojo meniu komponentą iš Radix UI, galite sukurti paprastą išskleidžiamąjį meniu naudodami Radix UI. Norėdami tai padaryti, pirmiausia importuosite reikiamus komponentus iš Radix vartotojo sąsajos išskleidžiamojo meniu komponento.

Štai pavyzdys, rodantis, kaip galite sukurti paprastą išskleidžiamąjį meniu naudodami 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;

Šis kodas importuoja visus komponentus iš @radix-ui/react-dropdown-menu pakuotė kaip Išskleidžiamasis meniu. Tada jis naudoja šiuos komponentus, kad sukurtų išskleidžiamąjį meniu div elementas.

The Išskleidžiamasis meniu. Šaknis yra pagrindinis išskleidžiamojo meniu komponentas. Į šį elementą turėtumėte įdėti visus kitus išskleidžiamojo meniu komponentus. Galite nustatyti išskleidžiamojo meniu aktyviklį naudodami Išskleidžiamasis meniu. Trigeris komponentas. Šiuo atveju trigeris yra a mygtuką elementas su tekstu „Spustelėkite mane“. Kai paspausite mygtuką, pasirodys išskleidžiamasis meniu.

Su Išskleidžiamasis meniu. Turinys komponentą, apibrėžiate išskleidžiamojo meniu turinį ir Išskleidžiamasis meniu. Grupė komponentas reiškia susijusių meniu elementų grupę. Jūs naudojate Išskleidžiamasis meniu. Prekė komponentas atskiriems išskleidžiamojo meniu elementams apibrėžti.

Šiame pavyzdyje yra du išskleidžiamieji meniu. Grupės komponentai, kurių kiekviename yra vienas išskleidžiamasis meniu. Prekės komponentas. Visi šie komponentai yra įtraukti į išskleidžiamąjį meniu. Turinio komponentas.

Pateikus aukščiau esantį kodo bloką, sąsaja bus pakeista, kad atrodytų taip:

Kaip matote, rezultatams trūksta stiliaus, todėl toliau turėsite pridėti savo CSS.

Radix vartotojo sąsajos komponentų stiliaus kūrimas

Vienas iš Radix UI privalumų yra tai, kad ji neprimeta jokio stiliaus jūsų komponentams. Tai reiškia, kad jūs visiškai kontroliuojate savo komponento stilių. Galite sukurti savo komponentų stilių naudodami CSS-JS bibliotekas, pvz., stiliaus komponentus ir emocijas, arba galite naudoti tradicinį CSS.

Štai pavyzdys, kaip sukurti Radix UI komponentų stilių naudojant tradicinį CSS:

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





"trigger">


exportdefault App;

Šis pavyzdys prideda klasės pavadinimas atrama prie mygtuką elementas, Išskleidžiamasis meniu. Trigeris, Išskleidžiamasis meniu. Turinys, ir Išskleidžiamasis meniu. Prekė komponentai.

Pritaikę klases, galite sukurti komponentų stilių naudodami 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;
}

Aukščiau pateiktas kodo blokas taikys apibrėžtus stilius komponentams, kad išvaizda būtų patrauklesnė:

„Radix UI“ taip pat siūlo „React“ piktogramas, todėl galite pridėti piktogramų prie programos, kad ją dar labiau pagražintumėte. Pradėkite įdiegę Radix UI piktogramų paketą:

npm install @radix-ui/react-icons

Įdiegę paketą, kai kurias jo piktogramas galite naudoti programoje.

Pavyzdžiui:

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;

Šis pavyzdys prideda HamburgerMenuIcon ir Pliuso piktograma prie paraiškos. Pirmasis yra mygtuko komponento viduje, o pastarasis papildo pirmąjį Išskleidžiamasis meniu. Prekė komponentas.

Tada atnaujinkite .elementas klasė jūsų CSS faile:

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

Dabar jūsų programa turėtų atrodyti taip.

Sukurkite kokybišką „React“ programą naudodami „Radix“ vartotojo sąsają

Radix UI yra galingas įrankis kuriant React programas. Jame pateikiamas žemo lygio, nestilių, prieinamų komponentų rinkinys, kurį galite naudoti kaip savo programos sudedamąsias dalis.

Naudodami Radix vartotojo sąsają galite sutelkti dėmesį į savo programos funkcionalumą, nesijaudindami dėl pagrindinių vartotojo sąsajos sudėtingumo. Nesvarbu, ar esate patyręs kūrėjas, ar pradedantysis, Radix UI gali padėti sukurti aukštos kokybės, patogias žiniatinklio sąsajas.