Bu kitaplık, uygulamanızda kullanabileceğiniz ve daha da geliştirebileceğiniz temiz, genişletilebilir bileşenler sağlar.

Radix UI, yüksek kaliteli, kullanıcı dostu web arayüzleri oluşturmak için düşük seviyeli, stilsiz, erişilebilir bir bileşen kitaplığıdır. Tasarımınıza uyacak şekilde kolayca şekillendirebileceğiniz tam özellikli bileşenlere sahip uygulamalar oluşturmak için React ile birlikte kullanabilirsiniz.

Radix Kullanıcı Arayüzü Nedir?

Radix UI, React uygulamaları için ilkel, stilsiz, erişilebilir UI bileşenlerinden oluşan bir koleksiyondur. Tasarım sisteminizi oluşturmak için ihtiyacınız olan yapı taşlarını sağlar.

Radix UI'nin temel amacı, yeniden kullanılabilir bileşenler oluşturmanıza yardımcı olan bir dizi düşük seviye yardımcı bileşen sağlamaktır. Bileşenler varsayılan olarak biçimlendirilmemiş olarak gelir, bu da onların stili üzerinde tam kontrole sahip olduğunuz anlamına gelir.

React Uygulamanızı Kurma

Radix UI'yi kullanmak için bir React uygulaması kurmalısınız. Bunu yapmak için, Node.js'ye sahip olmanız ve npm, Düğüm paket yöneticisi, bilgisayarınızda yüklü.

instagram viewer

Bunlar yüklendiğinde, şu terminal komutuyla yeni bir React uygulaması oluşturabilirsiniz:

npm init vite

Bu komut Vite'ı başlatacak. Vite, modern web uygulamalarını hızlı bir şekilde oluşturmanıza olanak tanıyan, hızlı oluşturulan bir araçtır. Yapabilirsiniz React uygulamanızı oluşturmak için Vite kullanın.

Yukarıdaki komutu çalıştırdıktan sonra, React uygulamanızı yapılandırmak için bir dizi istemi yanıtlayacaksınız. Bir React uygulaması oluşturun, adlandırın radix-ui-uygulamasıve TypeScript dilini kullandığından emin olun.

Ardından, yeni uygulamanızın kök dizinine girin ve gerekli bağımlılıkları kurun:

cd radix-ui-app
npm install

React uygulamanız artık hazır.

Radix Kullanıcı Arayüzünü Yükleme

Sayı tabanı kullanıcı arayüzü harika bir bileşen kitaplığıy erişilebilir React uygulamaları oluşturmak için kullanabileceğiniz. Her bileşeni ayrı ayrı ayrı bir paket olarak kurmanıza izin verir. Kurmak için komutunuzda bileşenin adını belirteceksiniz.

Örneğin:

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

Bu, Radix UI açılır menü bileşenini yükleyecektir. Radix UI, ihtiyaçlarınıza göre kurabileceğiniz birçok başka bileşene sahiptir.

Uygulamanızı Radix UI Kullanarak Oluşturma

Artık Radix UI'den açılır menü bileşenini yüklediğinize göre, Radix UI kullanarak basit bir açılır menü oluşturabilirsiniz. Bunu yapmak için, önce Radix UI açılır menü bileşeninden gerekli bileşenleri içe aktaracaksınız.

İşte Radix kullanarak nasıl basit bir açılır menü oluşturabileceğinizi gösteren bir örnek:

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;

Bu kod, tüm bileşenleri @radix-ui/react-dropdown-menu olarak paketle Aşağıya doğru açılan menü. Daha sonra, içinde bir açılır menü oluşturmak için bu bileşenleri kullanır. div eleman.

bu Aşağıya doğru açılan menü. Kök açılır menünün kök bileşenidir. Diğer tüm açılır menü bileşenlerini bunun içine yerleştirmeniz gerekir. Açılır menü için bir tetikleyici tanımlayabilirsiniz. Aşağıya doğru açılan menü. Tetiklemek bileşen. Bu durumda, tetikleyici bir düğme "Beni Tıkla" metni olan öğe. Düğmeye tıkladığınızda, açılır menü görünecektir.

İle Aşağıya doğru açılan menü. İçerik bileşen, açılır menünün içeriğini ve Aşağıya doğru açılan menü. Grup bileşen, ilgili menü öğelerinin bir grubunu temsil eder. sen kullanıyorsun Aşağıya doğru açılan menü. Öğe açılır menünün ayrı öğelerini tanımlamak için bileşen.

Bu örnekte, iki DropdownMenu vardır. Her biri tek bir DropdownMenu içeren grup bileşenleri. Öğe bileşeni. Bu bileşenlerin tümü bir DropdownMenu'ye sarılmıştır. İçerik bileşeni.

Yukarıdaki kod bloğunu oluşturmak, arayüzünüzü şöyle görünecek şekilde değiştirecektir:

Gördüğünüz gibi, sonuçlarda herhangi bir stil yok, bu nedenle daha sonra kendi CSS'nizi eklemeniz gerekecek.

Radix UI Bileşenlerinizi Şekillendirme

Radix UI'nin avantajlarından biri, bileşenlerinize herhangi bir stil uygulamamasıdır. Bu, bileşeninizin stili üzerinde tam kontrole sahip olduğunuz anlamına gelir. Stil verilmiş bileşenler ve duygu gibi CSS-in-JS kitaplıklarını kullanarak bileşenlerinize stil uygulayabilir veya geleneksel CSS kullanabilirsiniz.

Radix UI bileşenlerinizi geleneksel CSS kullanarak nasıl şekillendireceğinize bir örnek:

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





"trigger">


exportdefault App;

Bu örnek ekler sınıf adı desteklemek düğme eleman, Aşağıya doğru açılan menü. Tetiklemek, Aşağıya doğru açılan menü. İçerik, ve Aşağıya doğru açılan menü. Öğe bileşenler.

Sınıfları uyguladıktan sonra, CSS kullanarak bileşenlerin stilini belirleyebilirsiniz:

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

Yukarıdaki kod bloğu, daha çekici bir görünüm için tanımlanan stilleri bileşenlere uygulayacaktır:

Radix UI ayrıca React Icons sunar, böylece uygulamanızı biraz daha güzelleştirmek için simgeler ekleyebilirsiniz. Radix UI simgeler paketini kurarak başlayın:

npm install @radix-ui/react-icons

Paketi kurduktan sonra, bazı simgelerini uygulamanızda kullanabilirsiniz.

Örneğin:

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;

Bu örnek ekler HamburgerMenüSimgesi Ve Artı Simgesi uygulamaya İlki, bir düğme bileşeninin içindedir ve ikincisi, birincisini artırır Yıkılmak. Öğe bileşen.

Ardından, güncelleyin .öğe CSS dosyanızdaki sınıf:

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

Şimdi başvurunuz böyle görünmelidir.

Radix Kullanıcı Arayüzünü Kullanarak Kaliteli React Uygulaması Oluşturun

Radix UI, React uygulamaları oluşturmak için güçlü bir araçtır. Uygulamanız için yapı taşları olarak kullanabileceğiniz bir dizi düşük seviyeli, stilsiz, erişilebilir bileşen sağlar.

Radix UI kullanarak, temel UI karmaşıklıkları hakkında endişelenmeden uygulamanızın işlevselliğine odaklanabilirsiniz. İster deneyimli bir geliştirici olun ister yeni başlayan biri olun, Radix UI yüksek kaliteli, kullanıcı dostu web arayüzleri oluşturmanıza yardımcı olabilir.