# TDesign Tasarım Sistemi

## TDesign Tasarım Sistemi arayüz önizlemesi

Bir kuralı doğrulayın, yerel etkisini inceleyin ve kaldırın. Hiçbir ilke dağıtıma alınmaz.

## TDesign Tasarım Sistemi tasarım başvurusu

Geçerli herkese açık develop dalı tema ve bileşen kaynaklarıyla TDesign React. Tema değerleri kaynak anlık görüntüleridir; belirli bir paket sürümüyle uyumluluk garantisi değildir. Bağımsız önizleme bir HTML yorumudur; React örneği gerçek API paketini kullanır.

### Açık tema rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --td-brand-color | #0052d9 | Marka paletinin 7. adımından çözümlenen birincil eylem. |
| --td-brand-color-hover | #366ef4 | Birincil eylemin üzerine gelme durumu. |
| --td-brand-color-active | #003cab | Basılı eylem. |
| --td-brand-color-light | #f2f3ff | Hafifçe vurgulanan seçili yüzey. |
| --td-bg-color-page | #eee | Dış çalışma yüzeyi. |
| --td-bg-color-container | #fff | Düzenleyici ve tablo panelleri. |
| --td-text-color-primary | rgba(0,0,0,.9) | Ana metin. |
| --td-text-color-secondary | rgba(0,0,0,.6) | Yardımcı metin. |
| --td-border-level-1-color | #e8e8e8 | Ayırıcılar. |
| --td-border-level-2-color | #ddd | Denetim kenarlıkları. |
| --td-error-color | #d54941 | Alan hatası rolü. |
| --td-success-color | #2ba471 | Olumlu durum rolü; yalnızca renge bakarak kontrast hakkında çıkarım yapmayın. |
### Tipografi rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --td-font-family | PingFang SC, Microsoft YaHei, Arial Regular | Sistem odaklı yazı tipi yığını; bu bildirim yazı tiplerini indirmez. |
| --td-font-body-small | 12px / 20px | İkincil, kompakt etiketler. |
| --td-font-body-medium | 14px / 22px | Konsol gövde metni. |
| --td-font-body-large | 16px / 24px | Daha büyük metin boyutu. |
| --td-font-title-medium | 600 16px / 24px | Panel başlığı. |
| --td-font-headline-small | 600 24px / 32px | Sayfa başlığı. |
| --td-font-display-medium | 600 48px / 56px | Başlık rolü; ilke düzenleyicisinde gerekli değildir. |
### Boyut ve anlamsal boşluk

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --td-size-1 … --td-size-8 | 2, 4, 6, 8, 12, 16, 20, 24px | Doğrusal olmayan temel ölçek. |
| --td-size-9 … --td-size-16 | 28, 32, 36, 40, 48, 56, 64, 72px | Daha büyük ölçek değerleri. |
| --td-comp-size-m | 32px | Orta bileşen yüksekliği takma adı. |
| --td-comp-paddingLR-m | 12px | Orta yatay dolgu takma adı. |
| --td-comp-paddingTB-l | 16px | Büyük dikey dolgu takma adı. |
| --td-comp-margin-xl | 20px | Boşluk takma adı, xl dolgudan farklıdır. |
| --td-pop-padding-xxl | 16px | Açılır pencere dolgusu takma adı. |
### Köşe biçimi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --td-radius-small | 2px | Küçük yarıçap. |
| --td-radius-default | 3px | Varsayılan yarıçap. |
| --td-radius-medium | 6px | Orta yarıçap. |
| --td-radius-large | 9px | Büyük yarıçap. |
| --td-radius-extraLarge | 12px | Ekstra büyük yarıçap. |
| --td-radius-round | 999px | Hap biçimli görünüm. |
| --td-radius-circle | 50% | Dairesel biçim için eşit boyutlar gerekir. |
### Form ve tablo sözleşmeleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Form.useForm() | [form] | Örneği Form bileşenine aktarın. |
| FormItem name | Registered field key | Gönderilen alanlarla eşleşmeli ve setFields hatalarını ayarlamalıdır. |
| Form onSubmit | event.validateResult === true | Uygulama güncellemelerini yalnızca doğrulama başarılı olduğunda yapın. |
| form.setFields | name + status + validateMessage | Somut bir alan hatası ayarlayın. |
| FormItem for | Input association | Resmî Switch örneğinde for="status" kullanılır. |
### Veri tablosu yapılandırması

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| rowKey | Stable unique data property | Örnek, her kural için bir kez id oluşturur. |
| columns[].colKey | Data key or custom cell key | Özel bir eylem sütunu kullanın. |
| columns[].cell | ({row,col,rowIndex,colIndex}) | Satıra özgü denetimleri görüntüleyin. |
| tableLayout | fixed by default; auto available | Uzun kaynak yolları için sütun genişliklerini belirleyin. |
| disableDataPage | false by default | Açıkça devre dışı bırakılmadığı sürece yerel sayfalama Table tarafından yönetilir. |
## TDesign Tasarım Sistemi kapsamlı 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ı.

