# Adobe Spectrum Tasarım Sistemi ## Adobe Spectrum Tasarım Sistemi Arayüz Önizlemesi Üç özgün görsel varyantını inceleyin, dışa aktarılacak bir grup seçin ve yerel PNG veya JPEG tarifini hazırlayın. ## Adobe Spectrum Tasarım Sistemi Tasarım Referansı React Spectrum v3 API’leri ve boyut eşlemeleri. Sayısal boyut sütunu, Adobe’un geçiş tablosundaki temel dönüşümü gösterir; ölçeğe duyarlı size-* değerleri dokunmatik kullanım için uyarlanabilir. Bu, Spectrum 2 token dışa aktarımı değildir. Önizleme renkleri ve özel görseller uygulama tercihleridir. ### Provider ve tema yapılandırması | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | theme | defaultTheme | @adobe/react-spectrum adresinden içe aktarılan, kökte gerekli tema nesnesi. | | colorScheme | light \| dark | İşletim sistemi tercihinin açıkça geçersiz kılınması. | | scale | medium \| large | İnce ve kaba işaretçi ölçeği; normalde Provider’ın seçmesine izin verin. | | locale | BCP 47 language tag | Yerel ayar ve yazım yönü bağlamı. | | breakpoints | custom name → pixel width | Bu kılavuz, referans sayfasındaki çakışan varsayılanlardan kaçınmak için tablet: 640 ve desktop: 1024 değerlerini açıkça ayarlar. | | isDisabled / isReadOnly | boolean group defaults | İç içe Provider’lar ve tekil özellikler grup davranışını geçersiz kılabilir. | ### Temel boyut eşlemeleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | size-50 | 4px base | Küçük aralık. | | size-100 | 8px base | İlişkili denetimler. | | size-150 | 12px base | Araç çubuğu aralığı. | | size-200 | 16px base | Denetleyici grup aralığı. | | size-250 | 20px base | Orta aralık. | | size-300 | 24px base | Panel iç boşluğu. | | size-400 | 32px base | Daha geniş gruplandırma. | | size-500 | 40px base | Bölüm aralığı. | | size-600 | 48px base | Büyük yapı. | | size-1000 | 80px base | Sabit boyutlu görsel alanı. | | size-2400 | 192px base | Örnek denetleyici genişliği. | | size-6000 | 480px base | Geniş, sınırlandırılmış yüzey. | ### Stil özellikleri ve uyarlanabilir değerler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | marginStart / marginEnd | DimensionValue | Mantıksal aralıklandırma; yazım yönü desteği için left/right yerine bunu tercih edin. | | padding / backgroundColor | View style props | Yerel denetimlerin iç yapısını geçersiz kılmak yerine özel bir dış yüzey oluşturun. | | width | size-* \| CSS length \| calc(...) | Örnek: calc(100% - size-2000). | | responsive value | {base: value, tablet: value} | Anahtarlar, açıkça tanımlanmış Provider kesme noktalarıyla eşleşir. | | UNSAFE_style / UNSAFE_className | last-resort escape hatch | Özel bileşen DOM’una veya stillerine güvenmeyin. | | single-line-height | 32 base mapping | Tüm denetimlerin daima 32px olduğunu iddia etmek yerine anlamsal boyutu kullanın. | ### Koleksiyon seçimi sözleşmesi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | selectionMode | none \| single \| multiple | Örnek, bir grup seçimi için multiple kullanır. | | selectedKeys | Set of row keys \| all | Denetimli durum, all özel değerini işleyebilmelidir. | | onSelectionChange | callback with selection | Seçimi onay veya dışa aktarma başarısı olarak yorumlamayın. | | disallowEmptySelection | boolean | Zorunlu tekli seçim için kullanışlıdır; isteğe bağlı dışa aktarma gruplarında kullanılmaz. | | TableHeader → Column | column anatomy | Dinamik görüntüleme için sütunlara sabit anahtarlar verin. | | TableBody → Row → Cell | row anatomy | Kayıt kimlikleri, sabit koleksiyon kimliğini belirler. | ### Picker ve metin bileşimi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | label | persistent text | Dışa aktarma biçimi seçicisine ad verin. | | selectedKey | one item key | png veya jpeg gibi denetimli biçim. | | onSelectionChange | key callback | DOM olay işleyicisinden farklı bir sözleşme. | | Item key | stable key | Görünen etiketten bağımsız değer kimliği. | | Heading level | 1–6 | Anlamsal başlık düzeyi; yerel stil, bağlama göre belirlenir. | | Button onPress | press callback | Özel, yalnızca fareyle kullanılabilen bir eylem yerine farklı girişlerle etkinleştirmeyi kullanın. | ## Adobe Spectrum Tasarım Sistemi Tam Kılavuzu Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## Adobe Spectrum Tasarım Sistemi v3’ü bilinçli seçin; Spectrum nesillerini karıştırmayın ### Bu örneğin kurdukları > Adobe artık Spectrum 2’yi v3 kütüphanesinin yanında belgeliyor. Bu sayfa, Provider, koleksiyon ve stil özelliği sözleşmeleri belgelenmiş eksiksiz bir varlık inceleme örneği sunduğu için @adobe/react-spectrum@3 sürümünü seçiyor. v3 tarifi, mevcut bir v3 uygulaması için kullanışlıdır; ancak Spectrum’ın en yeni uygulaması olarak tanımlanmamalıdır. Yeni kullanım kararları, bir nesil seçmeden önce bağlantısı verilen geçiş referansını incelemelidir. Pratik fark kodda görülür. v3, stil özellikleri aracılığıyla size-300 değerini iletir ve Provider’a defaultTheme sağlar. Geçiş kılavuzu bu yaklaşımları farklı bir stil oluşturma API düzenine dönüştürür. Yalnızca paket adını değiştirmek örneği geçiş yaptırmaz; bileşen içe aktarımları, stiller ve desteklenen özellikler birlikte gözden geçirilmelidir. Destekleyici belirtimi okuyun ## Adobe Spectrum Tasarım Sistemi Provider görünüm, ölçek ve yerel ayarı koordine eder ### Tek kök, birbirinden bağımsız birkaç ayar Provider; tablo, picker ve button bileşenlerinin kullandığı ortamı oluşturur. Tema nesnesi renk şeması ve ölçek tanımlarını içerir. colorScheme, işletim sistemi tercihini geçersiz kılabilirken scale giriş özelliklerini dikkate alır. Bunlar birbirinden ayrı ayarlardır: koyu bir masaüstü arayüzü büyük dokunma hedefleri gerektirmez; açık renkli bir dokunmatik ekran da yanlışlıkla sıkışık bir fare düzenini devralmamalıdır. Normal üretim kullanımı için ölçeği otomatik bırakın. Bileşen incelemesinde orta veya büyük boyutu açıkça seçmek, denetimleri karşılaştırmaya yardımcı olabilir; ancak bunun bir inceleme ayarı olduğu belirtilmelidir. locale, proje verilerinizi çevirmek yerine dil bağlamını belirler. Kampanya adları, inceleme notları ve tarif etiketleri uygulama içeriği olarak kalır. Destekleyici belirtimi okuyun ## Adobe Spectrum Tasarım Sistemi Desteklenen boyutları ve harici düzen özelliklerini kullanın ### Adlandırılmış ölçek, piksel kısaltmasından fazlasıdır Temel size-100 eşlemesi 8, size-200 eşlemesi 16 ve size-300 eşlemesi 24’tür. Referans tablosunda başka kullanışlı adımlar da bulunur. size-* boyutu platform ölçeğine göre uyarlanabilir; static-size-* değeri ise özellikle sabittir. Bir denetleyiciyi veya etkileşim hedefini boyutlandırırken bu ayrımı koruyun. Masaüstünde çözümlenen her değeri CSS içine kopyalamak, bileşen ortamının sağladığı uyarlamayı ortadan kaldırır. Flex ve View, TableView’ın iç yapısını yeniden yazmadan örneğe kararlı bir dış yapı kazandırır. Tablo flex ile büyüyebilir ve minWidth={0} ile küçülebilir; denetleyici temel düzende üst üste dizilir, açıkça tanımlanmış tablet kesme noktasında ise sınırlandırılır. İç boşluk, yüzeyin sahibi olan View’a eklenmelidir. Belgeler, güvenli olmayan geçiş yollarıyla iç renkleri, kenarlıkları ve tipografiyi geçersiz kılmayı önermez. Destekleyici belirtimi okuyun ## Adobe Spectrum Tasarım Sistemi Yerel renk ve tipografiyi temaya bırakın ### Örnek paletiyle token dışa aktarımını birbirinden ayırın Önizlemede ölçülü gri bir tuval, nötr kontroller ve özgün, renkli çizimler bulunur. Bu illüstrasyon renkleri, onaylanmış Spectrum belirteç değerleri değildir. Yerel örnekte, desteklenen bileşenlerin görünümü defaultTheme üzerinden sağlanır. Özel bir yerel yüzey, her iki renk şemasında da aynı örneklenmiş hex değerinin işe yarayacağını varsaymak yerine belgelenmiş backgroundColor değerlerini kullanmalıdır. Heading, bulunduğu bağlamda hem anlamsal yapı hem de Spectrum sunumu sağlar. Sayfa başlığında level={1} kullanılır; Text ise seçili öğe sayısı gibi sıradan içerikleri sunar. Özel HTML önizlemesinde, uygulamanın seçtiği sistem yazı tipi yedeği ve yazı boyutları kullanılır. Bu, iş akışını ve göreli hiyerarşiyi gösterir; çevresindeki OpenDesign yazı tipinin ya da illüstrasyondaki tipografinin Spectrum yazı tipi tanımı olduğu iddiasını taşımaz. Destekleyici belirtimi okuyun ## Adobe Spectrum tasarım sistemi: Anahtarları, sütunları ve seçim anlambilimi olan bir koleksiyon tablosu ### Seçim bir veri sözleşmesidir Tablo; TableHeader ve Column bileşenlerinin yanı sıra TableBody, Row ve Cell bileşenlerinden oluşur. Her varlığın sabit bir id değeri vardır. selectedKeys ve onSelectionChange seçimi kontrollü hâle getirir; böylece dışa aktarma denetçisi sayıyı aynı durum üzerinden hesaplayabilir. Kullanıcı, kimliğini değiştirmeden bir varlığın adını değiştirebilir. Satır konumunu kimlik olarak kullanmak, sıralama değişikliklerinden sonra seçimi kırılgan hâle getirir. Seçim, all özel değeri olabilir. Kurulum, tarifi oluşturmadan önce bu değeri mevcut tüm varlıklara dönüştürür. Toplu işlem isteğe bağlı olduğundan boş bir Set de geçerlidir; disallowEmptySelection özellikle etkinleştirilmemiştir. Uzak ya da sayfalanmış bir uygulamada, o veri kaynağı için all değerinin ne anlama geldiğini tanımlayın; o anda görüntülenen satırların koleksiyonun tamamı olduğunu varsaymayın. - Varlık kimliği: Koleksiyonda kullanılan sabit anahtar. - İnceleme: bağımsız örnekte daha büyük gösterilen çizim. - Toplu seçim: hazırlanan tarifte yer alan anahtarlar. Destekleyici belirtimi okuyun ## Adobe Spectrum tasarım sistemi: Picker ve Button dışa aktarma denetçisini tamamlar ### Biçim, toplu seçimden bağımsız olarak kontrol edilir Picker, görünür bir etiket ve sabit Item anahtarları kullanır. selectedKey değeri png ya da jpeg olur; onSelectionChange seçilen anahtarı sağlar. Bu yöntem, yerel bir select öğesinden event.target.value okumaktan farklıdır. Toplu seçim temizlendiğinde biçim seçimi korunur; böylece incelemeyi yapan kişi bir ön ayarı baştan oluşturmadan seçimi değiştirebilir. Button, etkinleştirme için onPress; seçili varlık yokken devre dışı kalmak için isDisabled kullanır. Yerel örnek, id değerlerini ve biçimi yerel bir tarife serileştirir. Görüntü verilerini dönüştürmez, gerçek bir dışa aktarma dosyası oluşturmaz ya da bir varlık hizmetine bağlanmaz. Bu, yararlı bir uygulama sınırıdır: dönüştürme motoru tasarım sisteminin dışında olsa da eylem ve girdileri somuttur. Destekleyici belirtimi okuyun ## Adobe Spectrum tasarım sistemi: Çizimleri sıkıştırmak yerine düzeni uyarlayın ### Kesme noktası sözleşmesini belirleyin Bu örnekte tablet:640 ve desktop:1024 tanımlanır. Bu seçim açıkça belirtilmiştir; çünkü Provider sayfasında açıklayıcı metin ile oluşturulan API üst verisi arasında varsayılanlar tutarsızdır. Duyarlı değerler bu tam anahtarlara başvurur. Denetçi başlangıçta tam genişliktedir; ardından esnek tablonun yanına geçer. Bu kesme noktalarının sahibi uygulamadır; bunlar Spectrum için yeni ve evrensel bir standart değildir. Bağımsız illüstrasyonda geniş bir tuval, yanında bir denetçi ve küçük resim şeridi bulunur. Küçük ekranlarda denetçi normal akışa geçer, çizim ise en-boy oranını korur. Boyutlar ve biçim gibi metinler çizimin dışında kalır; böylece okunabilirliklerini korur ve incelenen çizimi değiştirmezler. Destekleyici belirtimi okuyun ## Adobe Spectrum tasarım sistemi: İnceleme, seçme ve hazırlama farklı eylemlerdir ### Örneği sınanabilir hâle getirin Bir çizim küçük resmine tıklamak, büyük illüstrasyonu ve açıklayıcı üst verisini değiştirir. Bir onay kutusu, dışa aktarma toplu seçimini değiştirir. Bu ikisini birbirinden bağımsız tutmak, seçilmemiş bir varlığı yanlışlıkla dışa aktarmadan incelemeyi sağlar. Önizleme, seçili öğe sayısını gösterir ve incelemeyi yapan kişi toplu seçimi değiştirirken biçimi korur. Yerel TableView, koleksiyon etkileşimini sağlar; HTML örneği ise sıradan düğmeler ve onay kutuları kullanır ve tam tablo klavye etkileşim modelini taklit ettiğini iddia etmez. Her ikisi de gösterilen eylemlere klavyeyle erişim sunar. Tarif sonucu yalnızca geçici bir görsel etki değil, metindir; böylece incelemeyi yapan kişi hangi id değerlerinin ve biçimin hazırlandığını tam olarak görebilir. Destekleyici belirtimi okuyun ## Adobe Spectrum tasarım sistemi: Aracı genişletmeden önce yerel parçayı tümleştirin ### Gerçek bir dışa aktarma hizmetini açıkça tanımlanmış bir sınırdan bağlayın Mevcut bir React uygulamasına v3 paket takımını kurun, ardından aşağıdaki tam girişi kullanın. Örnek; sağlayıcıyı, içe aktarımları, koleksiyon verilerini, seçim durumunu, biçim durumunu ve sonuç durumunu içerir. Üretim entegrasyonunda tarif hazırlama adımı, bir dışa aktarma isteğiyle değiştirilir ve her varlık için onaylanmış sonuç gösterilir. Böyle bir hizmet devreye girmeden yerel yanıtı “Dışa aktarma tamamlandı” olarak adlandırmayın. Spectrum 2'ye geçerken boyutlar, kesme noktaları ve bileşen değişiklikleri için Adobe'nin eşlemelerini kullanın. Seçim davranışını ve biçimin korunmasını yeniden doğrulayın; görsel olarak benzer bir tablo bile farklı bir sözleşme sunabilir. Kaynak neslini açıkça belirtin ki gelecekte katkıda bulunanlar v3 Provider bileşenini uyumsuz örneklerle bir araya getirmesin. 1. Bir varlık seçin ve id değerinin yerel tarifte göründüğünü doğrulayın. 2. Tümünü seçin, PNG'yi JPEG olarak değiştirin ve seçilen kümenin tamamını inceleyin. 3. Seçimi temizleyin; biçim seçimi korunurken eylemin devre dışı kaldığını doğrulayın. 4. Görünüm alanını daraltın ve inceleme, seçim ve tarif çıktısına erişimin sürdüğünü doğrulayın. Destekleyici belirtimi okuyun ## Adobe Spectrum tasarım sistemi Bileşen Örnekleri ### Tamamlanmış, bağımsız ve etkileşimli örnek Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Belgelenmiş v3 koleksiyon ve denetçi iş akışının özgün HTML/CSS yorumu. Renk paleti ve çizimler örnek amaçlıdır; yerel Spectrum çalışma zamanı ya da görüntü dönüştürme özelliği içermez. ``` Spectrum asset inspector study
Campaign library / Autumn collection
Campaign master1600 × 1200

