Temaya özel değişkenler, dört gerçek kesme noktası, bağlama uygun metin, farklı düğme tonları ve eylemi devre dışı bırakmak yerine doğrulamayı açıklayan denetimli bir alan içeren özgün bir iş arama düzeniyle Braid’i anlayın.
Braid arama bileşimi, hiyerarşisi ve kesme noktası yönergelerinin özgün ve çevrimdışı HTML yorumu; canlı SEEK verisi veya Braid çalışma zamanı içermez. Önizleme renkleri ve yatay boşluklar uygulama tercihleridir. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
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.
Düzenlemeleri taslak sorgu durumunda tutun.
Ara’ya basıldığında, baştaki ve sondaki boşlukları temizlenmiş sorgunun boş olmadığını doğrulayın.
Başarısızlık durumunda açıklayıcı ve kritik bir mesaj gösterin.
Başarılı olduğunda sorguyu uygulayın ve sonuç bulunmaması durumunu açıkça koruyun.
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.
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.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Braid sample job search interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f5f5;color:#222;font:16px/1.5 system-ui,sans-serif}header{background:white;padding:16px 32px;border-bottom:1px solid #ddd;display:flex;align-items:center;justify-content:space-between}header strong{color:#0d3880;font-size:20px}header span{font-size:14px;color:#666}.hero{background:#0d3880;color:white;padding:32px}.hero-inner{max-width:980px;margin:auto}h1{font-size:32px;line-height:1.2;margin:0 0 24px}form{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:end}label{display:block;font-weight:600;margin-bottom:8px}input{height:48px;border:1px solid #aaa;border-radius:4px;padding:10px 12px;font:inherit;width:100%;min-width:0;color:#222}input[aria-invalid=true]{border:2px solid #c90040}button{height:48px;border:1px solid transparent;border-radius:4px;font:600 16px/1.2 system-ui;padding:0 24px;cursor:pointer}.search{background:#e60278;color:white}.clear{background:transparent;color:white;border-color:white}button:focus-visible,input:focus-visible{outline:3px solid #69d8ff;outline-offset:3px}.error{background:white;color:#b70040;padding:8px 12px;margin:16px 0 0;border-radius:4px}.error:empty{display:none}.help{font-size:14px;color:#e4eaf6;margin:16px 0 0}main{max-width:1044px;margin:32px auto;padding:0 32px}.results-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:20px}h2{font-size:24px;line-height:1.3;margin:0 0 8px}.applied{font-size:14px;color:#555}article{display:grid;grid-template-columns:1fr 100px;gap:24px;padding:24px;background:white;border:1px solid #ddd;border-radius:4px;margin-bottom:16px}.company{font-size:14px;color:#555}.meta{margin:16px 0;display:flex;gap:8px;flex-wrap:wrap}.meta span{background:#f0f4fb;padding:4px 8px;font-size:12px;border-radius:4px}article p{margin:0;color:#555;font-size:14px}.monogram{background:#f1e5f4;color:#673b78;height:72px;width:72px;border-radius:12px;display:grid;place-items:center;font-weight:700;font-size:24px;justify-self:end}.monogram.blue{color:#0d3880;background:#e4efff}.monogram.green{color:#326342;background:#e8f4eb}.notice{background:white;border:1px solid #ddd;padding:24px}.boundary{font-size:12px;color:#666;margin:24px 0}@media(max-width:739px){header{padding:16px}header span{display:none}.hero{padding:24px 16px}h1{font-size:28px}form{grid-template-columns:1fr;gap:12px}form button{width:100%}main{padding:0 16px;margin:24px auto}article{padding:20px;grid-template-columns:1fr 48px;gap:12px}.monogram{height:48px;width:48px;font-size:18px}article h2{font-size:20px}.results-head{display:block}}</style><header><strong>Possibilities</strong><span>Original job-search specimen</span></header><section class="hero"><div class="hero-inner"><h1>Find your next possibility.</h1><form novalidate><div><label for="query">Role or city</label><input id="query" type="search" placeholder="Try designer or Melbourne" aria-describedby="error help"></div><button class="search" type="submit">Search jobs</button><button class="clear" type="button" id="clear">Clear search</button></form><div id="error" class="error" role="alert"></div><p id="help" class="help">Search three original sample roles. These are not live vacancies.</p></div></section><main><div class="results-head"><div><h2 id="count">3 sample results</h2><div class="applied" id="applied">Showing all sample roles</div></div></div><div id="results"></div><p class="boundary">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.</p></main><script>const jobs=[{title:'Product designer',city:'Melbourne',company:'North Studio',type:'Full time',mode:'Hybrid',initial:'NS',color:'',description:'Shape useful experiences with a small multidisciplinary product team.'},{title:'Design systems engineer',city:'Sydney',company:'Harbour Works',type:'Full time',mode:'Flexible',initial:'HW',color:'blue',description:'Build accessible components and improve the way teams deliver interfaces.'},{title:'UX researcher',city:'Melbourne',company:'Fern Collective',type:'Contract',mode:'On site',initial:'FC',color:'green',description:'Turn thoughtful field research into clear product opportunities.'}];const input=document.querySelector('#query'),error=document.querySelector('#error');let applied='';function render(){let matches=jobs.filter(j=>(j.title+' '+j.city).toLowerCase().includes(applied.toLowerCase()));document.querySelector('#count').textContent=matches.length+' sample '+(matches.length===1?'result':'results');document.querySelector('#applied').textContent=applied?'Applied search: '+applied:'Showing all sample roles';document.querySelector('#results').innerHTML=matches.length?matches.map(j=>`<article><div><h2>${j.title}</h2><div class="company">${j.company} · ${j.city}</div><div class="meta"><span>${j.type}</span><span>${j.mode}</span><span>Sample listing</span></div><p>${j.description}</p></div><div class="monogram ${j.color}" aria-hidden="true">${j.initial}</div></article>`).join(''):'<div class="notice">No sample roles match. Try another role or city, or clear your search.</div>'}document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!input.value.trim()){error.textContent='Enter a role or city.';input.setAttribute('aria-invalid','true');input.focus();return}error.textContent='';input.removeAttribute('aria-invalid');applied=input.value.trim();render()};input.oninput=()=>{error.textContent='';input.removeAttribute('aria-invalid')};document.querySelector('#clear').onclick=()=>{input.value='';applied='';error.textContent='';input.removeAttribute('aria-invalid');render();input.focus()};render();</script></html>
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.
jsx
// 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 <Box component="main" padding={{mobile:'medium',tablet:'xlarge'}}>
<Stack space="large">
<Heading level="2">Find your next possibility</Heading>
<TextField id="job-query" label="Role or city" value={draft}
onChange={event=>{setDraft(event.target.value);setError('');}}
onClear={()=>setDraft('')} clearLabel="Clear role or city"
tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/>
<Actions><Button tone="brandAccent" variant="solid" onClick={search}>Search jobs</Button>
<Button variant="ghost" onClick={clear}>Clear search</Button></Actions>
<Text>{results.length} sample results</Text>
{results.map(job=><Card key={job.id}><Stack space="small"><Heading level="3">{job.title}</Heading><Text tone="secondary">{job.city}</Text></Stack></Card>)}
{!results.length&&<Text>No sample roles match. Try a different title or city.</Text>}
<Text size="small" tone="secondary">These are sample listings, not live vacancies.</Text>
</Stack>
</Box>;
}
createRoot(document.getElementById('root')).render(<BraidProvider theme={seekJobsTheme}><JobSearch/></BraidProvider>);
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.
04
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.
jsx
// 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 <Box component="main" padding={{mobile:'medium',tablet:'xlarge'}}>
<Stack space="large">
<Heading level="2">Find your next possibility</Heading>
<TextField id="job-query" label="Role or city" value={draft}
onChange={event=>{setDraft(event.target.value);setError('');}}
onClear={()=>setDraft('')} clearLabel="Clear role or city"
tone={error?'critical':'neutral'} message={error||'Search three original sample roles.'}/>
<Actions><Button tone="brandAccent" variant="solid" onClick={search}>Search jobs</Button>
<Button variant="ghost" onClick={clear}>Clear search</Button></Actions>
<Text>{results.length} sample results</Text>
{results.map(job=><Card key={job.id}><Stack space="small"><Heading level="3">{job.title}</Heading><Text tone="secondary">{job.city}</Text></Stack></Card>)}
{!results.length&&<Text>No sample roles match. Try a different title or city.</Text>}
<Text size="small" tone="secondary">These are sample listings, not live vacancies.</Text>
</Stack>
</Box>;
}
createRoot(document.getElementById('root')).render(<BraidProvider theme={seekJobsTheme}><JobSearch/></BraidProvider>);
Projeniz İçin Bir İstem
Ajan İstemi
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.
05
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.
