# Semi Design Tasarım Sistemi ## Semi Design Tasarım Sistemi Arayüz Önizlemesi Bir adı doğrulayın, özet e-postası tercih edin, önceki adımlara dönün ve son yerel yapılandırmayı inceleyin. ## 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. ### Boşluk ve kontrol boyutları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | $height-control-small / default / large | 24 / 32 / 40px | Yayımlanan kontrol yükseklikleri. | | $spacing-super-tight | 2px | En dar boşluk. | | $spacing-extra-tight | 4px | Çok dar boşluk. | | $spacing-tight | 8px | Dar boşluk. | | $spacing-base-tight | 12px | Kompakt grup boşluğu. | | $spacing-base | 16px | Varsayılan boşluk. | | $spacing-base-loose | 20px | Daha geniş gruplama. | | $spacing-loose | 24px | Bölüm aralığı. | | $spacing-extra-loose | 32px | Geniş ayrım. | | $spacing-super-loose | 40px | Bu kümedeki adlandırılmış en büyük boşluk. | ### Tipografi eşleşmeleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | font-size-small mixin | 12 / 16px | Boyut variables.scss dosyasından, satır yüksekliği mixin'den alınır. | | font-size-regular mixin | 14 / 20px | Gövde metni. | | font-size-header-6 mixin | 16 / 22px | Küçük başlık. | | font-size-header-4 mixin | 20 / 28px | Bölüm başlığı. | | font-size-header-3 mixin | 24 / 32px | Sayfa başlığı seçeneği. | | font-size-header-1 mixin | 32 / 44px | Adlandırılmış en büyük başlık. | ### Tema rolü eşlemeleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --semi-color-primary | rgba(var(--semi-blue-5),1) | Açık palet rgb(0,100,250) değerine karşılık gelir. | | --semi-color-primary-hover | rgba(var(--semi-blue-6),1) | Açık palet rgb(0,98,214) değerine karşılık gelir. | | --semi-color-text-0 | rgba(var(--semi-grey-9),1) | Açık temadaki birincil metin rgb(28,31,35) değerine karşılık gelir. | | --semi-color-text-2 | Grey 9 at .62 opacity in light mode | İkincil metin; koyu temada farklı bir opaklık kullanılır. | | --semi-color-fill-0 | Grey 8 at .05 opacity in light mode | Hafif dolgu, arka plan katmanına uyum sağlar. | | --semi-border-radius-small | 3px | Yaygın kontroller. | | --semi-border-radius-medium | 6px | Menüler ve benzeri yüzeyler. | | --semi-border-radius-large | 12px | Büyük kapsayıcı rolü. | | --semi-border-radius-full | 9999px | Hap biçimli görünüm. | ### Steps sözleşmesi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | type="basic" | Recommended simple step bar | Belgelerde eski varsayılan stil kullanım dışı olarak işaretlenmiştir. | | current | Zero-based number | 0'dan başlar. | | status | wait / process / finish / error / warning | Geçerli adımın durumu. | | type="nav" | Non-interactive navigation appearance | Tıklanabilir bir sihirbazın kestirme yolu değildir. | | onChange(index) | Index includes initial offset | Gezinmeye izin verilip verilmeyeceğine uygulama karar verir. | ### Input ve Switch | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Input onChange | (value,event) | İlk bağımsız değişken yeni değerdir. | | Input validateStatus | default / error / warning | Yalnızca görsel biçimlendirme yapar; iş verilerini doğrulamaz. | | Input composition | Boolean, false by default | Etkinleştirildiğinde, IME onayı gelene kadar onChange çağrısını geciktirir. | | Input aria-describedby | Description ID | Yardım ve hata metinlerini ilişkilendirin. | ### Switch ve düğme varyantları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Switch checked | Controlled Boolean | Tercihi üst bileşenin durumunda tutun. | | Switch onChange | (checked,event) | Boolean değeri doğrudan kullanın. | | Switch aria-label | Meaningful state label | Görsel anahtarı değil, tercihi açıklayın. | | Switch size="small" | No checkedText / uncheckedText treatment | Uzun etiketleri anahtarın dışında tutun. | ## Semi Design Tasarım Sistemi Eksiksiz Kılavuz 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ı. ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. 1. İlk adımdan ayrılmadan önce adı doğrulayın. 2. Geri gezinirken seçilen haftalık özet e-postası Boolean değerini koruyun. 3. Review sayfasında ayarların tamamını gösterin. 4. Hesap veya aboneliğin oluşturulduğunu iddia etmeden yerel yapılandırmayı hazırlayın. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## Semi Design Tasarım Sistemi Bileşen Örnekleri ### Tamamlanmış, bağımsız ve etkileşimli örnek 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. ``` Semi workspace setup interpretation
◒ WorkspaceConfiguration studio

