Tamagui Tasarım Sistemi.

Tamagui Tasarım Sistemi Sürümlenmiş Yapılandırma ve CSS

Adı belirtilen v5 hazır ayarını kullanın

Bu örnek, tamagui ve @tamagui/config paketlerini 2.7.7 sürümüne sabitler ve @tamagui/config/v5 içinden defaultConfig değerini içe aktarır. Yapılandırmanın adı v5'tir; npm paketinin ana sürüm numarası değildir. Bu iki numarayı karıştırmak, okuyucuyu yanlış kurulum komutuna yönlendirir. createTamagui bileşenin dışında bir kez çalıştırılır; oluşturulan CSS, pano görüntülenmeden önce eklenerek tema değişkenlerinin ve yerel stillerin web'de gerçek bir tanımı olması sağlanır.

Küçük yapılandırma geçersiz kılmasını açıkça belirtin

Sağlanan kaynak, bu eğitim örneğinde padding ve backgroundColor gibi okunaklı uzun biçimli özellikler kullanıldığı için onlyAllowShorthands değerini false olarak ayarlar. Bu, hazır ayarın üzerine eklenen bir uygulama tercihidir. v5 temel yapılandırması bir animasyon sürücüsü içermez; bu örnek de animasyon sürücüsü uydurmaz veya animasyonlu geçişler sunduğunu iddia etmez. Basit ilerleme ve onay kutusu davranışları ayrı bir animasyon bağımlılığı eklemeden çalışır.

Tamagui Tasarım Sistemi Boyut, Boşluk ve Köşe Yarıçapı Belirteçleri

Aynı belirteç etiketlerini birbirine karıştırmayın

Sabitlenmiş v5 yapılandırmasında size $4 değeri 44, space $4 değeri 18 ve radius 4 değeri 9'dur. Bu nedenle bileşen boyutu, düzen boşluğu ve köşe yarıçapı tek bir ortak çarpan kuralıyla dönüştürülemez. Başvuru kaynağı her kategoriyi ayrı ayrı listeler; örnek de bu kategorilere özgü değerleri gerçek Tamagui özellikleri üzerinden kullanır. Bu yaklaşım, yapılandırmanın kullanmadığı genel 4 piksel artışlarının listesinden daha yararlıdır.

• size.$4 = 44
• space.$4 = 18
• radius.4 = 9
• Gövde yazı tipi $4 = 15px, satır yüksekliği = 23px

Yazı tipi ölçeğini de ayrı tutun

Gövde yazı tipi $4, 23px satır yüksekliğiyle 15px'tir; bileşen boyutu $4 ise 44 olarak kalır. Sistem yazı tipi yığını v5 tarafından sağlanır ve indirilen bir yazı tipi dosyası gerektirmez. H1, H2 ve Text yerel yazı tipi bağlamlarını alır; kaynaktaki açık fontSize ve lineHeight değerleri özgün panonun hiyerarşisini belirler. 880px dış genişlik yerel bir düzen tercihidir, genel bir Tamagui belirteci değildir.

Tamagui Tasarım Sistemi Anlamsal Temaları ve Görünümü

Açık veya koyu görünümü mavi bir alt temayla birleştirin

TamaguiProvider, seçilen defaultTheme değerini alır; Theme name="blue" ise ilgili alt temayı çözümler. Kaynakta, bileşen ağacında sabit onaltılık renk değerlerini tekrar etmek yerine background, backgroundHover, color ve borderColor rolleri kullanılır. Tabloda gerçek light_blue ve dark_blue değerleri gösterilir; böylece okuyucu sabit bir marka paleti olduğunu varsaymak yerine çözümlenmiş yapılandırmayı karşılaştırabilir.

Görünüm değişikliklerinde pano durumunu koruyun

dark değeri; satırlardan, girdi taslağından ve filtreden bağımsızdır. Görünümü değiştirmek yerel bileşenleri güncellerken panoyu olduğu gibi bırakır. Düğmeler ve onay kutuları kendi bileşen alt tema değerlerini seçebileceğinden, hesaplanan renkleri üst öğenin arka plan belirteciyle aynı olmayabilir. Hiyerarşiyi özel CSS belirteçlerine indirgemeden önce oluşturulan durumu inceleyin.

Tamagui Tasarım Sistemi Onay Kutuları ve Türetilen İlerleme

Tamamlanma bilgisini tek bir satır koleksiyonunda tutun

Her satırda kararlı bir kimlik, okunaklı metin ve done boole değeri bulunur. Checkbox, checked ve onCheckedChange değerlerini alır; yalnızca true sabit değeri satırı tamamlandı olarak işaretler. Checkbox.Indicator, işaretlendiğinde onay işaretini gösterir. Yanındaki metin ve erişilebilir ad aynı alışkanlığı tanımlar; üzeri çizili metin de tamamlanmış durumu görsel olarak tekrar eder. Kaynak, satırlarla eşzamanlılığını yitirebilecek ayrı bir sayaç oluşturmaz.

İlerlemeyi panonun tamamından hesaplayın