Original artwork · illustrative preview

``` Kod referansı - Çizimler özgün örnek içeriklerdir. Tarif hazırlamak, dönüştürülmüş görüntü dosyaları değil, seçim üst verisi oluşturur; bu belge Spectrum v3 ya da Spectrum 2'yi yüklemez. ### Tam yerel uygulama girişi Kurulumdan itibaren tam uygulama; odaklanmış API açıklamalarının yanında burada bir araya getirilmiştir. Kurulum bölümünde belgelenen paket ve derleme ön koşullarını izleyin. ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` Kod referansı - Mevcut bir React uygulaması için tam v3 koleksiyon ve denetçi örneği. Görüntü dosyaları değil, yerel durumda bir dışa aktarma tarifi oluşturur. Çözümlenmiş paket sürümünü kilit dosyasında tutun ve bu girişi Spectrum 2 içe aktarımlarıyla karıştırmayın. ### Seçim yalnızca Set değil, all da olabilir Toplu seçimi hesaplamadan ya da eylemi etkinleştirmeden önce koleksiyon sözleşmesini normalleştirin. Bu parçada, kurulumun tamamındaki assets ve keys kullanılır. ``` const selected = keys === 'all' ? assets : assets.filter(asset => keys.has(asset.id)); ``` Kod referansı - Sabit id değerleri sıralama ve yeniden adlandırma sonrasında da geçerliliğini korur. - Boş toplu seçim yalnızca tarif eylemini devre dışı bırakır; mevcut biçimi silmez. ### Açıkça belirtilen kesme noktası adlarını kullanan duyarlı denetçi Provider ve duyarlı özelliklerde aynı anahtarları kullanın. Sayılar, uygulama yapılandırmasında bilerek seçilmiştir. ``` Asset table Export inspector ``` Kod referansı - Provider referansındaki açıklamalarla oluşturulan varsayılanlar tablosunda varsayılan kesme noktaları birbiriyle uyuşmuyor; açık bir eşleme belirsizliği ortadan kaldırır. - Mantıksal marginStart ve marginEnd özellikleri, fiziksel left ve right kenar boşluklarından daha iyi uyum sağlar. ## Adobe Spectrum tasarım sistemi Yapay Zekâ Ajanı Kurulumu ### Uygulamaya Başlangıç Noktası Mevcut bir React uygulaması için tam v3 koleksiyon ve denetçi örneği. Görüntü dosyaları değil, yerel durumda bir dışa aktarma tarifi oluşturur. Çözümlenmiş paket sürümünü kilit dosyasında tutun ve bu girişi Spectrum 2 içe aktarımlarıyla karıştırmayın. ``` // Terminal: npm install @adobe/react-spectrum@3 // Existing React app with
; entry: src/main.jsx import * as React from 'react'; import {createRoot} from 'react-dom/client'; import {Provider, defaultTheme, Flex, View, Heading, Text, Button, TableView, TableHeader, Column, TableBody, Row, Cell, Picker, Item} from '@adobe/react-spectrum'; const assets = [ {id: 'hero', name: 'Campaign master', dimensions: '1600 × 1200'}, {id: 'square', name: 'Social square', dimensions: '1080 × 1080'}, {id: 'story', name: 'Vertical story', dimensions: '1080 × 1920'} ]; function AssetReview() { const [keys, setKeys] = React.useState(new Set(['hero'])); const [format, setFormat] = React.useState('png'); const [recipe, setRecipe] = React.useState(''); const selected = keys === 'all' ? assets : assets.filter(a => keys.has(a.id)); return Campaign exports AssetDimensions {asset => {asset.name}{asset.dimensions} } PNGJPEG {selected.length} assets selected

{recipe ? 'Local recipe prepared. No image files were converted.' : ''}

{recipe && 
{recipe}
} ; } createRoot(document.getElementById('root')).render(); ``` ### Projeniz İçin Bir İstem ``` @adobe/react-spectrum v3'ü Provider ve defaultTheme ile kullanın. Sağlanan anahtarlara sahip TableView koleksiyonunu ve dışa aktarma denetçisini Picker, Item, Flex, View ve Button ile oluşturun. Seçimi Set ya da all olarak ele alın, seçim değiştiğinde biçimi koruyun ve gerçek bir dönüştürme hizmeti bağlanana kadar sonucu yerel tarif olarak adlandırın. Açıkça belirtilmiş tablet/desktop kesme noktası anahtarlarını ve desteklenen stil özelliklerini kullanın. v3 ve Spectrum 2 API'lerini birbirinden ayrı tutun. ``` ## Adobe Spectrum tasarım sistemi Kaynaklar ve Kapsam @adobe/react-spectrum kullanan, bakımı sürdürülen React Spectrum v3 belgelerinin OpenDesign uygulama incelemesi. Spectrum 2 de kullanılabilir ve farklı API'lere sahiptir; bu sayfa v3'ü en yeni uygulama olarak tanımlamaz. Bağımsız varlık panosu önizlemesi; örnek çizimler ve uygulamanın seçtiği renklerle oluşturulmuş özgün bir HTML/CSS yorumdur; yerel bir Spectrum bileşeni ya da renk yönetimli görüntü düzenleyicisi değildir. - Provider Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı. - biçimlendirme Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı. - tema oluşturma Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı. - TableView Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı. - Picker Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı. - Heading Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı. - Button Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı. - geçiş Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı. ## Adobe Spectrum tasarım sistemi İlgili Kaynaklar ### Alaska Airlines Auro Auro’nun Alaska temasını gerçek anlamsal renk ve yazı belirteçleri, sınıf tabanlı tipografi ve yerel uçuş bileşeniyle keşfedin. Özgün iki uçuş kaydı, havayolu envanterini veya rezervasyonu temsil etmeden yerel filtreleme ve seçimi gösterir. ### Arco Design Arco’nun kontrollü Transfer bileşeniyle bir rapor bölümü seçicisi oluşturun. Gerçek boşluk ve boyut ölçeklerini, CSS değişken adlandırma kurallarını, anlamsal arka plan katmanlarını ve satırları seçmekle taşımak arasındaki farkı keşfedin. ### Atlassian tasarım sistemi Anlamsal Atlassian belirteçleri, sekiz piksellik boşluk ölçeği, gerçek Button, Lozenge ve Toggle API’leri ve gerekli Compiled stil ayarıyla bir iş planlama panosu oluşturun. Bir işi inceleyin, panoyu filtreleyin ve seçimi durumla karıştırmadan yerel bir iş öğesini taşıyın. - [Uygulama başvurusu](https://react-spectrum.adobe.com/v3/TableView.html) - [Kaynak](https://react-spectrum.adobe.com/v3/Provider.html) - [Kaynak](https://react-spectrum.adobe.com/migrating) - [Kaynak](https://react-spectrum.adobe.com/v3/styling.html) - [Kaynak](https://react-spectrum.adobe.com/v3/TableView.html) - [Kaynak](https://react-spectrum.adobe.com/v3/Picker.html) - [Destekleyici belirtimi okuyun](https://react-spectrum.adobe.com/migrating) - [Destekleyici belirtimi okuyun](https://react-spectrum.adobe.com/v3/theming.html) - [Destekleyici belirtimi okuyun](https://react-spectrum.adobe.com/v3/styling.html) - [Destekleyici belirtimi okuyun](https://react-spectrum.adobe.com/v3/Heading.html) - [Destekleyici belirtimi okuyun](https://react-spectrum.adobe.com/v3/TableView.html) - [Destekleyici belirtimi okuyun](https://react-spectrum.adobe.com/v3/Picker.html) - [Destekleyici belirtimi okuyun](https://react-spectrum.adobe.com/v3/Provider.html) - [Kod referansı](https://react-spectrum.adobe.com/v3/TableView.html) - [Kod referansı](https://react-spectrum.adobe.com/v3/Provider.html) - [Provider Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı.](https://react-spectrum.adobe.com/v3/Provider.html) - [biçimlendirme Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı.](https://react-spectrum.adobe.com/v3/styling.html) - [tema oluşturma Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı.](https://react-spectrum.adobe.com/v3/theming.html) - [TableView Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı.](https://react-spectrum.adobe.com/v3/TableView.html) - [Picker Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı.](https://react-spectrum.adobe.com/v3/Picker.html) - [Heading Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı.](https://react-spectrum.adobe.com/v3/Heading.html) - [Button Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı.](https://react-spectrum.adobe.com/v3/Button.html) - [geçiş Burada ele alınan uygulama ve kısıtlamalar için resmî React Spectrum referansı.](https://react-spectrum.adobe.com/migrating)