Çok platformlu ve mobil kullanıcı arayüzü · Yeni kaynak
gluestack UI Tasarım Sistemi.
gluestack’in gerçek core Button ve Input oluşturucularını, açık v5 anlamsal renklerini ve eksiksiz React Native Web kaynak kodunu kullanarak bir saha kiti kontrol listesi oluşturun. Doğrulamayı, klavye eylemlerini, kararlı öğe kimliğini ve yerel olarak hesaplanan paketleme ilerlemesini inceleyin.
React Native Web 0.21.3 üzerinden gerçek @gluestack-ui/core 5.0.15 davranışı. Saha çantası düzeni, görselleri ve durum modeli özgün OpenDesign çalışmasıdır. Doğrudan oluşturucu kullanan bu tarayıcı örneğinde açıkça belirtilen stiller kullanılır; CLI ile oluşturulan NativeWind/Uniwind bileşen kümesi değildir ve iOS ya da Android’de test edilmemiştir. · Uygulama başvurusu
02
gluestack UI Tasarım Sistemi Tasarım Referansı
Referansta belgelenmiş v5 açık renkleri, kurulu temel oluşturucudan API ayrı tutulur. Doğrudan oluşturucular CLI temasını otomatik olarak uygulamaz. Önizlemede listelenen renkler özgün stillere açıkça eşlenir ve daha belirgin, özel bir odak çerçevesi kullanılır. Geometri ve görseller uygulamaya özgü tercihlerdir.
gluestack UI Tasarım Sistemi Sürümleri, Oluşturucular ve Üretilen Bileşenler
Gerçek uygulama yolunu seçin
gluestack birden fazla katmandan oluşur. Standart kurulum akışı, stillendirilmiş bileşenleri bir uygulamaya üretir. Bu incelemede ise kurulu temel paketten createButton ve createInput içe aktarılır ve React Native Web ana bileşenleri sağlanır. Bu ayrım önemlidir: yalnızca core paketini kurmak, üretilen düğme varyantlarını veya eksiksiz temayı sağlamaz.
Çalışan örnekte core 5.0.15 ve utils 5.0.6 sürümleri sabitlenmiştir. Örneğin React Native Web bağdaştırıcıları gerçek bileşenlerdir; uygulama kabuğu ve durum mantığı ise özgündür. Eksiksiz bir Expo veya Next.js uygulaması oluştururken kurulum belgelerini kullanın; bu tarayıcı incelemesini yeniden oluşturmak için buradaki dosyaların tamamından yararlanın.
gluestack UI Tasarım Sistemi Anlamsal Renkleri ve Açık Stil Kullanımı
Dekoratif seçimlere geçmeden önce rolleri eşleştirin
Sayfada beyaz bir tuval, koyu renkli birincil eylem, yumuşak tonlu destek alanları ve görünür kenarlık rolleri kullanılır. Bu değerler belgelenmiş v5 açık renk paletinden alınır, ardından React Native stiller ve sıradan CSS aracılığıyla açıkça atanır. Bunları sessizce uygulayan bir çalışma zamanı sağlayıcısı yoktur.
Geçersiz bir alanda, yıkıcı renkte kenarlık okunabilir bir açıklama ve odağı geri taşıma davranışıyla birlikte kullanılır. Özgün odak çerçevesi, belgelenmiş varsayılan halkadan daha koyudur; bu nedenle stil sayfasında bir kitaplık belirteciymiş gibi sunulmak yerine bu tercih açıkça belirtilir.
Geçişleri bilinçli biçimde yönetin
Sayısal palet adları kullanan eski örnekler, v5’in anlamsal adlandırma sözlüğüyle gelişigüzel biçimde bir arada kullanılmamalıdır. Belirteç adını değiştirmeden önce kurulu üretilmiş yapılandırmayı ve yükseltme kılavuzunu inceleyin. Doğrudan oluşturucu incelemesi, eksiksiz bir uygulama geçişinin tamamlandığını kanıtlamadan davranışı gösterebilir.
gluestack UI Tasarım Sistemi Button Bileşimi ve Klavye Eylemleri
Oluşturucuya gerekli tüm ana bileşenleri verin
createButton; Pressable, Text, View, ActivityIndicator ve bir simge ana bileşeni alır. Button ile Text, Group, Spinner ve Icon alt bileşenlerini döndürür. Eksiksiz örnekte, basılabilir köke düz metin yerleştirmek yerine Button.Text kullanılır.
Paketleme eşzamanlı bir durum geçişidir; bu nedenle yapay bir yükleme göstergesi veya kaydetme gecikmesi yoktur. Her eylemin erişilebilir etiketi, öğe adını içerir. Sıradaki etkinin net kalması için görünür eylem Pack item ile Unpack arasında değişir.
Oluşturulan davranışı doğrulayın
Pack item eylemine Sekme tuşuyla gidin ve Boşluk tuşuna basın.
Hem metinle belirtilen paketlenme durumunun hem de ilerleme değerinin değiştiğini doğrulayın.
Unpack eylemini kullanın ve aynı öğenin listede kaldığını doğrulayın.
Klavye desteğinin olduğunu fareyle üzerine gelmenin kanıtladığını varsaymak yerine odak çerçevesini inceleyin.
gluestack UI Tasarım Sistemi Input Bağlamı ve Eksiksiz Doğrulama
Saklanacak değeri doğrulayın
Giriş alanı, value ve onChangeText üzerinden denetimli kalır. Ekleme sırasında önce taslak metindeki boşluklar temizlenir, boş sonuç reddedilir ve ardından adlar büyük-küçük harf duyarsız biçimde karşılaştırılır. Reddedilen değer, kullanıcının düzeltebilmesi için alanda kalır.
Köke isInvalid ve isRequired verilir; gerçek alana etiket, açıklama başvurusu ve odağı geri yüklemek için bir ref sağlanır. Doğrulama uygulamaya aittir: temel bir giriş alanını gerekli olarak işaretlemek, yinelenen ad kuralını oluşturmaz.
Görünür tüm alan durumlarını yönetin
Başlangıç: alan boştur ve uzunluk ipucu görünür.
Geçersiz: açıklama bir uyarıda görünür ve alan odağı alır.
Düzenleme: kullanıcı taslağı değiştirdikçe eski hata metni temizlenir.
Kabul edildi: paketlenmemiş yeni bir satır eklenir, alan temizlenir ve durum bildirimi eklenen öğeyi belirtir.
gluestack UI tasarım sistemi Kararlı Kimlik ve Hesaplanan İlerleme
Öğeleri saklayın, özeti hesaplayın
Her öğenin kararlı bir sayısal id değeri, adı ve packed bayrağı vardır. Yeni id değerleri için bir ref kullanılır; görüntülenen ad, React anahtarı olarak kullanılmaz. Değiştirme işlemi id üzerinden eşleştirme yapar; böylece birbiriyle ilgisiz iki arayüz güncellemesi yanlışlıkla farklı bir satırı değiştirmez.
İlerleme payı packed bayraklarından, paydası ise geçerli listeden hesaplanır. Paketlenmemiş bir öğe eklemek, önceden paketlenmiş öğeleri kaybetmeden yüzdeyi düşürebilir. Bu, daha büyük bir kontrol listesinin beklenen sonucudur; animasyon hatası değildir.
Sıfırlamayı açık bir yerel eylem olarak uygulayın
Sıfırlama, örnek öğeleri geri yükler; taslağı ve hatayı temizler, sıradaki id değerini sıfırlar ve sonucu duyurur. Sayfa yeniden yüklendiğinde de örnek durumuyla başlar. Bu önizlemenin arkasında sunucu, hesap eşitlemesi veya kalıcı depolama yoktur.
gluestack UI tasarım sistemi Duyarlı Düzen ve Özgün Görseller
Ana bileşen davranışını sayfa geometrisinden ayırın
Masaüstü düzeninde kontrol listesi giriş panelinin yanında yer alır. 700 pikselde tek sütuna dönüşür. Satırlar gerektiğinde kaydırılır ve uzun öğe adları kullanılabilir alan içinde satır kırar; sabit genişlikli bir eylem tüm belgenin yatay kaymasına neden olmamalıdır.
Defter ve kalem, gluestack marka görsellerinden kopyalanmamış, özgün CSS şekillerdir. Kartın 14 piksellik köşe yarıçapı, panel aralığının 24 piksel olması ve başlık ölçeği bu incelemede alınmış tasarım kararlarıdır. Referans tablosunda bunlar belgelenmiş renk rollerinden ayrı tutulur.
gluestack UI tasarım sistemi Tarayıcı Erişilebilirliği ve Platform Kapsamı
Gerçekte temsil edilen ortamda test edin
Önizleme React Native Web kullanılarak oluşturulmuş ve tarayıcıda kontrol edilmiştir. Yerel iOS veya Android davranışını doğrulamaz. Bir Expo uygulamasında dokunma hedefleri, ekran okuyucu duyuruları, klavyeden kaçınma ve platform gezinmesi ayrıca doğrulanmalıdır.
İlerleme öğesi adını, minimum, maksimum ve mevcut değerini içerir. Canlı durum bildirimi, okuyucuyu kontrol listesinden uzaklaştırmadan tamamlanan işlemleri açıklar. Form, reddedilen girişte taslağı korur ve odağı alana geri verir. Bunlar, yerel temel davranışın üzerine eklenen uygulama sorumluluklarıdır.
gluestack UI Tasarım Sistemi: Tam Derleme ve Bağımlılık Sınırı
Bu çalışmayı birebir yeniden oluşturun
Component Examples bölümündeki dört dosyayı aynı dizine kaydedin ve aşağıda belirtilen sabitlenmiş paketleri yükleyin. Temel bileşenler içeride yerel modül adını kullandığından, derleme react-native adını react-native-web ile eşler. Kaynak, tarayıcı barındırıcılarını doğrudan içe aktarır ve hiçbir zaman Expo çalışma zamanını yüklemez.
Web'e özel bu alt kümedeki dar kapsamlı paket kurulumu, eski eş bağımlılık çözümlemesini kullanır. Bu, eksiksiz bir yerel uygulama için öneri değildir: tam kitaplık, bu iki oluşturuculu paketin kullanmadığı yerel, SVG ve güvenli alan entegrasyonları için eş bağımlılıklar bildirir. Bileşen kümesini genişletirken uygun eş bağımlılıkları ekleyin.
Oluşturucu bağlantılarını olduğu gibi koruyarak özgün düzeni veya uygulama içeriğini değiştirin.
Oluşturulan NativeWind bileşenlerini kullanacaksanız stil ve sağlayıcı kurulumunu ayrı bir entegrasyon adımı olarak değiştirin.
Bu değişiklikten sonra klavye davranışını ve gerçek hedef platformları yeniden kontrol edin.
gluestack UI Tasarım Sistemi Bileşen Örnekleri
app.jsx — temel bileşenlerin eksiksiz örneği
Gerçek oluşturucu bağlantıları ve kontrol listesinin tüm durum modeli.
jsx
import React,{useState,useRef} from 'react';
import{createRoot}from'react-dom/client';
import{Pressable,Text,View,TextInput,ActivityIndicator}from'react-native-web';
import{createButton}from'@gluestack-ui/core/button/creator';
import{createInput}from'@gluestack-ui/core/input/creator';
const Button=createButton({Root:Pressable,Text,Group:View,Spinner:ActivityIndicator,Icon:View});
const Input=createInput({Root:View,Input:TextInput,Slot:Pressable,Icon:View});
const seed=[{id:1,name:'Sketchbook',packed:true},{id:2,name:'Pencil roll',packed:false},{id:3,name:'Water bottle',packed:false}];
function App(){const[items,setItems]=useState(seed),[name,setName]=useState(''),[error,setError]=useState(''),[message,setMessage]=useState('Pack each item when it is ready.');const next=useRef(4),field=useRef(null);const count=items.filter(x=>x.packed).length;
function add(){const v=name.trim();if(!v||items.some(x=>x.name.toLowerCase()===v.toLowerCase())){setError(!v?'Enter the name of an item.':'That item is already in the kit.');field.current.focus();return}setItems([...items,{id:next.current++,name:v,packed:false}]);setName('');setError('');setMessage(v+' added to this local kit.')}
return <main><header><p className="eyebrow">GLUESTACK UI / CORE COMPONENT STUDY</p><h1>A small kit.<br/>A clearer start.</h1><p className="intro">Prepare a drawing kit with actual gluestack core Button and Input creators. Your checklist stays in this browser session.</p></header><div className="layout"><section className="panel"><div className="sectionhead"><h2>Your field kit</h2><span className="badge">{count} of {items.length} packed</span></div><div className="meter" role="progressbar" aria-label="Packed items" aria-valuemin={0} aria-valuemax={items.length} aria-valuenow={count}><i style={{width:100*count/items.length+'%'}}/></div><ul>{items.map(item=><li key={item.id}><div><strong>{item.name}</strong><span>{item.packed?'Packed and ready':'Still to pack'}</span></div><Button onPress={()=>{setItems(items.map(x=>x.id===item.id?{...x,packed:!x.packed}:x));setMessage(item.name+(item.packed?' marked to pack.':' marked packed.'))}} style={item.packed?styles.secondary:styles.primary} aria-label={(item.packed?'Unpack ':'Pack ')+item.name}><Button.Text style={{color:item.packed?'#171717':'#fafafa',fontSize:14,fontWeight:600}}>{item.packed?'Unpack':'Pack item'}</Button.Text></Button></li>)}</ul><p className="status" role="status">{message}</p></section><aside className="panel"><div className="drawing" aria-hidden="true"><span className="book">FIELD<br/>NOTES</span><i className="pencil"/></div><h2>Add one useful thing</h2><label htmlFor="kit-name">Item name</label><Input isInvalid={!!error} isRequired style={styles.input}><Input.Input id="kit-name" aria-label="Item name" aria-describedby={error?'kit-error':'kit-hint'} ref={field} value={name} onChangeText={v=>{setName(v);setError('')}} onSubmitEditing={add} maxLength={60} style={styles.field}/></Input><p id="kit-hint" className="hint">Use a short, unique name. Maximum 60 characters.</p>{error&&<p id="kit-error" className="error" role="alert">{error}</p>}<Button onPress={add} style={styles.primary}><Button.Text style={styles.primaryText}>Add to kit</Button.Text></Button><Button onPress={()=>{setItems(seed);setName('');setError('');setMessage('Example kit restored.');next.current=4}} style={styles.reset}><Button.Text style={{color:'#737373',fontSize:14}}>Reset example kit</Button.Text></Button></aside></div><p className="scope">Native @gluestack-ui/core 5.0.15 behavior rendered through React Native Web. Original OpenDesign layout and artwork; explicitly styled with documented v5 light color roles. This is a web-only study, not an Expo build or the CLI-generated NativeWind component set.</p></main>}
const styles={primary:{backgroundColor:'#171717',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},secondary:{backgroundColor:'#f5f5f5',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},primaryText:{color:'#fafafa',fontSize:14,fontWeight:600},input:{borderWidth:1,borderColor:'#e5e5e5',borderRadius:8,marginTop:8},field:{padding:12,fontSize:16,color:'#0a0a0a',outlineStyle:'none'},reset:{paddingVertical:16,alignItems:'center'}};
createRoot(document.getElementById('app')).render(<App/>);
Önce dört eksiksiz dosyayı kaydedin. Bu kurulum, gösterilen tarayıcı alt kümesiyle sınırlıdır; NativeWind, Uniwind, Expo veya oluşturulmuş bir bileşen kayıt defteri başlatmaz.
createButton/createInput ve React Native Web barındırıcılarını kullanarak gluestack core 5.0.15 alan-kiti tarayıcı örneğinin tamamını uygulayın. Kararlı kimlikleri, denetlenen taslak metnini, boşlukları temizleme ve yinelenenleri doğrulama işlemlerini, odak geri yüklemeyi, türetilmiş paketlenmiş öğe sayısını, yerel sıfırlamayı ve açık v5 açık tema rol eşlemesini koruyun. Özgün düzen tercihlerini kitaplık varsayılanlarından ayrı tutun. Yerel mobil test yapıldığını veya arka uç kalıcılığını iddia etmeyin.
05
gluestack UI Tasarım Sistemi Kaynakları ve Kapsamı
React Native Web 0.21.3 üzerinden gerçek @gluestack-ui/core 5.0.15 davranışı. Alan-kitinin düzeni, görselleri ve durum modeli özgün OpenDesign çalışmadır. Doğrudan oluşturucu kullanan bu tarayıcı örneği açık stiller kullanır; CLI tarafından oluşturulan NativeWind/Uniwind bileşen kümesi değildir ve iOS ya da Android'de test edilmemiştir.