Tamagui Tasarım Sistemi Taslak Doğrulama ve Yinelenen Kayıt Kurtarma

Gerçek bir kontrollü girdi ekleyin

Input, geçerli taslağı value ve onChangeText aracılığıyla tutar. Alışkanlık ekleme işlemi taslağın başındaki ve sonundaki boşlukları kaldırır; boş değerleri görünür bir ileti, aria-invalid ve hata açıklamasıyla reddeder. Boş gönderimden sonra odak girdiye geri döner. Büyük-küçük harfe duyarsız yinelenen kayıt denetimi, aynı metinle ikinci bir satır oluşturulmasını önler ve düzeltme yapılabilmesi için taslağı korur. Bu kurallar kütüphanenin değil, özgün panonun davranışıdır.

Panoyu yalnızca geçerli bir eklemeden sonra güncelleyin

Geçerli bir taslak, tamamlanmamış yeni bir satır ekler, girdiyi temizler ve hatayı kaldırır. Yeni koleksiyondan türetildiği için ilerleme paydası hemen değişir. Alışkanlık eklemek bir hatırlatıcı kaydetmez veya hesap oluşturmaz. Pano bilerek yerel React durumunda tutulur; belgeyi yeniden yüklemek örnek duruma döndürür.

Tamagui Tasarım Sistemi Filtrelenmiş Görünümler ve Boş Durumdan Kurtarma

Filtrenin kapsamını açıklayın

Yalnızca tamamlanmamışları göster seçeneği, tamamlanmış satırları koleksiyonda tutarken gizler. Bu görünümde gösterilecek öğe kalmadığında, yazılı boş durum tüm listenin hâlâ mevcut olduğunu açıklar ve doğrudan geri dönme olanağı sunar. Bu, kullanıcının seçimleriyle oluşan anlamlı bir boş durumdur; rastgele yer tutucu kartlar arasında geçiş yapan dekoratif bir anahtar değildir.

Sıfırlamayı görünüm değişikliğinden ayrı tutun

Örnek panoyu sıfırla işlemi ilk üç satırı geri yükler, taslağı ve hatayı temizler ve tam listeye döner. Geçerli görünümü değiştirmez. Her değişiklik açıkça tutulan bir durum olduğundan sıfırlama, belgeyi yeniden yüklemeyi veya yapılandırılmış sağlayıcıyı kaldırmayı gerektirmez. Tema ve içerik kurtarma işlemleri birbirinden bağımsız olarak test edilebilir.

Tamagui Tasarım Sistemi Duyarlı Yığınlar ve Erişilebilir Okuma

Yığın yüksekliğini içeriğin belirlemesini sağlayın

YStack ana okuma akışını düzenler; XStack ise başlık denetimlerini, onay kutusu satırlarını ve eylemleri hizalar. Denetim grupları sabit bir masaüstü genişliğini zorlamak yerine alt satıra geçer. Dış kapsayıcı en fazla 880px genişliğindedir ve dolgu için gerçek space $4 belirtecini kullanır. Her satırda metin daralabilir ve satırlara bölünebilir; denetimler hem 280px hem de daha geniş test alanlarında kullanılabilir kalır.

Yeniden akıştan sonra etkileşimi test edin

Tarayıcı denetiminde taşma ölçülmeden önce bir alışkanlık eklenir, tamamlandı olarak işaretlenir, liste filtrelenir ve görünüm değiştirilir. Yalnızca başlangıç düzeninin ekran görüntüsü; hatanın, uzun bir etiketin veya filtrelenmiş durumun dar düzeni bozup bozmadığını göstermez. Yerel onay kutusu anlambilimi ve görünür metin, mevcut oldukları varsayılmak yerine türetilen ilerlemeyle birlikte sınanır.

Tamagui Tasarım Sistemi Eksiksiz Tarayıcı Uygulaması

Sağlayıcıyı, CSS değerini ve derleme tanımlarını sağlayın

Sağlanan üç dosya yerel web incelemesi için yeterlidir. JSX; provider’ı, bir yapılandırmayı, oluşturulan temayı CSS ve panonun tamamını içerir. build.mjs, web hedefini ve üretim ortamını sabitler; yalnızca tarayıcıda kullanılan diğer ortam değişkeni okumaları için boş bir process.env varsayılanı sağlar. Bu son tanım olmazsa, derlenmesine rağmen bu yalın paket process is not defined hatasıyla başarısız olabilir.

1. tamagui.jsx, build.mjs ve index.html dosyalarını aynı dizine kaydedin.
2. Sabitlenmiş React ve Tamagui paketlerini yükleyin.
3. Yerel dizini derleyip sunun.
4. Boş ve yinelenen eklemeleri, tamamlamayı, filtreleri, temayı ve sıfırlamayı test edin.

Yerel ve web benimsemesini ayrı tutun

Tamagui Tasarım Sistemi Bileşen Örnekleri

