Ariakit, açıkça tanımlanmış ortak duruma ve birleştirilebilir erişilebilir parçalara sahip, stilsiz React bileşenleri sunar. Combobox, yazılan metni onaylanmış seçimden ayırdığı için arama tabanlı seçicilerde kullanışlıdır; aşağıdaki referans bulucu, gruplandırılmış ve kullanılamayan sonuçlarla bu farkı gösterir.
Yerel @ariakit/react 0.4.40 ve React 19. Tüm görsel belirteçler ve örnek referans içeriği özgündür. · Uygulama başvurusu
02
Ariakit Tasarım Sistemi Tasarım Referansı
Ariakit React 0.4.40, stilsiz bir erişilebilirlik araç setidir. Aşağıda belirtilen sayfa paletini, yazı tipi ölçeğini veya aralıkları yerleşik bir tasarım teması olarak sunmaz. Tüm --app-* değerleri, çalıştırılabilir bu örnek için açıkça tanımlanmış özgün bir yapılandırmadır; bileşen adları ve durum nitelikleri Ariakit API’leridir.
Ariakit Tasarım Sistemi: Combobox Durum Modeliyle Başlayın
Combobox Durum Modeliyle Başlayın
Ariakit ComboboxProvider bileşeni etiketi, düzenlenebilir girdiyi, açılır pencere kontrolünü, açılır pencereyi ve seçenekleri birbirine bağlar. Sağlayıcı, bileşenlerin her biri yapının kendi bölümünü sunarken ortak etkileşim durumunu yönetir. Böylece arama alanı ve seçili ayrıntı paneli, her tuş vuruşu yeni bir seçimmiş gibi ele alınmadan birbirinden bağımsız düzenlenebilir.
Referans bulucu, adı belirtilmiş iki grupta altı kayıt gösterir. Filtreleme uygulamanın kayıt koleksiyonuna, gezinme ve seçenek belirleme ise yerel combobox’a aittir. Statik kayıtları başka bir veri kaynağıyla değiştirirken bu sınırı açıkça korumak yararlıdır: filtrelenmiş sonuç kümesiyle o anda onaylanmış öğe her zaman aynı değildir.
Ariakit Tasarım Sistemi: Arama Metni ile Onaylanmış Seçim Farklı Durumlardır
Arama Metni ve Onaylanmış Seçim Farklı Durumlardır
Örnek, yazılan metin için inputValue ve setInputValue’ı; seçilen referans içinse selectedValue ve setSelectedValue’ı denetler. Doğrulanan 0.4.40 API sürümünde inputValue, girdi durumunun güncel adıdır; eski örneklerde kullanımdan kaldırılmış value/setValue takma adları görülebilir. Eksiksiz kodda güncel adlar kullanılır.
“color” yazmak önerileri daraltır ancak görüntülenen ayrıntı kartını hemen değiştirmez. Color roles seçildiğinde bu öğe onaylanır ve panel güncellenir. Aramayı temizlemek de son seçili referansı olduğu gibi bırakır. Her kısmi sorguyu onaylanmış bir değer gibi ele almak, ayrıntı görünümünün geçersiz veya mevcut olmayan kayıtlara atlamasına neden olur.
Ariakit Tasarım Sistemi: Etiketi, Girdiyi, Açılır Pencere Kontrolünü ve Açılır Pencereyi Bağlayın
Etiket, Girdi, Açılır Alan ve Popover'ı Bağlayın
ComboboxProvider, ortak durumu ComboboxLabel, Combobox, ComboboxDisclosure ve ComboboxPopover bileşenlerine sağlar. Görünür etiket girdiyi tanımlar. Açılır pencere kontrolü, erişilebilir adı açıkça belirtilmiş ayrı bir düğmedir; açılır pencere ise bağlantı noktasıyla hizalı kalmak için sameWidth ve sekiz piksellik bir gutter kullanır.
Her sonuç, kararlı bir value değerine sahip ComboboxItem bileşenidir. Foundations ve Components bölümleri, ComboboxGroupLabel başlıkları içeren yerel ComboboxGroup bölümleridir. Yapılandırılmamış bir listeye görsel olarak kalın bir başlık eklemek aynı gruplama ilişkisini ifade etmez; yerel bileşen yapısı bu ilişkiyi klavye modeliyle birlikte tanımlar.
Ariakit Tasarım Sistemi: Yerel Öğeleri Görüntülemeden Önce Verileri Filtreleyin
Yerel Öğeleri Görüntülemeden Önce Verileri Filtreleyin
Örnek koleksiyonda kullanılabilir beş referans ve özellikle kullanılamaz olarak işaretlenmiş Experimental grid bulunur. Filtreleme, uygulama düzeyinde her referans adına büyük/küçük harf duyarsız alt dize eşleşmesi uygular. İki grup yalnızca eşleşen kayıt içerdiğinde görüntülenir; böylece sonuçlar arasında boş başlıklar oluşmaz.
Hiç sonuç vermeyen bir sorgu, aramayı temizlemeyi veya “color” denemeyi öneren özel bir ileti gösterir. Bu ileti seçilebilir bir seçeneğe dönüştürülmez. Devre dışı kayıt, eşleştiğinde görünür kalır ve Unavailable etiketi taşır; yerel disabled prop’u ise bu kaydın onaylanmış seçim olmasını engeller.
Ariakit Tasarım Sistemi: Gerçek Aşağı ve Enter Akışını Doğrulayın
Aşağı Ok ve Enter ile Gerçek Akışı Doğrulayın
Örnekte autoSelect kapalıdır. Bir sorgu yazdıktan sonra Aşağı tuşu öneri listesine geçer, Enter ise etkin öğeyi seçer. Escape açılır pencereyi kapatır. Bu davranış, yalnızca bir açılır listenin görünüp görünmediğine göre değil, seçili ayrıntı başlığı denetlenerek doğrulanmıştır.
Otomatik vurgulama başka bir üründe uygun olabilir ancak ok tuşlarıyla gezinmenin başlangıç noktasını değiştirir. Önceden etkinleştirilmiş tek bir sonuç varsa Aşağı tuşuna bir kez daha basmak odağı girdiye geri taşıyabilir. Örnek, bu uyumsuzluğu önler ve etkin öğeyi data-active-item aracılığıyla biçimlendirerek klavyedeki konumu kayıtlı okuma listesi üyeliğinden ayrı tutar.
“color” yazın ve eşleşen seçeneğin görünmesini bekleyin.
Aşağı tuşuna, ardından Enter’a basın ve Color roles ayrıntı panelini inceleyin.
Kullanılamayan veya mevcut olmayan bir referansı arayın ve yanlışlıkla seçim yapılmadığını doğrulayın.
Ariakit Tasarım Sistemi: Etkin Seçenek, Odak Halkası ve Kayıtlı Durum İçin Farklı İşaretler Kullanın
Etkin Seçenek, Odak Halkası ve Kaydedilmiş Durum Farklı İpuçları Kullanır
Girdi ve açılır pencere kontrolü görünür odak çerçeveleri kullanır. Etkin seçenek, yerel data-active-item niteliğiyle açık yeşil bir arka plan ve bir piksellik iç çerçeve alır. Devre dışı seçeneklerin vurgusu azaltılır ve açık metin etiketleri korunur. Bu stiller yalnızca üzerine gelme durumuna dayanmaz.
Seçili referans okuma listesine eklendiğinde Ekle düğmesi devre dışı kalır ve metni değişir. Bu kayıtlı durum uygulamaya aittir ve combobox’ta o anda etkin olan sonuçtan ayrıdır. Açık yeşil kayıtlı eylem yüzeyi, devre dışı bir eylemin başka bir etkin birincil düğme gibi görünmesini önler.
Ariakit Tasarım Sistemi: Okuma Listesi Geçerli Referansın Yerini Almaz
Okuma Listesi Geçerli Referansın Yerini Tutmaz
Bir referansın eklenmesi, adını yerel bir diziye yalnızca bir kez ekler; kullanıcı notlarını inceleyebilsin diye geçerli referans görünür kalır. Okuma listesindeki her satırın adı açıkça belirtilmiş bir Kaldır düğmesi vardır. Bir öğe kaldırıldığında ve ilgili referans hâlâ seçiliyse Ekle yeniden etkinleşir. Öğe sayısı dizinin uzunluğundan hesaplanır.
Örnek ayrıntı içeriği, bulucuyu keşfetmeyi kolaylaştırmak için tipografi, aralıklar ve bileşenlerle ilgili yönergeler içerir. Değerlerin özgün örnek içerik olduğu açıkça belirtilmiştir. Okuyucu, Type scale kaydındaki “Display 36px” değerini Ariakit tipografi belirteci sanmamalıdır; Ariakit bu tasarım dilini sağlamaz.
Ariakit Tasarım Sistemi: Açılır Pencereye, Tüm Sayfayı Yeniden Boyutlandırmadan Yer Açın
Açılır Pencereye, Tüm Sayfayı Yeniden Boyutlandırmadan Yer Açın
Açılır pencere girdi genişliğini izler ve kendi yüksekliğini en fazla 340px ile sınırlar. Sonuç koleksiyonu büyüdüğünde seçili ayrıntı kartı normal belge içeriği olarak kalırken bu sınırın içindeki liste kaydırılır. Ayrıntı kartı başka bir sütuna taşınsa bile girdi, açılır pencere kontrolü ve seçenek açılır penceresini birbirine bağlı tutun; bir öğe onaylandığında aynı seçili kayıt güncellenmelidir.
Bulucu ve ayrıntı kartı, özgün 700px kesme noktasında alt alta yerleşir. Arama kontrolleri, klavye ipucu ve okuma listesi belge sıralamasında seçili karttan önce kalır. Dekoratif referans görseli yardımcı teknolojilere gizlenir; çünkü asıl anlamı başlık ve notlar aktarır.
Uzun bir seçenek listesini yerel olarak sınırlandırırken öğeler arasındaki okunabilir aralıkları koruyun.
Onaylanmış ayrıntı panelini geçici açılır pencerenin dışında tutun.
Mobilde görünür girdi etiketlerini ve klavye ipuçlarını koruyun.
Ariakit Tasarım Sistemi: Sağlayıcıyı, Koleksiyonu ve Stil Sayfasını Birleştirin
Sağlayıcıyı, Koleksiyonu ve Stil Sayfasını Birleştirin
@ariakit/react 0.4.40 paketini React projesine yükleyin ve App.jsx dosyasındaki sağlayıcı/bileşen bileşimini eksiksiz koruyun. Güncel örnek, inputValue/setInputValue ve selectedValue/setSelectedValue çiftlerini birbirinden ayrı ve denetimli olarak kullanır. Geçerli girdi sorgusu açılır penceredeki sonuçları filtrelese bile seçili kaydı erişilebilir tutun.
Sağlanan style.css dosyasını bileşenin yanında içe aktarın. data-active-item kuralı combobox’ın klavye konumunu, kayıtlı liste stilleri ise uygulama durumunu izler. Sonuçları eş zamansız yüklenen verilerle değiştirirken bu iki durum kanalını ve grup/seçenek ilişkilerini koruyun; onaylanmış ayrıntı panelini ara sorgu metniyle değiştirmeyin.
Sağlayıcı, etiket, girdi, açılır pencere kontrolü, gruplandırılmış açılır pencere öğeleri ve yerel okuma listesi eylemleri.
jsx
import React,{useState} from 'react';
import * as Ariakit from '@ariakit/react';
const resources=[{name:'Type scale',group:'Foundations',code:'Aa',description:'A compact editorial hierarchy for headings, supporting text and labels.',notes:['Display · 36px / 1.1','Section · 24px / 1.25','Body · 16px / 1.6'],color:'#f0dbc3'},{name:'Color roles',group:'Foundations',code:'◐',description:'Separate surface, text, boundary and action roles before naming brand colors.',notes:['Canvas and raised surface','Primary and muted text','Action and on-action pair'],color:'#d6e5d8'},{name:'Spacing rhythm',group:'Foundations',code:'▥',description:'Use a small set of intervals to show relationships between content groups.',notes:['8px within a compact group','16px between related controls','32px between sections'],color:'#d6dfee'},{name:'Form field',group:'Components',code:'⌑',description:'Keep the label, hint, input and error message in one understandable group.',notes:['Persistent visible label','Hint before an error exists','Error connected to the input'],color:'#e9d8de'},{name:'Navigation menu',group:'Components',code:'☷',description:'A small set of destinations with a visible current location and keyboard access.',notes:['Destination labels describe content','Current item has a text/state cue','Collapsed layout keeps names'],color:'#e7e0c5'},{name:'Experimental grid',group:'Components',code:'▦',description:'Unavailable in this sample collection.',notes:[],color:'#e3e3e3',disabled:true}];
export default function App(){const[query,setQuery]=useState(''),[chosen,setChosen]=useState('Type scale'),[saved,setSaved]=useState([]);const selected=resources.find(x=>x.name===chosen)||resources[0],matches=resources.filter(x=>x.name.toLowerCase().includes(query.toLowerCase()));return <main className="resource-finder"><header><p className="eyebrow">ARIAKIT · ACCESSIBLE PRIMITIVES</p><h1>A reference, within reach.</h1><p>Search a small collection with the keyboard, inspect the result and keep a local reading list.</p></header><div className="finder-grid"><section className="search-area"><Ariakit.ComboboxProvider inputValue={query} setInputValue={setQuery} selectedValue={chosen} setSelectedValue={setChosen}><Ariakit.ComboboxLabel className="label">Find a reference</Ariakit.ComboboxLabel><div className="input-row"><Ariakit.Combobox className="combobox" placeholder="Try type, color or form" /><Ariakit.ComboboxDisclosure className="disclosure" aria-label="Show reference suggestions">⌄</Ariakit.ComboboxDisclosure></div><Ariakit.ComboboxPopover gutter={8} sameWidth className="popover">{['Foundations','Components'].map(group=>{const items=matches.filter(x=>x.group===group);return items.length?<Ariakit.ComboboxGroup key={group}><Ariakit.ComboboxGroupLabel className="group-label">{group}</Ariakit.ComboboxGroupLabel>{items.map(x=><Ariakit.ComboboxItem key={x.name} value={x.name} disabled={x.disabled} className="combo-item"><span>{x.name}</span><small>{x.disabled?'Unavailable':x.group==='Foundations'?'Guide':'Pattern'}</small></Ariakit.ComboboxItem>)}</Ariakit.ComboboxGroup>:null})}{!matches.length&&<p className="empty" role="status">No matching reference. Try “color” or clear the search.</p>}</Ariakit.ComboboxPopover></Ariakit.ComboboxProvider><p className="hint">Type to filter. Use ↓ and ↑ to browse, Enter to choose, Escape to close.</p><div className="collection-note"><span>06</span><div><strong>Sample references</strong><p>Five available, one deliberately disabled to show an unavailable item.</p></div></div><section className="reading-list"><h2>Your reading list <small>{saved.length}</small></h2>{saved.length?<ul>{saved.map(name=><li key={name}><span>{name}</span><Ariakit.Button className="remove" onClick={()=>setSaved(saved.filter(x=>x!==name))} aria-label={`Remove ${name}`}>Remove</Ariakit.Button></li>)}</ul>:<p className="muted">Choose a reference, then add it here.</p>}<p className="local-note">This list stays in memory and clears on reload.</p></section></section><section className="reference-card" aria-label="Selected reference"><div className="reference-art" style={{background:selected.color}} aria-hidden="true"><span>{selected.code}</span><i></i></div><div className="reference-body"><p className="eyebrow">{selected.group} · SAMPLE CONTENT</p><h2>{selected.name}</h2><p>{selected.description}</p><ul className="note-list">{selected.notes.map(note=><li key={note}>{note}</li>)}</ul><Ariakit.Button className="primary" disabled={saved.includes(selected.name)} onClick={()=>setSaved([...saved,selected.name])}>{saved.includes(selected.name)?'Added to reading list':'Add to reading list'}</Ariakit.Button><p className="scope-note">These sample reference values are original content, not Ariakit design tokens.</p></div></section></div><p className="selection-status" role="status">Selected reference: {selected.name}</p></main>}
Ariakit davranış ve anlambilim sağlar; bu renk veya aralık sistemini değil.
Etkin sonuç, data-active-item aracılığıyla biçimlendirilir.
Açılır pencerenin kendine ait bir maksimum yüksekliği ve kaydırma alanı vardır.
04
Ariakit Tasarım Sistemi Ajanı Kurulumu
Uygulamaya Başlangıç Noktası
@ariakit/react 0.4.40 ve React 19 ile doğrulanmıştır. Güncel inputValue/setInputValue adlarını ve denetimli bir selectedValue değerini kullanır.
jsx
// Create the project first:
// npm create vite@latest ariakit-specimen -- --template react
// cd ariakit-specimen && npm install
// In a Vite React project:
// npm install @ariakit/[email protected] react@19 react-dom@19
// Save the complete component as App.jsx and the visual configuration as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
import './style.css';
createRoot(document.getElementById('root')).render(<App />);
// index.html contains <div id="root"></div>.
// No Ariakit theme stylesheet is required; style.css is this example's original theme.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
React içindeki sağlanan Ariakit 0.4.40 başvuru bulucusunu kullanın. ComboboxProvider inputValue/setInputValue değerlerini selectedValue/setSelectedValue değerlerinden bağımsız tutun; yerel etiketli grupları ve devre dışı Experimental grid seçeneğini koruyun, öğeleri oluşturmadan önce verileri filtreleyin. autoSelect kapalıyken doğrulanmış Aşağı ok ardından Enter yolunu koruyun ve data-active-item durumunu kayıtlı öğe üyeliğinden ayrı biçimlendirin. Yinelenen kayıt içermeyen yerel okuma listesine eklenen başvuruyu ekleyin ve geçerli ayrıntıyı kaybetmeden kaldırılmasına izin verin. Özgün stil sayfasının tamamını ekleyin.
05
Ariakit Tasarım Sistemi Kaynakları ve Kapsamı
Ariakit React 0.4.40. Tüm görsel belirteçler, çizimler ve örnek başvuru değerleri özgün yapılandırmadır; resmî bir Ariakit paleti veya tipografi ölçeği olduğu iddia edilmez. Okuma listesi durumu yereldir.
