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.
Semi tema ölçekleriyle Steps/Input/Switch davranışının çevrimdışı HTML yorumu. Yerel React örneği ayrıdır. · Uygulama başvurusu
02
Semi Design Tasarım Sistemi Tasarım Referansı
Semi resmî belgeleri ve varsayılan temanın SCSS anlık görüntüsü. $ adları derleme zamanı Sass sabitleridir; --semi-* adları çalışma zamanındaki CSS değişkenleridir. Uygulamanın iş akışı verileri özgündür.
Semi Design Tasarım Sistemi Gerçek React ana sürümüne uygun paketi seçin
Son ek entegrasyonu değiştirir
Semi'nin güncel Quick Start kılavuzu, React 19 paketini önceki React sürümlerinde kullanılan paketten ayrı tutar. Bu örnek açıkça React 18'i ve @douyinfe/semi-ui paketini seçer. Bunu React 19 ile değiştirmek için belgelenen @douyinfe/semi-ui-19 içe aktarımlarını ve bağımlılık seçimini kullanmak gerekir.
Desteklenen derleyiciler, ilgili CSS öğelerini bileşen JavaScript öğesinden yükler. Özel bir ön ek, tema derlemesi veya CSS katmanları gibi derleme zamanı değişikliklerinde farklı araç gereksinimleri vardır. Temel bir içe aktarma örneğini, her tema özelleştirmesinin yapılandırma gerektirmeden çalıştığı iddiasına dönüştürmeyin.
Semi Design Tasarım Sistemi Adlandırılmış Sass ölçekleri yoğunluğu somutlaştırır
Yayımlanan 24, 32 ve 40px kontrol yüksekliklerini kullanın
Semi'nin üç kontrol yüksekliği sabiti 24, 32 ve 40px'tir. Boşluk adları, düzenli olmayan bir artışla 2 ile 40px arasındaki değerleri kapsar. Sihirbazdaki varsayılan bir alan, yeni bir boşluk dili oluşturmadan 12px yardım metni boşluğunu ve sonraki bölümden 24px ayrımı kullanabilir.
Bu değerler Sass sabitleridir; otomatik olarak çalışma zamanı değişkenlerine dönüşmez. Örnek, özgün sayfa CSS öğesinde bu değerlerin karşılık geldiği ölçüleri kullanır. Geliştiricinin bir düzeni stil sayfasını yeniden oluşturmadan çalışma zamanında temalandırmak istemesi hâlinde bu fark önem kazanır.
Semi Design Tasarım Sistemi Gerçek boyut ve satır yüksekliği eşleşmelerini kullanın
Gövde metni ve başlıkların ritmi farklıdır
Normal mixin, 14px metni 20px satır yüksekliğiyle; küçük mixin ise 12px metni 16px satır yüksekliğiyle eşleştirir. Header 3, 24/32; Header 1 ise 32/44 ölçülerindedir. Kısa bir sihirbaz başlığında ilki kullanılabilir; ikincisi daha güçlü bir sayfa hiyerarşisi için ayrılabilir.
Kaynak yazı tipi ailesi Inter ile başlar, ardından platform ve CJK yedek yazı tipleri gelir. Çevrimdışı önizleme, kullanılabilir bir sistem yazı tipi yığınını kullanır ve belirli bir yazı tipini indirdiğini iddia etmez. Dar bir görünüm alanında adım çubuğu satır kaydırdığında da anlamlarını korumaları için adım adlarını kısa tutun.
Semi Design Tasarım Sistemi Tema rolleri ve palet kanalları birbirinden ayrıdır
Uygulama CSS öğesinde çözümlenmiş rolleri kullanın
Birincil rol, palet kanalı değişkenini rgba ile sarar. --semi-color-primary değerini sıradan bir renk özelliğinde kullanmak uygundur; ham --semi-blue-5 kanal listesi tek başına eksiksiz bir CSS rengi değildir. Açık ve koyu paletlerde kanal değerleri değişir.
Metin rolleri de opaklık kullanır. İkincil metin, gelişigüzel seçilmiş daha açık bir altıgen renk kodu değildir; devre dışı metin de önemli yardım metinlerinde kullanılmamalıdır. Sihirbaz, yapılandırma hazırlamanın etkin bir hesap oluşturmadığını belirtmek için tamamlanma mesajını nötr tutar.
Semi Design Tasarım Sistemi Basic Steps ilerlemeyi gösterir, doğrulamayı atlama izni vermez
Geçiş kurallarının sahibi uygulamadır
Semi, basit adım çubuğu için type="basic" kullanımını önerir. current sıfırdan başlar; geçerli adıma process, error veya desteklenen başka bir durum atanabilir. Eski varsayılan görünüm belgelerde kullanım dışı olarak işaretlenmiştir.
Örnek, Continue ve Previous kontrolleriyle adımlar arasında ilerlemeyi özellikle sağlar. Her adım tıklamasını setCurrent öğesine bağlamaz; böyle bir bağlantı, kullanıcının boş bir adla Review sayfasına ulaşmasına izin verebilir. Belgelerde ayrıca açıklanan nav görünümü etkileşimli değildir ve sihirbaz yönlendirmesiyle karıştırılmamalıdır.
İlk adımdan ayrılmadan önce adı doğrulayın.
Geri gezinirken seçilen haftalık özet e-postası Boolean değerini koruyun.
Review sayfasında ayarların tamamını gösterin.
Hesap veya aboneliğin oluşturulduğunu iddia etmeden yerel yapılandırmayı hazırlayın.
Semi Design Tasarım Sistemi Görsel doğrulama, değerin geçerliliğini doğrulamaz
Değer öncelikli geri çağrıyı doğru kullanın
Semi Input, onChange işlevini olaydan önce değerle çağırır. Bu nedenle örnekte setName doğrudan kullanılabilir. validateStatus yalnızca görünümü değiştirir; boş ad denetimi uygulama mantığıdır ve kullanıcıya görünür bir açıklama gerektirir.
Canlı sorguları tetikleyen metinlerde, IME girişi onaylanana kadar geri çağrıları ertelemek mümkündür. Çalışma alanı adı alanı canlı sorgu yapmadığından örnek, bu isteğe bağlı davranışı evrensel bir gereklilik gibi ele almak yerine kullanmaz.
Semi Design Tasarım Sistemi Bir tercih, anahtarının yanında da anlaşılır olmalıdır
Durumu üst bileşende tutun
Switch, checked özelliğini ve ilk bağımsız değişkeni Boolean olan bir onChange geri çağrısını kullanır. Etiket, Weekly digest gibi tercihi açıklamalı; çevresindeki metin de ayarın ne anlama geldiğini belirtmelidir. Uzun açık ve kapalı durum metinleri küçük kontrolün dışında yer almalı; küçük anahtarlar bu metinlerin içinde gösterilmesini desteklemez.
Tercihi tanımlayan, erişilebilir ve açık bir ad kullanın.
Sihirbaz adımları arasında geçerken tercih değerini koruyun.
Son değeri inceleme sayfasında sıradan metin olarak gösterin.
Semi Design Tasarım Sistemi Düğme türü ve teması farklı sorulara yanıt verir
Anlamsal rol ile görsel biçimlendirme
Semi Button type özelliği primary veya danger gibi bir rol seçer. theme özelliği ise light, solid, borderless veya outline gibi görsel biçimlendirmeyi seçer. Örnek, düğmeyi daha görünür kılmak için danger değerini yanlış kullanmak yerine solid primary Continue eylemini ve daha geri planda kalan bir Previous eylemini kullanır.
Çevrimdışı örnek, adım değiştiğinde odağı yeni bölüm başlığına; doğrulama başarısız olduğunda ise geçersiz alana taşır. Mobil düzeni ve klavye gezinme sırası, kaynak kodu incelenmiş yerel React örneğinden bağımsız olarak sınanır.
Belgenin tamamını index.html adıyla kaydedin ve tarayıcıda açın. Semi tema ölçekleriyle Steps/Input/Switch davranışının çevrimdışı HTML yorumu. Yerel React örneği ayrıdır.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Semi workspace setup interpretation</title><style>
*{box-sizing:border-box}body{margin:0;background:#f5f6f8;color:#1c1f23;font:14px/20px Inter,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer;min-height:32px;border:0;border-radius:3px;padding:6px 16px;background:rgba(46,50,56,.05);color:inherit}button.primary{background:#0064fa;color:white}button.primary:hover{background:#0062d6}button:focus-visible,input:focus-visible{outline:2px solid #0064fa;outline-offset:3px}header{padding:20px 32px;border-bottom:1px solid rgba(28,31,35,.08);background:white;display:flex;justify-content:space-between;gap:16px}header strong{font-size:16px}header span,.muted{color:#63656a}main{max-width:950px;margin:32px auto;padding:0 24px}h1{font-size:24px;line-height:32px;font-weight:600;margin:0 0 8px}h2{font-size:20px;line-height:28px;font-weight:600;margin:0 0 12px}p{margin:0 0 16px}.card{background:white;border:1px solid rgba(28,31,35,.08);border-radius:12px;overflow:hidden;margin-top:24px}.steps{padding:24px;display:flex;list-style:none;margin:0;border-bottom:1px solid rgba(28,31,35,.08);gap:12px}.steps li{flex:1;display:flex;align-items:center;gap:8px;color:#63656a;font-size:12px}.steps b{height:24px;width:24px;border-radius:50%;display:grid;place-items:center;background:#eee;flex-shrink:0}.steps [aria-current]{color:#0064fa}.steps [aria-current] b{background:#0064fa;color:white}.steps .done b{background:#eaf5ff;color:#0064fa}.workspace{display:grid;grid-template-columns:1fr 240px;min-height:300px}.panel{padding:32px}.illustration{background:#eaf5ff;display:flex;flex-direction:column;justify-content:center;padding:24px;gap:12px}.mini{background:white;box-shadow:0 6px 20px #0064fa12;border-radius:6px;padding:16px;transform:rotate(-3deg)}.mini i{display:block;height:8px;background:#eaf5ff;width:80%;margin:8px 0;border-radius:3px}.mini i:first-child{background:#0064fa;width:36%}.mini i:nth-child(3){width:55%}.mini:last-child{transform:rotate(4deg);margin-left:20px}.mini span{font-size:12px;color:#63656a}.form-label{display:block;font-weight:600;margin:20px 0 8px}input[type=text]{height:32px;background:rgba(46,50,56,.05);border:1px solid transparent;border-radius:3px;padding:5px 12px;width:100%}input[aria-invalid=true]{border-color:#d52515}.error{color:#b21b13;min-height:20px;font-size:12px;margin:8px 0}.preference{border:1px solid #eee;border-radius:6px;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:20px}.preference p{margin:4px 0 0;font-size:12px}.toggle{appearance:none;width:40px;height:24px;border-radius:999px;background:#bbb;position:relative;cursor:pointer;flex-shrink:0}.toggle:checked{background:#0064fa}.toggle:before{content:'';position:absolute;left:3px;top:3px;background:white;border-radius:50%;width:18px;height:18px}.toggle:checked:before{left:19px}footer{display:flex;justify-content:space-between;padding:20px 32px;border-top:1px solid rgba(28,31,35,.08)}dl{margin:20px 0}dt{color:#63656a;font-size:12px}dd{margin:4px 0 20px;font-size:16px;font-weight:600;overflow-wrap:anywhere}#result{margin-top:16px;border-radius:6px;background:#eaf5ff;padding:16px}#result:empty{display:none}.boundary{font-size:12px;margin-top:20px;color:#63656a}h2:focus{outline:none}@media(max-width:600px){header{padding:16px}header span{display:none}main{margin:24px auto;padding:0 16px}.workspace{grid-template-columns:1fr}.illustration{display:none}.steps{padding:16px;gap:8px}.steps li{flex-direction:column;align-items:flex-start;gap:4px}.panel{padding:24px 20px}footer{padding:16px 20px;gap:12px}footer button{padding:6px 12px}}
</style><header><strong>◒ Workspace</strong><span>Configuration studio</span></header><main><h1>Make room for your team</h1><p class="muted">Three steps to prepare a workspace configuration.</p><div class="card"><ol class="steps" aria-label="Setup progress"><li><b>1</b>Name workspace</li><li><b>2</b>Choose updates</li><li><b>3</b>Review settings</li></ol><div class="workspace"><section class="panel" id="panel"></section><aside class="illustration" aria-hidden="true"><div class="mini"><i></i><i></i><i></i><span>A place for shared ideas</span></div><div class="mini"><i></i><i></i><i></i><span>Updates on your terms</span></div></aside></div><footer><button id="previous">Previous</button><button class="primary" id="next">Continue</button></footer></div><div id="result" role="status"></div><p class="boundary">Independent HTML interpretation of Semi’s theme and components. This example stores a draft only in memory; it does not create an account.</p></main><script>
let step=0,name='',digest=true;const panel=document.querySelector('#panel'),next=document.querySelector('#next'),previous=document.querySelector('#previous'),result=document.querySelector('#result');function render(focus=false){document.querySelectorAll('.steps li').forEach((el,i)=>{el.className=i<step?'done':'';el.removeAttribute('aria-current');if(i===step)el.setAttribute('aria-current','step')});previous.style.visibility=step?'visible':'hidden';next.textContent=step===2?'Prepare configuration':'Continue';if(step===0){panel.innerHTML='<h2 tabindex="-1">Name your workspace</h2><p class="muted">Choose a name your team will recognize.</p><label class="form-label" for="name">Workspace name</label><input id="name" type="text" placeholder="e.g. Studio North" autocomplete="organization" aria-describedby="help error"><p id="error" class="error" role="alert"></p><p id="help" class="muted">You can revisit this step before preparing the configuration.</p>';let input=document.querySelector('#name');input.value=name;input.oninput=()=>{name=input.value;input.removeAttribute('aria-invalid');document.querySelector('#error').textContent='';result.textContent=''};input.onkeydown=e=>{if(e.key==='Enter')next.click()}}else if(step===1){panel.innerHTML='<h2 tabindex="-1">Choose your updates</h2><p class="muted">Keep the weekly digest in your configuration, or switch it off.</p><label class="preference"><span><strong>Weekly digest</strong><p class="muted">A weekly summary of workspace activity.</p></span><input class="toggle" type="checkbox" role="switch" aria-label="Weekly digest" id="digest"></label>';let input=document.querySelector('#digest');input.checked=digest;input.onchange=()=>{digest=input.checked;result.textContent=''}}else{panel.innerHTML='<h2 tabindex="-1">Review settings</h2><p class="muted">Check the draft before preparing it.</p><dl><dt>Workspace name</dt><dd id="review-name"></dd><dt>Weekly digest</dt><dd id="review-digest"></dd></dl>';document.querySelector('#review-name').textContent=name.trim();document.querySelector('#review-digest').textContent=digest?'Enabled':'Disabled'}if(focus)panel.querySelector('h2').focus()}
next.onclick=()=>{if(step===0&&!name.trim()){document.querySelector('#error').textContent='Enter a workspace name.';let input=document.querySelector('#name');input.setAttribute('aria-invalid','true');input.focus();return}if(step<2){step++;render(true)}else result.textContent='Configuration prepared locally: '+name.trim()+' · Weekly digest '+(digest?'enabled':'disabled')+'. No account created.'};previous.onclick=()=>{step=Math.max(0,step-1);result.textContent='';render(true)};render();
</script></html>
Continue, ilerlemeden önce çalışma alanı adını doğrular. Bu belge adımları yorumlar; ayrı React girdisi, React 18 ve 19 arasındaki paket sınırını belirtir.
Doğrulama içeren üç adımlı yapılandırma sihirbazı
Basic Steps geçerli ilerlemeyi izler; Input ve Switch değerleri sayfalar arasında korur. Continue adı doğrular; son eylem yalnızca yerel yapılandırmayı hazırlar.
jsx
// React 18 example. React 19 uses @douyinfe/semi-ui-19 instead.
// npm install react@18 react-dom@18 @douyinfe/semi-ui
import React,{useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Steps,Input,Switch,Button} from '@douyinfe/semi-ui';
function WorkspaceSetup(){
const [current,setCurrent]=useState(0),[name,setName]=useState('');
const [digest,setDigest]=useState(true),[error,setError]=useState('');
const [prepared,setPrepared]=useState(false);
function next(){
if(current===0&&!name.trim()){setError('Enter a workspace name.');return;}
setError('');setCurrent(n=>Math.min(2,n+1));
}
return <main style={{maxWidth:760,margin:'auto',padding:24,color:'var(--semi-color-text-0)'}}>
<h1>Workspace setup</h1>
<Steps type="basic" current={current} status={error?'error':'process'}>
<Steps.Step title="Name workspace"/>
<Steps.Step title="Choose updates"/>
<Steps.Step title="Review settings"/>
</Steps>
<section style={{padding:'24px 0'}}>
{current===0&&<><label htmlFor="workspace-name">Workspace name</label>
<Input id="workspace-name" value={name} onChange={setName}
validateStatus={error?'error':'default'} aria-invalid={!!error} aria-describedby="error" />
<p id="error" role="alert">{error}</p></>}
{current===1&&<><h2>Weekly digest</h2><p>Include a weekly activity summary in the local configuration.</p>
<Switch checked={digest} onChange={setDigest} aria-label="Weekly digest"/></>}
{current===2&&<><h2>Review your draft</h2><dl><dt>Workspace</dt><dd>{name}</dd>
<dt>Weekly digest</dt><dd>{digest?'Enabled':'Disabled'}</dd></dl>
<p>No workspace or notification subscription is created.</p></>}
</section>
{current>0&&<Button onClick={()=>{setCurrent(n=>n-1);setPrepared(false);}}>Previous</Button>}
{current<2 ? <Button theme="solid" type="primary" onClick={next}>Continue</Button> :
<Button theme="solid" type="primary" onClick={()=>setPrepared(true)}>Prepare configuration</Button>}
<p role="status">{prepared?'Configuration prepared locally. No account created.':''}</p>
</main>;
}
createRoot(document.getElementById('root')).render(<WorkspaceSetup />);
React 18 örneği özellikle @douyinfe/semi-ui paketini yükler; React 19 ise Quick Start'ta belgelenen -19 paketini gerektirir.
Semi bileşen JavaScript öğesi, desteklenen derleyicilerde ilişkili CSS öğelerini içe aktarır; varsayılan kurulum, uydurma bir genel stil sayfası adımı gerektirmez.
Gömülü HTML örneğinde odak hareketi açıkça tanımlanmıştır; üründeki yerel bileşenlerde de bu davranışı uygulayın.
04
Semi Design Tasarım Sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Bağımlılık dallarından birini seçin. Örnek React 18'i kullanır. Güncel Quick Start, bileşen JavaScript öğesinin Vite/Webpack/Rspack'te ilişkili CSS öğesini içe aktardığını belirtir; tema derlemesi için ek araçlar gerekir.
bash
npm install react@18 react-dom@18 @douyinfe/semi-ui
# For a React 19 application instead:
# npm install react@19 react-dom@19 @douyinfe/semi-ui-19
Projeniz İçin Bir İstem
Ajan İstemi
Semi basic Steps'i denetimli Input ve Switch bileşenleriyle kullanın. React paketini yüklenen React ana sürümüyle eşleştirin. İlerlemeden önce doğrulayın, Previous ile gezinirken verileri koruyun ve sahte bir hesap oluşturma sonucu göstermeden son yerel yapılandırmayı sunun.
05
Semi Design Tasarım Sistemi Kaynaklar ve Kapsam
Bağımsız OpenDesign referansı. Özgün çalışma alanı örneği; hesap oluşturulmaz veya bildirim aboneliği başlatılmaz.