## TDesign Tasarım Sistemi: Açık uygulama ailelerine sahip bir konsol sistemi

### React uygulamasını seçin

> TDesign için farklı çerçevelere yönelik uygulamalar bulunur. Bu örnek, benzer adlı bir Vue paketi veya mobil bileşen grubu yerine özellikle tdesign-react kullanır. Genel stil sayfası entegrasyonun bir parçasıdır: yalnızca bir bileşeni içe aktarmak, gösterilen yerleşim ve tema kurallarını sağlamaz.

İşe yarar yapı taşı, yapılandırılmış bir Tablo'nun yanında kayıtlı bir Form'dur. Ad, kaynak yolu ve etkinleştirme birer veri alanıdır; satır kaldırma ise tablo eylemidir. Bu örnekte yetkilendirme arka ucu olmadığı için API öğesinin artık korunduğunu belirten sayfa genelinde bir ifade gerçeği yansıtmaz.

Destekleyici belirtimi okuyun

## TDesign Tasarım Sistemi: Gerçek koyu mod farklılıklarını içeren anlamsal renkler

### Marka paletinin yedinci adımı tüm modlarda geçerli değildir

Açık temada marka rolü yedinci adımla, koyu temada ise sekizinci adımla çözümlenir. Açık maviyi her bileşene kopyalamak yerine, anlamsal değişkeni uygulamanızın CSS içinde koruyun. Koyu arka plan #181818, kapsayıcı ise #242424 değerindedir; bunlar ayrı yüzey rolleridir.

Önizleme özellikle açık modda kalır. Yerel bir uygulamada, yayımlanmış koyu kuralları seçmek için belge kökünde theme-mode="dark" ayarını kullanın; özel ilke görselini yeniden renklendirmek için filtre uygulamak yerine ayrı kapsamda tutun.

```
document.documentElement.setAttribute('theme-mode', 'dark');
// Restore the published light theme:
document.documentElement.setAttribute('theme-mode', 'light');
```

Kod referansı

Destekleyici belirtimi okuyun

## TDesign Tasarım Sistemi: Alan anlamını yitirmeden yoğun tipografi kullanın

### Yazı tipi rollerinin tamamını kullanın

Orta gövde stili 14px boyut ve 22px satır yüksekliği sağlar. Orta başlık, 16/24 boyutlarına 600 ağırlık ekler; küçük başlık ise 24/32 boyutundadır. Bunlar farklı amaçlara hizmet eder: tablo verileri, panel etiketleri ve sayfa başlığı, hepsi kalın gövde metnine dönüşmemelidir.

Kaynak yazı tipi ailesinde sistem yazı tiplerinin adları yer alır. Uygulamanın yönettiği tipografiye uygun bir sans-serif yedeği ekleyin ve Çince ile Latin karakter dizelerini birlikte doğrulayın. Kaynak yoluna uygulama stiliyle eş aralıklı yazı tipi uygulanabilir; ancak bu, TDesign yazı tipi belirteci olduğu anlamına gelmez.

Destekleyici belirtimi okuyun

## TDesign Tasarım Sistemi: Boyut takma adlarını gerçek kullanım alanıyla eşleştirin

### Boşluk adları birbirinin yerine kullanılamaz

Orta yatay bileşen dolgusu 12px, ekstra büyük bileşen kenar boşluğu ise 20px değerine karşılık gelir. Tüm anlamsal son ekleri tahminî tek bir ölçekle eşleştirmeyin. Denetimleri bir arada tutmak için düzenleyicide dış dolgu 24px, alanlar arasındaki boşluk ise daha küçüktür.

Bağımsız önizleme, dar ekranlarda düzenleyiciyi kural listesinin üzerine yerleştirir. Bu kırılma noktası uygulama kararıdır, çerçevenin garantisi değildir. Uzun API yolları, sayfanın tamamını görüntü alanından genişletmek yerine listede satır kaydırır.

Destekleyici belirtimi okuyun