Make room for your team

Three steps to prepare a workspace configuration.

  1. 1Name workspace
  2. 2Choose updates
  3. 3Review settings

Independent HTML interpretation of Semi’s theme and components. This example stores a draft only in memory; it does not create an account.

``` Kod referansı - 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. ``` // 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

Workspace setup

{current===0&&<> } {current===1&&<>

Weekly digest

Include a weekly activity summary in the local configuration.

} {current===2&&<>

Review your draft

Workspace
{name}
Weekly digest
{digest?'Enabled':'Disabled'}

No workspace or notification subscription is created.

}
{current>0&&} {current<2 ? : }

{prepared?'Configuration prepared locally. No account created.':''}

; } createRoot(document.getElementById('root')).render(); ``` Kod referansı - 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. ## 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. ``` 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 ``` 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. ``` ## 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. - Hızlı Başlangıç React-major paket bölünmesi ve CSS yüklemesi. - Tema değişkenleri Gerçek boşluklar, boyutlar ve yazı tipi boyutları. - Yazı tipi karışımları Sabit satır yükseklikleri. - Çalışma zamanı rolleri Renk rolleri, köşe yarıçapları ve tema seçicileri. - Palet kanalları Çözümlenmiş açık ve koyu kanal değerleri. - Adımlar Önerilen görünüm ve geçerli durum. - Input Geri çağırmalar ve doğrulama sınırları. - Switch Denetimli tercih durumu. - Button Rol ve görsel biçimlendirme. ## Semi Design Tasarım Sistemi İlgili Kaynaklar ### 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. ### ServiceNow Horizon Taslağı koruma, doğrulama, durum filtreleri ve kurtarma içeren eksiksiz bir yerel talep inceleme akışı üzerinden Horizon Workspace’in kesin aralık, yarıçap ve tipografi referanslarını keşfedin. ### ServiceTitan Anvil Anvil2’yi üç katmanlı belirteç modeli, doğrulanmış açık/koyu rol değerleri ve teknisyen, saat ve inceleme durumlarını eşzamanlı güncelleyen eksiksiz bir hizmet atama etkileşimiyle somutlaştırın. - [Uygulama başvurusu](https://semi.design/en-US/navigation/steps) - [Kaynak](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/variables.scss) - [Kaynak](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/_font.scss) - [Kaynak](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/global.scss) - [Kaynak](https://semi.design/en-US/navigation/steps) - [Kaynak](https://semi.design/en-US/input/input) - [Kaynak](https://semi.design/en-US/input/switch) - [Destekleyici belirtimi okuyun](https://semi.design/en-US/start/getting-started) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/variables.scss) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/_font.scss) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/global.scss) - [Destekleyici belirtimi okuyun](https://semi.design/en-US/navigation/steps) - [Destekleyici belirtimi okuyun](https://semi.design/en-US/input/input) - [Destekleyici belirtimi okuyun](https://semi.design/en-US/input/switch) - [Destekleyici belirtimi okuyun](https://semi.design/en-US/basic/button) - [Kod referansı](https://semi.design/en-US/navigation/steps) - [Hızlı Başlangıç React-major paket bölünmesi ve CSS yüklemesi.](https://semi.design/en-US/start/getting-started) - [Tema değişkenleri Gerçek boşluklar, boyutlar ve yazı tipi boyutları.](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/variables.scss) - [Yazı tipi karışımları Sabit satır yükseklikleri.](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/_font.scss) - [Çalışma zamanı rolleri Renk rolleri, köşe yarıçapları ve tema seçicileri.](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/global.scss) - [Palet kanalları Çözümlenmiş açık ve koyu kanal değerleri.](https://raw.githubusercontent.com/DouyinFE/semi-design/main/packages/semi-theme-default/scss/_palette.scss) - [Adımlar Önerilen görünüm ve geçerli durum.](https://semi.design/en-US/navigation/steps) - [Input Geri çağırmalar ve doğrulama sınırları.](https://semi.design/en-US/input/input) - [Switch Denetimli tercih durumu.](https://semi.design/en-US/input/switch) - [Button Rol ve görsel biçimlendirme.](https://semi.design/en-US/basic/button)