import React,{useState} from 'react';import{createRoot}from'react-dom/client';
import{createTamagui,TamaguiProvider,Theme,YStack,XStack,Text,H1,H2,Button,Input,Checkbox,Progress,Separator}from'tamagui';import{defaultConfig}from'@tamagui/config/v5';
const config=createTamagui({...defaultConfig,settings:{...defaultConfig.settings,onlyAllowShorthands:false}});const sheet=document.createElement('style');sheet.textContent=config.getCSS();document.head.append(sheet);
const initial=[{id:1,text:'Read ten pages',done:false},{id:2,text:'Step outside for a break',done:true},{id:3,text:'Write one useful note',done:false}];
function App(){const[dark,setDark]=useState(false),[rows,setRows]=useState(initial),[draft,setDraft]=useState(''),[error,setError]=useState(''),[filter,setFilter]=useState(false);const done=rows.filter(x=>x.done).length;let shown=rows.filter(x=>!filter||!x.done);function add(){let text=draft.trim();if(!text){setError('Write a small habit before adding it.');document.querySelector('#habit-input')?.focus();return}if(rows.some(x=>x.text.toLowerCase()===text.toLowerCase())){setError('That habit is already in this list.');return}setRows([...rows,{id:Date.now(),text,done:false}]);setDraft('');setError('')}return <TamaguiProvider config={config} defaultTheme={dark?'dark':'light'}><Theme name="blue"><YStack backgroundColor="$background" color="$color" padding="$4" gap="$4" maxWidth={880} margin="auto" width="100%" minHeight={0}><XStack justifyContent="space-between" alignItems="center" flexWrap="wrap" gap="$3"><Text fontSize="$2" fontWeight="700">TAMAGUI / ORIGINAL HABIT BOARD</Text><Button size="$3" onPress={()=>setDark(!dark)}>{dark?'Light appearance':'Dark appearance'}</Button></XStack><H1 fontSize="$8" lineHeight="$8">A little progress, every day.</H1><Text fontSize="$4" lineHeight="$5">A local board built with Tamagui 2.7.7 and its v5 blue theme. Your changes stay in this page; no account or daily reminder is connected.</Text><YStack backgroundColor="$backgroundHover" borderWidth={1} borderColor="$borderColor" borderRadius="$4" padding="$4" gap="$3"><XStack justifyContent="space-between" gap="$3" flexWrap="wrap"><H2 fontSize="$5">Today’s small steps</H2><Text id="progress-count" aria-live="polite">{done} of {rows.length} complete</Text></XStack><Progress value={rows.length?done/rows.length*100:0} size="$2" aria-label="Completed habits"><Progress.Indicator animation={undefined}/></Progress><Button size="$3" alignSelf="flex-start" onPress={()=>setFilter(!filter)}>{filter?'Show all habits':'Show unfinished only'}</Button><Separator/>{shown.length?shown.map(row=><XStack key={row.id} gap="$3" alignItems="center" paddingVertical="$2"><Checkbox id={'habit-'+row.id} checked={row.done} onCheckedChange={value=>setRows(rows.map(x=>x.id===row.id?{...x,done:value===true}:x))} aria-label={row.text} size="$4"><Checkbox.Indicator><Text fontWeight="700">✓</Text></Checkbox.Indicator></Checkbox><Text flex={1} fontSize="$4" lineHeight="$5" textDecorationLine={row.done?'line-through':'none'} opacity={row.done?.65:1}>{row.text}</Text></XStack>):<YStack gap="$3"><Text fontWeight="700">Nothing unfinished in this view</Text><Text>All your habits remain in the full list. You can revisit any completed item.</Text><Button onPress={()=>setFilter(false)}>Return to all habits</Button></YStack>}</YStack><YStack gap="$3"><Text htmlFor="habit-input" tag="label" fontWeight="700">Add one small habit</Text><Input id="habit-input" value={draft} onChangeText={v=>{setDraft(v);setError('')}} placeholder="For example, stretch for five minutes" aria-describedby={error?'habit-error':undefined} aria-invalid={!!error} onKeyPress={e=>{if(e.nativeEvent.key==='Enter')add()}}/><Text id="habit-error" color="$color" aria-live="polite">{error}</Text><XStack gap="$3" flexWrap="wrap"><Button theme="active" onPress={add}>Add habit</Button><Button onPress={()=>{setRows(initial);setDraft('');setError('');setFilter(false)}}>Reset sample board</Button></XStack></YStack><Text fontSize="$2" lineHeight="$3">Native Checkbox, Input, Button and Progress components; original board content and state. Theme changes preserve the current board.</Text></YStack></Theme></TamaguiProvider>}
createRoot(document.getElementById('root')).render(<App/>);

import {build} from 'esbuild';
await build({entryPoints:['tamagui.jsx'],bundle:true,minify:true,outfile:'tamagui.bundle.js',define:{'process.env.NODE_ENV':'"production"','process.env.TAMAGUI_TARGET':'"web"','process.env':'{}'}});

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Small habits board</title><style>body{margin:0}*{box-sizing:border-box}button,input{max-width:100%}</style></head><body><div id="root"></div><script src="./tamagui.bundle.js"></script></body></html>