Pustaka ini memberi Anda komponen bersih dan dapat diperluas yang dapat Anda gunakan di aplikasi Anda, dan kembangkan lebih lanjut.

Radix UI adalah pustaka komponen tingkat rendah, tanpa gaya, dan dapat diakses untuk membangun antarmuka web yang ramah pengguna dan berkualitas tinggi. Anda dapat menggunakannya bersama dengan React untuk membuat aplikasi dengan komponen berfitur lengkap yang dapat Anda gaya dengan mudah agar sesuai dengan desain Anda.

Apa itu Radix UI?

Radix UI adalah kumpulan komponen UI primitif, tanpa gaya, dan dapat diakses untuk aplikasi React. Ini menyediakan blok bangunan yang Anda butuhkan untuk membuat sistem desain Anda.

Tujuan utama Radix UI adalah menyediakan sekumpulan komponen utilitas tingkat rendah yang membantu Anda membuat komponen yang dapat digunakan kembali. Komponen datang tanpa gaya secara default, artinya Anda memiliki kontrol penuh atas gaya mereka.

Menyiapkan Aplikasi React Anda

Anda harus menyiapkan aplikasi React untuk menggunakan Radix UI. Untuk melakukannya, Anda harus memiliki Node.js dan

instagram viewer
npm, manajer paket Node, terinstal di komputer Anda.

Dengan menginstal ini, Anda dapat membuat aplikasi React baru dengan perintah terminal ini:

npm init vite

Perintah ini akan menginisialisasi Vite. Vite adalah alat pembuatan cepat yang memungkinkan Anda membuat aplikasi web modern dengan cepat. Kamu bisa gunakan Vite untuk membuat aplikasi React Anda.

Setelah menjalankan perintah di atas, Anda akan menjawab serangkaian perintah untuk mengonfigurasi aplikasi React Anda. Buat aplikasi React, beri nama radix-ui-app, dan pastikan itu menggunakan bahasa TypeScript.

Selanjutnya, masuk ke direktori root aplikasi baru Anda dan instal dependensi yang diperlukan:

cd radix-ui-app
npm install

Aplikasi React Anda sekarang sudah siap.

Menginstal Radix UI

UI Radix adalah pustaka komponen yang bagusy yang dapat Anda gunakan untuk membuat aplikasi React yang dapat diakses. Ini memungkinkan Anda menginstal setiap komponen satu per satu sebagai paket terpisah. Anda akan menentukan nama komponen dalam perintah Anda untuk menginstalnya.

Misalnya:

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

Ini akan menginstal komponen menu dropdown Radix UI. Radix UI memiliki banyak komponen lain yang dapat Anda instal tergantung kebutuhan Anda.

Bangun Aplikasi Anda Menggunakan Radix UI

Sekarang setelah Anda menginstal komponen menu dropdown dari Radix UI, Anda dapat membuat menu dropdown sederhana menggunakan Radix UI. Untuk melakukan ini, pertama-tama Anda akan mengimpor komponen yang diperlukan dari komponen menu tarik-turun Radix UI.

Berikut adalah contoh yang menunjukkan bagaimana Anda dapat membuat menu tarik-turun sederhana menggunakan 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;

Kode ini mengimpor semua komponen dari @radix-ui/react-dropdown-menu paket sebagai Menu drop down. Kemudian menggunakan komponen ini untuk membuat menu dropdown di dalam div elemen.

Itu Menu drop down. Akar adalah komponen root dari menu dropdown. Anda harus menyarangkan semua komponen menu tarik-turun lainnya di dalam komponen ini. Anda dapat menentukan pemicu untuk menu dropdown menggunakan Menu drop down. Pemicu komponen. Dalam hal ini pemicunya adalah a tombol elemen dengan teks "Klik Saya". Ketika Anda mengklik tombol, menu dropdown akan muncul.

Dengan Menu drop down. Isi komponen, Anda menentukan konten menu tarik-turun dan Menu drop down. Kelompok komponen mewakili sekelompok item menu terkait. Anda menggunakan Menu drop down. Barang komponen untuk menentukan masing-masing item dari menu tarik-turun.

Dalam contoh ini, ada dua DropdownMenu. Kelompokkan komponen, yang masing-masing berisi satu DropdownMenu. Komponen barang. Semua komponen ini terbungkus dalam DropdownMenu. Komponen konten.

Merender blok kode di atas akan mengubah antarmuka Anda menjadi seperti ini:

Seperti yang Anda lihat, hasilnya tidak memiliki gaya apa pun, jadi selanjutnya Anda harus menambahkan CSS Anda sendiri.

Menata Komponen Radix UI Anda

Salah satu kelebihan Radix UI adalah tidak memaksakan gaya apa pun pada komponen Anda. Ini berarti Anda memiliki kendali penuh atas gaya komponen Anda. Anda dapat mengatur gaya komponen Anda menggunakan pustaka CSS-in-JS seperti komponen gaya dan emosi, atau Anda dapat menggunakan CSS tradisional.

Berikut adalah contoh cara menata komponen Radix UI Anda menggunakan CSS tradisional:

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





"trigger">


exportdefault App;

Contoh ini menambahkan nama kelas menopang ke tombol elemen, itu Menu drop down. Pemicu, itu Menu drop down. Isi, dan Menu drop down. Barang komponen.

Setelah menerapkan kelas, Anda kemudian dapat memberi gaya pada komponen menggunakan 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;
}

Blok kode di atas akan menerapkan gaya yang ditentukan ke komponen untuk tampilan yang lebih menarik:

Radix UI juga menawarkan React Icons, sehingga Anda dapat menambahkan ikon ke aplikasi Anda untuk lebih mempercantiknya. Mulailah dengan menginstal paket ikon Radix UI:

npm install @radix-ui/react-icons

Setelah menginstal paket, Anda dapat menggunakan beberapa ikonnya di aplikasi Anda.

Misalnya:

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;

Contoh ini menambahkan HamburgerMenuIcon Dan Ikon Plus ke aplikasi. Yang pertama ada di dalam komponen tombol, dan yang terakhir menambah yang pertama Drop-down. Barang komponen.

Selanjutnya, perbarui .barang kelas dalam file CSS Anda:

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

Sekarang aplikasi Anda akan terlihat seperti ini.

Bangun Aplikasi React Berkualitas Menggunakan Radix UI

Radix UI adalah alat yang ampuh untuk membangun aplikasi React. Ini menyediakan satu set komponen tingkat rendah, tanpa gaya, dan dapat diakses yang dapat Anda gunakan sebagai blok penyusun untuk aplikasi Anda.

Dengan menggunakan Radix UI, Anda dapat fokus pada fungsionalitas aplikasi Anda tanpa mengkhawatirkan kerumitan UI yang mendasarinya. Apakah Anda seorang pengembang berpengalaman atau pemula, Radix UI dapat membantu Anda membangun antarmuka web yang ramah pengguna dan berkualitas tinggi.