Erişilebilir bileşenler oluşturmanıza yardımcı olacak bir React kütüphanesi arıyorsanız doğru yerdesiniz!

React Aria Components, React Aria kancalarının üzerine inşa edilmiş, stillendirilmemiş bileşenlerden oluşan bir koleksiyon içeren bir kütüphanedir.

Adobe tarafından geliştirilmiştir ve kapsamlı bir içerik oluşturmayı amaçlayan React Spectrum projesinin bir parçasıdır. Geliştiricilerin uyarlanabilir, erişilebilir ve güçlü kullanıcılar oluşturmasına yardımcı olan kitaplıklar ve araçlar koleksiyonu deneyimler.

React Aria Bileşenlerini Anlamak

React Aria Bileşenleri WAI-ARIA (Web Erişilebilirlik Girişimi - Erişilebilir Zengin İnternet Uygulamaları) en iyi uygulamalarına göre erişilebilirlik, kullanıcı etkileşimleri ve davranış sağlar. React Aria kütüphanesinin aksine React kancalarını kullanır Bileşenlerinizi oluşturmak için.

React Aria Components kitaplığı, düğmeler, onay kutuları, kaydırıcılar vb. dahil olmak üzere önceden oluşturulmuş bir dizi bileşen sunar. Bu bileşenler, uygulamanın görünümünü ve hissini istediğiniz gibi tasarlamanıza olanak verecek şekilde tasarlanmamıştır.

instagram viewer

React Aria Bileşenlerini Kullanmanın Yararları

React Aria Components kütüphanesi aşağıdakiler de dahil olmak üzere birçok avantaj sunar:

  • Ulaşılabilirlik: React Aria bileşenleri, WAI-ARIA'nın en iyi uygulamalarını takip ederek, yardımcı teknolojileri kullananlar da dahil olmak üzere uygulamanızın tüm kullanıcılar tarafından erişilebilir olmasını sağlar.
  • Esneklik: React Aria bileşenleri stilsiz olarak gelir ve tasarım sisteminizi kısıtlama olmadan uygulamanıza olanak tanır.
  • Kullanıcı Etkileşimleri: React Aria, klavye, fare ve dokunma etkileşimleri de dahil olmak üzere kullanıcı etkileşimlerinin sağlam bir şekilde yönetilmesini sağlar.
  • Uluslararasılaşma: React Aria, sağdan sola yazılan dilleri, tarih ve sayı formatını ve daha fazlasını destekleyerek uluslararası uygulamalar oluşturmayı kolaylaştırır.

React Aria Bileşenleriyle React Uygulamaları Oluşturma

React Aria Components'ı kullanarak basit bir React uygulaması oluşturmayı inceleyelim. React Aria Components kütüphanesini React uygulamalarınızda kullanmadan önce bir React projesi oluşturmalısınız. Vite bunu yapmanın harika bir yoludur.

React Uygulamanızı Oluşturma

Vite kullanarak React uygulamanızı oluşturmak için terminalinizde aşağıdaki kodu çalıştırın:

npm init vite

Yukarıdaki kodu çalıştırmak, yeni React projenizi oluşturmanıza yardımcı olacak bir dizi istem başlatacaktır.

Örneğin:

Projenizi oluşturduktan sonra gerekli bağımlılıkları kurmanız gerekecektir. Bunu yapmak için terminalinizde aşağıdaki kodu çalıştırın:

cd react-aria-app
npm install

Mevcut dizininizi projenin dizinine değiştirecek ve ardından gerekli bağımlılıkları yükleyecektir. React uygulamanızı oluşturduktan sonra uygulamanıza erişilebilirlik özellikleri eklemek için React Aria Components kütüphanesini kurabilirsiniz.

React Aria Bileşenlerini Yükleme

React Aria Components kütüphanesini npm veya iplik kullanarak kurabilirsiniz. Npm aracılığıyla kurmak için terminalinizde aşağıdaki komutu çalıştırın:

npm install react-aria-components

Alternatif olarak, iplik yoluyla kurulum yapmak için şu kodu çalıştırın:

yarn add react-aria-components

Artık React Aria Components kütüphanesini kurduğunuza göre bileşenlerini uygulamanızda kullanabilirsiniz.

React Aria Bileşenlerini Kullanma

React Aria Components kütüphanesi, geliştirme sürecini kolaylaştıran ve hızlandıran çeşitli bileşenler sunar. Kitaplığın bileşenini kullanmak için onu uygulamanıza aktarın ve oluşturun.