## TDesign Tasarım Sistemi: Kayıt oluşturun, doğrulayın, sonra kural ekleyin

### Alan hatasını kendi anahtarına bağlı tutun

Form örneği Form bileşenine aktarılır; her FormItem alan adını belirtir. Gönderim işleyicisi önce validateResult değerini denetler, ardından toplanan alanları okur. Uygulama denetimleri dizeleri standartlaştırır ve yinelenen yolları reddeder; böylece iki etiket aynı örnek uç noktayı sessizce yapılandıramaz.

1. FormItem anahtarlarıyla ad, yol ve etkin alanlarını kaydedin.

2. Veri eklemeden önce adı eksik olanları ve / ile başlamayan yolları reddedin.

3. Hatayı göstermek için aynı alan anahtarıyla setFields kullanın; yazılan değerleri düzeltme amacıyla koruyun.

4. Denetimler başarılı olduktan sonra sabit bir id ekleyin; sonucun yerel olduğunu belirtin.

Destekleyici belirtimi okuyun

## TDesign Tasarım Sistemi: Düzenleme ve silme işlemlerinde satır kimliğini koruyun

### Görüntülenen verileri eylem hücrelerinden ayırın

Tablo, id alanını rowKey üzerinden alır. enabled sütunu, etiketsiz bir renk noktası göstermek yerine Boolean değerini okunabilir metne dönüştürür. action sütunu, yardımcı teknoloji kullanıcıları için birbirinden ayırt edilemeyen üç Kaldır denetimi oluşturmamak amacıyla satırın adını içeren bir düğme görüntüler.

Küçük bir kural kümesi için tablonun tamamı sayfalandırılmadan gösterilebilir. Sayfalandırma eklenirse disableDataPage ayarını yapmadan önce yerleşik yerel dilimleme ile sunucu güdümlü veriyi birbirinden ayırın. Kaldırma işlemi sıralarını değiştirdiğinde dizi konumlarını kimlik olarak yeniden kullanmak güvenli değildir.

- name kullanıcıya gösterilen etikettir; path ise kaynak kimliğidir.

- enabled uygulama verisidir ve açık metinle gösterilir.

- actions özel bir sütundur ve saklanan bir özellik ile eşleşmesi gerekmez.

Destekleyici belirtimi okuyun

## TDesign Tasarım Sistemi Yerel durum, dağıtılmış bir politika değildir

### Politika düzenleyicisini bir düzenleyici olarak test edin

Çevrimdışı önizlemede etiketli yerel kontroller, canlı bir durum bölgesi ve klavyeyle görülebilen odak kullanılır. Boş bir ad veya yinelenen bir yol gönderildiğinde form açık kalmalı ve somut sorunu belirtmelidir. Bir kuralı kaldırmak yalnızca yerel listeyi değiştirir.

Üretim hizmetinde yine de sunucu doğrulaması, yetkilendirme, çakışma yönetimi, denetim günlüğü kaydı ve reddedilen bir kaydetme işleminden kurtarma gerekir. Dağıtım yapıldığını iddia eden bir başarı bildirimiyle bu konuları taklit etmek yerine düzenleyiciyi bu gereksinimleri karşılayacak şekilde tasarlayın.

Destekleyici belirtimi okuyun

## TDesign Tasarım Sistemi Paketi entegre edin ve örneği gerçeğe uygun tutun

### Uygulama kodunda yerel örneği kullanın

React örneği, gerçek TDesign Form, Input, Switch, Button ve Table bileşenlerini içe aktarır. Gömülü önizleme, paket indirmeye veya ağ erişimine ihtiyaç duymadan çalışması için kendi içinde yeterli bir HTML/CSS yorumudur. Etkileşim kontrolleri, tüm kitaplık bağımlılıklarının projenizde derlendiğini göstermez.

Bağlantısı verilen tema dosyaları güncel geliştirme kaynaklarıdır. Özel geçersiz kılmaları kopyalamadan önce yüklenen sürümü bir kilit dosyasında belirleyin ve belirteçlerini karşılaştırın. Bu sayfa, sonraki tema değişikliklerinin örnek bir paletin ardına gizlenmek yerine değerlendirilebilmesi için rol adlarını ve kaynak kökenini özellikle belgelendirir.

Destekleyici belirtimi okuyun

## TDesign Tasarım Sistemi Bileşen Örnekleri

### Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedip bir tarayıcıda açın. TDesign açık renk belirteçlerinin ve Form/Table bileşimi kullanımının bağımsız HTML/CSS yorumu; yerel React çalışma zamanı değildir.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>TDesign API rule editor</title><style>
*{box-sizing:border-box}body{margin:0;background:#eee;color:rgba(0,0,0,.9);font:14px/22px Arial,sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#fff;border-bottom:1px solid #ddd}.mark{font-weight:700;color:#0052d9;font-size:20px}.tag{background:#f2f3ff;color:#003cab;padding:4px 8px;border-radius:3px}main{padding:24px;max-width:1100px;margin:auto}h1{font-size:24px;line-height:32px;margin:0 0 8px}h2{font-size:16px;line-height:24px;margin:0 0 20px}.sub{color:rgba(0,0,0,.6);margin:0 0 24px}.layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px}.panel{background:white;border:1px solid #e8e8e8;border-radius:6px;padding:24px}label{display:block;margin-bottom:6px}input[type=text]{width:100%;height:36px;border:1px solid #ddd;border-radius:3px;padding:0 12px;font:inherit;margin-bottom:4px}input:focus,button:focus-visible{outline:2px solid #0052d9;outline-offset:3px}.hint{font-size:12px;color:#666;margin:0 0 20px}.toggle{display:flex;gap:8px;align-items:center;margin:18px 0 24px}.toggle input{accent-color:#0052d9;width:18px;height:18px}.toggle label{margin:0}button{font:inherit;border:1px solid #ddd;border-radius:3px;padding:5px 12px;background:white;color:#0052d9;cursor:pointer}button:hover{background:#f2f3ff}.primary{background:#0052d9;color:white;border-color:#0052d9;width:100%;margin-top:8px}.primary:hover{background:#366ef4}.error{color:#ad352f;min-height:22px;margin:0}.listhead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e8e8e8;padding-bottom:16px;margin-bottom:0}.listhead h2{margin:0}.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:20px 0;border-bottom:1px solid #e8e8e8}.row strong{display:block;font-weight:600}.path{display:block;overflow-wrap:anywhere;font:12px/20px monospace;color:#666}.state{font-size:12px;color:#003cab}.row button{align-self:center;font-size:12px}.diagram{margin-top:24px;padding:16px;background:#f2f3ff;border-radius:3px;display:flex;align-items:center;gap:12px}.node{padding:8px 12px;background:white;border:1px solid #b5c7ff;border-radius:3px}.diagram span{color:#0052d9}.status{font-size:12px;color:#555;min-height:20px;margin:20px 0 0}.foot{font-size:12px;color:#666;margin:20px 0 0}#empty{padding:24px 0;color:#666}@media(max-width:680px){header{padding:16px}.layout{grid-template-columns:1fr}main{padding:20px 16px}.panel{padding:20px}.diagram{flex-wrap:wrap}.tag{font-size:12px}}
</style><header><span class="mark">T / Console</span><span class="tag">Local policy workspace</span></header><main><h1>API access rules</h1><p class="sub">Define which resources belong in your draft policy.</p><div class="layout"><section class="panel"><h2>Create a rule</h2><form id="editor" novalidate><label for="name">Rule name</label><input type="text" id="name" aria-describedby="error"><p class="hint">A short label your team can recognize.</p><label for="path">Resource path</label><input type="text" id="path" placeholder="/reports" aria-describedby="path-help error"><p class="hint" id="path-help">Start with /. Each path must be unique.</p><div class="toggle"><input id="enabled" type="checkbox" checked><label for="enabled">Enabled in this draft</label></div><p class="error" id="error" role="alert"></p><button class="primary">Add local rule</button></form><p class="foot">This editor does not connect to an API gateway.</p></section><section class="panel"><div class="listhead"><h2>Policy rules</h2><span id="count" class="tag"></span></div><div id="rules"></div><div class="diagram" aria-label="Illustrative policy flow"><div class="node">Client</div><span aria-hidden="true">→</span><div class="node">Policy draft</div><span aria-hidden="true">→</span><div class="node">Resource</div></div><p class="status" id="status" role="status">Two example rules are loaded locally.</p></section></div><p class="foot">HTML interpretation of TDesign light theme roles · Native React integration is provided in the guide.</p></main><script>
const $=id=>document.getElementById(id);let rules=[{id:1,name:'Reports read access',path:'/reports',enabled:true},{id:2,name:'Billing export',path:'/billing/export',enabled:false}];let next=3;
function render(){const host=$('rules');host.replaceChildren();$('count').textContent=rules.length+' rules';if(!rules.length){const p=document.createElement('p');p.id='empty';p.textContent='No rules in this draft. Add a resource to begin.';host.append(p)}for(const rule of rules){const row=document.createElement('div');row.className='row';const copy=document.createElement('div'),name=document.createElement('strong'),path=document.createElement('code'),state=document.createElement('span'),remove=document.createElement('button');name.textContent=rule.name;path.textContent=rule.path;path.className='path';state.textContent=rule.enabled?'Enabled':'Disabled';state.className='state';copy.append(name,path,state);remove.textContent='Remove';remove.setAttribute('aria-label','Remove '+rule.name);remove.onclick=()=>{rules=rules.filter(x=>x.id!==rule.id);render();$('status').textContent='Removed '+rule.name+' from this local draft.';$('name').focus()};row.append(copy,remove);host.append(row)}}
$('editor').onsubmit=e=>{e.preventDefault();$('error').textContent='';for(const id of ['name','path'])$(id).removeAttribute('aria-invalid');const name=$('name').value.trim(),path=$('path').value.trim();const fail=!name?['name','Enter a rule name.']:!path.startsWith('/')?['path','Start the resource path with /.']:rules.some(r=>r.path===path)?['path','This path already has a rule.']:null;if(fail){$('error').textContent=fail[1];$(fail[0]).setAttribute('aria-invalid','true');$(fail[0]).focus();return}rules.push({id:next++,name,path,enabled:$('enabled').checked});render();$('status').textContent='Added '+name+' locally. No policy was deployed.';$('name').value='';$('path').value='';$('name').focus()};render();
</script></html>
```

Kod referansı

- Kurallar yalnızca görünür örnek koleksiyonunda bulunur. Yerel Form kaydı, doğrulama geri çağırımları ve Table görüntüleme, React içinde ayrı olarak gösterilir.

### Kayıtlı kural düzenleyicisi ve satıra özel kaldırma

Form; ad, kaynak yolu ve etkin durum bilgilerini toplar. Uygulama doğrulaması, yerel bir Table satırı eklenmeden önce boş adları, hatalı yolları ve yinelenen kaynakları yakalar.

```
// npm install tdesign-react react react-dom
// main.jsx — a client-side React entry point
import React, {useState} from 'react';
import {createRoot} from 'react-dom/client';
import {Button, Form, Input, Switch, Table} from 'tdesign-react';
import 'tdesign-react/es/style/index.css';
const {FormItem} = Form;
function AccessRules() {
  const [form] = Form.useForm();
  const [rules, setRules] = useState([]);
  const [notice, setNotice] = useState('No local rules yet.');
  const addRule = ({validateResult, fields}) => {
    if (validateResult !== true) return;
    const name = String(fields.name || '').trim();
    const path = String(fields.path || '').trim();
    const invalid = !name ? ['name','Enter a rule name.'] :
      !path.startsWith('/') ? ['path','Start the resource path with /.'] :
      rules.some(rule => rule.path === path) ? ['path','This path already has a rule.'] : null;
    if (invalid) {
      form.setFields([{name:invalid[0],status:'error',validateMessage:{type:'error',message:invalid[1]}}]);
      setNotice(invalid[1]); return;
    }
    setRules(previous => [...previous, {id:crypto.randomUUID(),name,path,enabled:!!fields.enabled}]);
    setNotice(`Added ${name} to this browser session. No access policy was deployed.`);
  };
  const columns = [
    {colKey:'name', title:'Rule'}, {colKey:'path', title:'Resource'},
    {colKey:'enabled', title:'State', cell:({row}) => row.enabled ? 'Enabled' : 'Disabled'},
    {colKey:'actions', title:'Action', cell:({row}) => <Button variant="text" onClick={() => {
      setRules(previous => previous.filter(item => item.id !== row.id));
      setNotice(`Removed ${row.name} locally.`);
    }}>Remove {row.name}</Button>}
  ];
  return <main style={{padding:24,maxWidth:960,margin:'auto',font:'var(--td-font-body-medium)'}}>
    <h1>API access rules</h1>
    <Form form={form} onSubmit={addRule} labelWidth={100}>
      <FormItem name="name" label="Rule name"><Input /></FormItem>
      <FormItem name="path" label="Resource path"><Input placeholder="/reports" /></FormItem>
      <FormItem name="enabled" label="Enabled" for="enabled"><Switch /></FormItem>
      <FormItem><Button type="submit" theme="primary">Add local rule</Button></FormItem>
    </Form>
    <p role="status">{notice}</p>
    <Table rowKey="id" data={rules} columns={columns} bordered hover />
  </main>;
}
createRoot(document.getElementById('root')).render(<AccessRules />);
```

Kod referansı

- Table sütunu ve rowKey sözleşmeleri yukarıdaki belirtimde bağlantılıdır.

- Bu örnek yalnızca yerel React durumunu değiştirir; etkin etiketi bir yetkilendirme kararı değildir.

- Kurulum/API örneği resmî kaynakla karşılaştırılarak kontrol edildi; paket derlemesi, test edilen çevrimdışı önizlemeden ayrıdır.

## TDesign Tasarım Sistemi Ajan Kurulumu

### Uygulamaya Başlangıç Noktası

Yukarıdaki eksiksiz istemci giriş örneğini bir HTML kök öğesiyle kullanın. tdesign-react/es/style/index.css dosyasını bir kez içe aktarın. Sürümleri sabitleyin ve ürünü yayımlamadan önce derleme aracınızla test edin.

```
npm install tdesign-react react react-dom
```

### Projeniz İçin Bir İstem

```
API kural düzenleyicisi için tdesign-react Form ve Table bileşenlerini kullanın. Anlamsal --td-* rollerini, kayıtlı alan anahtarlarını, kararlı satır kimliklerini, açık doğrulamayı ve yerel durum hakkında gerçeğe uygun mesajları koruyun.
```

## TDesign Tasarım Sistemi Kaynakları ve Kapsamı

Bağımsız OpenDesign başvurusu. Önizleme, çevrimdışı bir yorumdur; Tencent yazılımı veya dağıtılmış bir yetkilendirme hizmeti değildir.

- TDesign React Paket kurulumu ve uygulama ailesi.

- Açık tema Anlamsal açık renk eşlemeleri.

- Koyu tema Koyu kök seçici ve rol eşlemeleri.

- Tipografi Yazı tipi, boyut ve satır yüksekliği tanımları.

- Boyut belirteçleri Temel ve anlamsal aralık takma adları.

- Köşe yarıçapları Yayımlanmış köşe değerleri.

- Form örneği Kayıt, gönderim ve alan hatası API'leri.

- Table türleri Satır kimliği ve sütun görüntüleme sözleşmeleri.

## TDesign Tasarım Sistemi İlgili Kaynaklar

### Thumbtack Thumbprint

Thumbprint’in belgelenmiş v2 temel bileşenleriyle bir hizmet keşif arayüzü oluşturun: kompakt sağlayıcı kartları, okunaklı karşılaştırma ayrıntıları, belirgin seçim durumları ve sabit bir kısa liste.

### Twilio Paste

Paste’in tema ve düğme kurallarını, doğrulanmış boşluk ölçeğini kullanarak bir bildirim taslağı oluşturun. Düzenleme, gözden geçirme ve mesajı gerçekten gönderme aşamalarını net biçimde ayırt edin.

### Visa Product tasarım sistemi

Yerel radyo denetimleri, alternatif renkli başlık ve inceleme özeti içeren anlaşılır bir ekstre biçimi tercihi oluşturmak için Visa Nova CSS kullanın. Tam 1.6.5 tema değerlerini, ölçeklenebilir boşlukları ve eksiksiz stil sayfası entegrasyonunu inceleyin.


- [Uygulama başvurusu](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Kaynak](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Kaynak](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Kaynak](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Kaynak](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Kaynak](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Kaynak](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Destekleyici belirtimi okuyun](https://github.com/Tencent/tdesign-react)
- [Kod referansı](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)
- [Kod referansı](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [TDesign React Paket kurulumu ve uygulama ailesi.](https://github.com/Tencent/tdesign-react)
- [Açık tema Anlamsal açık renk eşlemeleri.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_light.less)
- [Koyu tema Koyu kök seçici ve rol eşlemeleri.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_dark.less)
- [Tipografi Yazı tipi, boyut ve satır yüksekliği tanımları.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_font.less)
- [Boyut belirteçleri Temel ve anlamsal aralık takma adları.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_size.less)
- [Köşe yarıçapları Yayımlanmış köşe değerleri.](https://raw.githubusercontent.com/Tencent/tdesign-common/develop/style/web/theme/_radius.less)
- [Form örneği Kayıt, gönderim ve alan hatası API'leri.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/form/_example/base.tsx)
- [Table türleri Satır kimliği ve sütun görüntüleme sözleşmeleri.](https://raw.githubusercontent.com/Tencent/tdesign-react/develop/packages/components/table/type.ts)