# SEEK Braid Tasarım Sistemi ## SEEK Braid Tasarım Sistemi Arayüz Önizlemesi Rol veya şehir sorgusunu düzenleyip uygulayın, boş sonucu inceleyin ve hem alanı hem de uygulanan aramayı temizleyin. ## SEEK Braid Tasarım Sistemi Tasarım Referansı Güncel Braid bileşeni ve CSS referansları. Adlandırılmış boyutlar seçilen tema üzerinden belirlenir; burada doğrulanmamış piksel karşılıkları veya üretilmiş CSS değişken adları uydurulmaz. Yerel örnekte seekJobs açıkça seçilir. ### Duyarlı eşikler | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | mobile | 0 | Temel stiller. | | tablet | 740px | İlk geniş koşul. | | desktop | 992px | Masaüstü koşulu. | | wide | 1200px | Geniş ekran koşulu. | ### Tema değişkeni API | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | vars.space.medium | Theme-scoped CSS expression | Doğrudan kullanın; aritmetik için calc gerekir. | | vars.space.gutter | Theme gutter expression | Düzen oluğu. | | vars.backgroundColor.body | Theme body background | Sayfa yüzeyi. | | vars.backgroundColor.surface | Theme surface background | Kapsayıcı yüzeyi. | | vars.backgroundColor.brandAccent | Theme brand action background | Evrensel bir hex değeri olduğunu varsaymayın. | | vars.foregroundColor.neutral | Theme text role | Ana içerik. | | vars.foregroundColor.secondary | Theme secondary role | Üst veriler. | | vars.borderColor.focus | Theme focus role | Görünür odak. | | vars.borderRadius.standard | Theme radius expression | Standart şekil. | ### Kutu düzeni API | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | component | div by default | Gerektiğinde anlamsal main, section veya form seçin. | | padding | Named space, responsive object allowed | Örnek: mobile medium / tablet xlarge. | | gap | Named spacing values | Kardeş öğeler arası boşluk. | | background="customDark" | Context for custom dark surfaces | Ön plan davranışının eşleşmesini sağlar. | | borderRadius | none / small / standard / large / xlarge / full | Temayla belirlenen şekil. | ### Metin ve alan sözleşmesi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | label / secondaryLabel / tertiaryLabel | Three label levels | Amaç, isteğe bağlı bağlam ve yardım. | | description | Below-label context | Alan odaklandığında duyurulur. | | message + tone | critical / positive / caution / neutral | Alan durumunu açıklayın. | | onClear | Callback required for clear action | Kontrollü değeri uygulama sıfırlar. | | clearLabel | Accessible clear-control label | Yerelleştirin. | ### Düğme vurgusu ve davranışı | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | variant | solid / ghost / soft / transparent | Görsel vurgu. | | tone | brandAccent / formAccent / critical / neutral | Eylemin anlamı. | | No explicit tone | Neutral ghost by default | Düşük vurgulu varsayılan. | | Explicit tone, no variant | Solid default | Belirsizliği gidermek için ikisini de belirtin. | | size | standard / small | Desteklenen boyutlar. | | loading | Also disables interaction | Yalnızca gerçekten devam eden işler için. | | Ordinary disabled | Not supported | Denemelere izin verin ve hataları açıklayın. | ### Metin anlambilimi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | size | large / standard / small / xsmall | Temanın tipografi ölçeği. | | weight | regular / medium / strong | Metin vurgusu. | | component="p" | Paragraph element | Görsel tipografi ve anlambilim birbirinden ayrıdır. | | maxLines | Number | Kullanıcı tarafından oluşturulan içeriğin görünür kısmını sınırlar. | | tone="secondary" | Metadata emphasis | Bir hata rolünün yerine geçmez. | ## SEEK Braid Tasarım Sistemi Kapsamlı Rehberi 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ı. ## SEEK Braid Tasarım Sistemi Seçilen tema, görsel sözleşmeyi belirler ### Sağlayıcı, sıfırlama ve oluşturulan değişkenler birlikte çalışır > Braid, birden fazla SEEK Group temasını hedefler. Braid’deki API değişkeni kapsamlandırılmış CSS ifadeleri içerir; bu nedenle vars.space.medium gibi adlar sabit başvurulardır, ancak oluşturulan özel özellik tanımlayıcısı elle yeniden yazılmamalıdır. Örnekte BraidProvider aracılığıyla seekJobs seçilir. Sıfırlama stilleri, diğer Braid stillerinden önce içe aktarılmalıdır. Gömülü bir uygulamada styleBody={false}, sağlayıcının ana makinenin body arka planını ve boşluklarını değiştirmesini önleyebilir. Bu seçenek, tema bağlamına duyulan ihtiyacı ortadan kaldırmaz. Destekleyici belirtimi okuyun ## SEEK Braid Tasarım Sistemi Duyarlı değerlerde temanın adlandırılmış boşlukları kullanılır ### Dört gerçek kesme noktası koşulunu koruyun Paylaşılan eşikler şöyledir: mobil sıfırda, tablet 740px’te, masaüstü 992px’te ve geniş ekran 1200px’tedir. Yerel örnek, duyarlı bir prop nesnesi aracılığıyla tablet eşiğinde dolguyu değiştirir. Aynı değişiklik için yinelenen bir CSS medya sorgusu eklemez. Burada temanın orta boy boşluğu tahmini bir piksel değeri olarak belgelenmemiştir. Boşluk için ilk tercih Box ve Stack bileşenleridir. Değerleri CSS ifadeleri olduğundan, değerleri bu bileşenlerle ifade edilemeyen yerleşimler için vars daha düşük seviyeli bir seçenektir; çarpma işlemi JavaScript sayısal aritmetik yerine calc içinde yapılmalıdır. Destekleyici belirtimi okuyun ## SEEK Braid Tasarım Sistemi Metin rolleri, çevrelerindeki renk bağlamını taşır ### Hiyerarşiyle anlambilimi birbirinden bağımsız seçin Text, adlandırılmış boyutlar ve kalınlıklar sunarken Heading, başlık hiyerarşisini ifade eder. İş ilanındaki şehir ikincil tonda gösterilebilir, ancak sonuç başlığının yeterince belirgin olması gerekir. İçerik bir paragrafsa Text, varsayılan görünümü için HTML öğesini seçmek yerine component="p" aracılığıyla paragraf olarak görüntülenebilir. Braid, koyu arka plan bağlamlarında ön plan tonlarını ayarlar. Özgün bir görsel veya özel bir arka plan kullanıldığında Box içindeki customDark bağlamı bu ilişkiyi belirtir. Elle renklendirilmiş bir div’in aynı bağlamsal davranışı sağladığı varsayılamaz. Destekleyici belirtimi okuyun ## SEEK Braid Tasarım Sistemi Tone anlamı, variant ise vurguyu belirtir ### Marka vurgusunu arama eylemine ayırın Örnekte İş ara eylemi için solid varyantı brandAccent ile açıkça eşleştirilir. Aramayı temizle eylemi daha düşük vurgulu bir ghost düğmesidir. formAccent, tekrarlanabilir form eylemlerini vurgulayabilir; critical ise yıkıcı sonuçlar için kullanılmalı, sıradan kontrolleri daha dikkat çekici hâle getirmek için kullanılmamalıdır. Braid’in varsayılan davranışı inceliklidir: aksi belirtilmedikçe nötr bir düğme ghost olur; tone ayarlandığında ise örtük varyant solid olur. Önemli bir eylemde her iki prop’u da belirtmek, amaçlanan hiyerarşiyi netleştirir. Actions, mobildeki dikey sıralamayı ve geniş ekranlardaki yatay düzeni olağan biçimde yönetir. Destekleyici belirtimi okuyun ## SEEK Braid Tasarım Sistemi Eyleme izin veren bir hata, kullanılamayan bir düğmeden daha iyidir ### Kontrollü alan sözleşmesini kullanın TextField’ın onChange geri çağrısı React giriş olayını alır. Örnek, event.target.value değerini okur, taslak metni saklar ve uygulanan aramayı yalnızca kullanıcı Ara’yı etkinleştirdiğinde değiştirir. Denetim uygulama durumunu kendi başına temizleyemediği için bir temizleme geri çağrısı da sağlanır. message, boş sorgu hatasını açıklar; critical tonu ise görsel durumunu belirtir. description kalıcı bağlam için ayrılmıştır. Sıradan, devre dışı bir Braid Button desteklenmez; ziyaretçinin nasıl devam edebileceğini görebilmesi için eylem kullanılabilir durumda tutulur. Çevrimdışı önizlemede ayrıca odak geçersiz alana taşınır. 1. Düzenlemeleri taslak sorgu durumunda tutun. 2. Ara’ya basıldığında, baştaki ve sondaki boşlukları temizlenmiş sorgunun boş olmadığını doğrulayın. 3. Başarısızlık durumunda açıklayıcı ve kritik bir mesaj gösterin. 4. Başarılı olduğunda sorguyu uygulayın ve sonuç bulunmaması durumunu açıkça koruyun. Destekleyici belirtimi okuyun ## SEEK Braid Tasarım Sistemi Örnek yalnızca özgün verilerde arama yapar ### Yerel sonuçlar, güncel iş ilanları olduğu anlamına gelmez Önizlemede rol, şehir ve iş yeri bilgilerini içeren, uydurulmuş üç iş kaydı bulunur. Arama, başlık ve şehri büyük-küçük harf duyarlılığı olmadan karşılaştırır. Güncel SEEK ilanlarını getirmez ve sonuçlar örnek olarak etiketlenir. Taslak metinle uygulanan sonuçları ayrı tutmak, etkileşimi görünür kılar: kullanıcı Ara’ya basmadan rolü düzenlemek mevcut sonuçları sessizce değiştirmez. Aramayı temizle her iki değeri de sıfırlar. Eşleşme olmadığında sonuç listesi bunu belirtir ve arama kontrollerini erişilebilir bırakır. - Sorgu uygulandıktan sonra sonuç sayısını gösterin. - Düzenleme sırasında en son uygulanan sorgunun anlaşılır kalmasını sağlayın. - Örnek ilanlara sahte bir Uygula gönderimi eklemeyin. Destekleyici belirtimi okuyun ## SEEK Braid Tasarım Sistemi Braid stillerini ayıklayan bir derleme kullanın ### Paket kurulumu, kurulumun yalnızca bir parçasıdır Resmî kurulum sku için optimize edilmiştir. Braid’in Vanilla Extract stillendirmesi, özel bir derleyicide derleme entegrasyonu gerektirir; sıfırlama ve seçilen tema da belgelenen sırayla uygulamaya eklenmelidir. Sağlanan kod, mevcut ve uyumlu bir sku projesi için eksiksiz bir giriş noktasıdır; rastgele bir script etiketinin Braid’i çalıştırabileceği iddiası değildir. Braid, geliştirme sırasında doğrulamalar ve ortama dayalı uyarılar gerçekleştirir. Resmî derleme rehberi, üretim için doğrulamaların kaldırılmasını ve ortamın derleme sırasında değiştirilmesini açıklar. Bu konuyu uygulama iş akışında göz önünde bulundurun; sayfanın çevrimdışı HTML örneği böyle bir paket derleme bağımlılığı içermez. Destekleyici belirtimi okuyun ## SEEK Braid 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. Braid arama bileşimini, hiyerarşisini ve kesme noktası yönergelerini temel alan özgün ve çevrimdışı bir HTML yorumudur; canlı SEEK verisi veya Braid çalışma zamanı içermez. Önizlemenin renkleri ve gerçek boşlukları uygulamaya özgü tercihlerdir. ``` Braid sample job search interpretation
PossibilitiesOriginal job-search specimen