Örneğin:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (







exportdefault App;

Yukarıdaki kod bloğu içe aktarır Düğme, Popover, İletişim Tetikleyicisi, Ve Diyalog gelen bileşenler reaksiyon-aria-bileşenleri modülü. İçe aktarılan tüm bileşenler, tıklandığında açılan pencereyi görüntüleyen basit bir düğme oluşturur.

İletişim Tetikleyicisi bileşen bir iletişim kutusunun veya açılır pencerenin görünürlüğünü kontrol eder. İçinde İletişim Tetikleyicisi, orada Düğme bileşen. Bu düğme, ekranın görünürlüğünü tetikler. Popover Ve Diyalog.

Popover bileşen, kullanıcı arayüzünün geri kalanında açılan bir kaptır; Diyalog bileşen, içeriği uygulamanın üzerindeki bir katmanda görüntüler. İçinde Popover bileşen bir Diyalog metin içeren bileşen "Düğmeye tıkladınız."

Düğmeye tıklamak metni içeren bir açılır pencere görüntüleyecektir "Düğmeye tıkladınız" Ekranınızda arayüzünüze aşağıdaki resme benzer bir görünüm kazandırın.

Yukarıdaki resimde görebileceğiniz gibi, tercih ettiğiniz stili seçebilmeniz için kitaplığın bileşenleri stillendirilmemiş olarak gelir.

Bileşenlerinizi Şekillendirme

React Aria Bileşenleri biçimlendirilmemiş olarak geldiğinden, bunları istediğiniz gibi biçimlendirebilirsiniz. Kullanabilirsiniz Basamaklı Stil Sayfaları (CSS), Tailwind CSS, stil bileşenleri veya tercih ettiğiniz başka herhangi bir stil yöntemi.

Farklı özel geçiş yapabilirsiniz sınıf İsimleri bileşenlere gidin ve ardından CSS dosyanızdaki CSS sınıflarını tanımlayın.

İşte bir örnek:

import React from"react";
import { Button, Popover, DialogTrigger, Dialog } from"react-aria-components";
functionApp() {
return (







exportdefault App;

Bu örnekte, bir tanımlıyorsunuz sınıf adı için Düğme, Popover, Ve Diyalog bileşenler. Artık CSS dosyanızdaki bileşenlere stil verebilirsiniz.

.button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.dialog{
outline: none;
}

Bileşenlerinizin stillerini tanımladıktan sonra düğmeniz ve açılır pencereniz buna benzer görünmelidir.

Özel bir tanımlama yapmak istemiyorsanız sınıf adı React Aria Components kütüphanesi, bileşenleriniz için varsayılan bir sınıf adı her bileşen için. Varsayılan sınıf adı dır-dir tepki-aria-bileşenAdı, Neresi Bileşen Adı stil vermek istediğiniz bileşenin adıdır.

Örneğin:

.react-aria-Button{
margin-block-start: 1rem;
border: none;
color: #f2f2f2;
background-color: #333333;
padding: 0.7rem 0.8rem;
border-radius: 12px;
font-family: cursive;
}
.react-aria-Popover{
padding: 1rem;
background-color: antiquewhite;
border-radius: 12px;
}
.react-aria-Dialog{
outline: none;
}

Yukarıdaki CSS kod bloğunun bu stilleri her şeye uygulayacağını unutmayın. Düğme, Popover, Ve Diyalog Uygulamanızda kullandığınız bileşen.

Erişilebilir ve Etkileşimli React Uygulamaları Oluşturun

React Aria Components, erişilebilir ve etkileşimli React uygulamaları oluşturmaya yönelik güçlü bir kütüphanedir. WAI-ARIA'nın en iyi uygulamalarına göre kullanıcı etkileşimlerini ve erişilebilirliği yöneten bileşenler sağlar. Çok sayıda bileşen ve esneklik sunan bir bileşen kütüphanesi arıyorsanız React Aria Components mükemmel bir seçimdir.

React Aria Bileşenleri kitaplığının yanı sıra, güzel React uygulamaları oluşturmak için kullanabileceğiniz başka biçimlendirilmemiş bileşen kitaplıkları da vardır. Bu kütüphanelerden biri Radix UI'yi içerir. Radix UI, yüksek kaliteli React uygulamaları oluşturmaya yönelik, stillendirilmemiş bir bileşen kitaplığıdır. React Aria Components'a harika bir alternatiftir.