Find your next possibility.

Search three original sample roles. These are not live vacancies.

3 sample results

Showing all sample roles

Independent HTML interpretation of Braid’s search composition and responsive guidance. Original content and application palette; no SEEK data, account or application service is connected.

``` Kod referansı - Arama, kurgu ürünü ilanlara uygulanır. Yerel Braid girişi, stil ayıklamalı derleme ve seçilen seekJobs temasını gerektirir. ### Taslak sorgu, uygulanan arama ve açık kurtarma Kontrollü bir TextField yerel sorguyu doğrular, Actions iki farklı düğme görünümünü gruplandırır, Card/Stack/Heading/Text ise özgün sonuçları görüntüler. ``` // Entry module in an existing sku application: // npm install braid-design-system import 'braid-design-system/reset'; // Keep this first. import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import seekJobsTheme from 'braid-design-system/themes/seekJobs'; import {BraidProvider,Box,Stack,Heading,Text,TextField,Button,Actions,Card} from 'braid-design-system'; const jobs=[{id:1,title:'Product designer',city:'Melbourne'},{id:2,title:'Design systems engineer',city:'Sydney'},{id:3,title:'UX researcher',city:'Melbourne'}]; function JobSearch(){ const [draft,setDraft]=useState(''),[query,setQuery]=useState(''),[error,setError]=useState(''); const results=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(query.toLowerCase())); function search(){if(!draft.trim()){setError('Enter a role or city.');return;}setError('');setQuery(draft.trim());} function clear(){setDraft('');setQuery('');setError('');} return Find your next possibility {setDraft(event.target.value);setError('');}} onClear={()=>setDraft('')} clearLabel="Clear role or city" tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/> {results.length} sample results {results.map(job=>{job.title}{job.city})} {!results.length&&No sample roles match. Try a different title or city.} These are sample listings, not live vacancies. ; } createRoot(document.getElementById('root')).render(); ``` Kod referansı - onChange ham bir metin değil, giriş olayını alır. - Boş sorguda Ara kullanılabilir kalır ve ne girilmesi gerektiği açıklanır. - Aramayı temizle, hem taslak metni hem de uygulanan sonuçları sıfırlar. ## SEEK Braid Tasarım Sistemi AI Ajanı Kurulumu ### Uygulamaya Başlangıç Noktası Mevcut bir sku derlemesi için eksiksiz uygulama girişi; resmî kurulum sku’yu doğrudan destekler. Özel derleyiciler Vanilla Extract entegrasyonu gerektirir. Sıfırlama içe aktarması ilk sırada kalmalıdır. Çevrimdışı önizleme, yerel paket derlemesi yapıldığı iddiasında bulunmaz. ``` // Entry module in an existing sku application: // npm install braid-design-system import 'braid-design-system/reset'; // Keep this first. import React,{useState} from 'react'; import {createRoot} from 'react-dom/client'; import seekJobsTheme from 'braid-design-system/themes/seekJobs'; import {BraidProvider,Box,Stack,Heading,Text,TextField,Button,Actions,Card} from 'braid-design-system'; const jobs=[{id:1,title:'Product designer',city:'Melbourne'},{id:2,title:'Design systems engineer',city:'Sydney'},{id:3,title:'UX researcher',city:'Melbourne'}]; function JobSearch(){ const [draft,setDraft]=useState(''),[query,setQuery]=useState(''),[error,setError]=useState(''); const results=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(query.toLowerCase())); function search(){if(!draft.trim()){setError('Enter a role or city.');return;}setError('');setQuery(draft.trim());} function clear(){setDraft('');setQuery('');setError('');} return Find your next possibility {setDraft(event.target.value);setError('');}} onClear={()=>setDraft('')} clearLabel="Clear role or city" tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/> {results.length} sample results {results.map(job=>{job.title}{job.city})} {!results.length&&No sample roles match. Try a different title or city.} These are sample listings, not live vacancies. ; } createRoot(document.getElementById('root')).render(); ``` ### Projeniz İçin Bir İstem ``` seekJobs temasını, önce sıfırlamayı, TextField olay durumunu ve Actions bileşenini kullanarak bir Braid arama arayüzü oluşturun. Tek ana arama eylemi için açıkça brandAccent solid, sıfırlama için nötr ghost kullanın. Boş arama denemelerine izin verip hatayı açıklayın; doğrulamayı gizlemek için sıradan Button bileşenini hiçbir zaman devre dışı bırakmayın. ``` ## SEEK Braid Tasarım Sistemi Kaynakları ve Kapsam Bağımsız OpenDesign başvurusu. Özgün örnek ilanlar içerir; güncel iş ilanı veya başvuru gönderimi içermez. Adlandırılmış Braid değişkenleri seçilen tema üzerinden çözümlenir. - Kurulum ve derleme Sıfırlama sırası, sku ve Vanilla Extract. - BraidProvider Tema ve gömülü sayfanın body davranışı. - Değişkenler Kapsamlandırılmış CSS ifadeleri ve rol adları. - Ekran genişliği eşikleri Paylaşılan duyarlı eşikler. - Box Anlamsal öğeler ve duyarlı yardımcı prop’lar. - Metin Yazı boyutu, anlambilim ve bağlamsal tonlar. - Button Tone, variant ve devre dışı davranışı. - TextField Etiketler, hatalar ve temizleme. - TextField prop’ları Geri çağrı ve kontrollü değer türlerinin tam biçimleri. ## SEEK Braid Tasarım Sistemi İlgili Kaynaklar ### Segment Evergreen Gerçek tema değerleri, denetimli etiket girişi, kurallarla canlı eşleşme, boş durumdan kurtarma akışı ve yerel inceleme iletişim kutusu içeren bir Evergreen örneği. ### Semi Design Semi’nin önerdiği temel Steps bileşenleri, denetimli Input ve Switch bileşenleri, gerçek tema belirteçleri ve açık bir React 18 veya React 19 paket seçeneğiyle ardışık bir çalışma alanı kurulumu oluşturun. ### Semrush Intergalactic Güncel anlamsal ve grafik belirteçleri, yerel filtreleme denetimleri, sabit ölçekli karşılaştırma, seçili ayrıntı ve yeniden üretilebilir eksiksiz bir fikstür içeren bir Intergalactic kılavuzu. - [Uygulama başvurusu](https://seek-oss.github.io/braid-design-system/components/Button/) - [Kaynak](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Kaynak](https://seek-oss.github.io/braid-design-system/css/vars/) - [Kaynak](https://seek-oss.github.io/braid-design-system/components/Box/) - [Kaynak](https://seek-oss.github.io/braid-design-system/components/TextField/) - [Kaynak](https://seek-oss.github.io/braid-design-system/components/Button/) - [Kaynak](https://seek-oss.github.io/braid-design-system/components/Text/) - [Destekleyici belirtimi okuyun](https://seek-oss.github.io/braid-design-system/components/BraidProvider/) - [Destekleyici belirtimi okuyun](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Destekleyici belirtimi okuyun](https://seek-oss.github.io/braid-design-system/components/Text/) - [Destekleyici belirtimi okuyun](https://seek-oss.github.io/braid-design-system/components/Button/) - [Destekleyici belirtimi okuyun](https://seek-oss.github.io/braid-design-system/components/TextField/) - [Destekleyici belirtimi okuyun](https://seek-oss.github.io/braid-design-system/components/TextField/props/) - [Destekleyici belirtimi okuyun](https://github.com/seek-oss/braid-design-system) - [Kod referansı](https://seek-oss.github.io/braid-design-system/components/Button/) - [Kod referansı](https://seek-oss.github.io/braid-design-system/components/TextField/props/) - [Kurulum ve derleme Sıfırlama sırası, sku ve Vanilla Extract.](https://github.com/seek-oss/braid-design-system) - [BraidProvider Tema ve gömülü sayfanın body davranışı.](https://seek-oss.github.io/braid-design-system/components/BraidProvider/) - [Değişkenler Kapsamlandırılmış CSS ifadeleri ve rol adları.](https://seek-oss.github.io/braid-design-system/css/vars/) - [Ekran genişliği eşikleri Paylaşılan duyarlı eşikler.](https://seek-oss.github.io/braid-design-system/css/breakpoints/) - [Box Anlamsal öğeler ve duyarlı yardımcı prop’lar.](https://seek-oss.github.io/braid-design-system/components/Box/) - [Metin Yazı boyutu, anlambilim ve bağlamsal tonlar.](https://seek-oss.github.io/braid-design-system/components/Text/) - [Button Tone, variant ve devre dışı davranışı.](https://seek-oss.github.io/braid-design-system/components/Button/) - [TextField Etiketler, hatalar ve temizleme.](https://seek-oss.github.io/braid-design-system/components/TextField/) - [TextField prop’ları Geri çağrı ve kontrollü değer türlerinin tam biçimleri.](https://seek-oss.github.io/braid-design-system/components/TextField/props/)