# Dell tasarım sistemi

## Dell tasarım sistemi Arayüz Önizlemesi

Yerel bir sorgu gönderin, bir sonucu inceleyin ve Envanteri temizle ile envanteri geri yükleyin.

## Dell tasarım sistemi Tasarım Referansı

DDS v3 temelleri ve doğrulanmış Vanilla 3.2.0 Storybook. Renk değerleri, Text Input token tablosundaki açık tema önizlemelerine aittir; evrensel bir tema değildir. Önizleme bu kuralları bağımsız HTML/CSS içinde kullanır; kod örneği ise sürümü belirtilmiş gerçek DDS CDN’ini yükler.

### Boşluklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --dds-spacing-xs | 4px / 0.25rem | Simge ile etiketin yakınlığı. |
| --dds-spacing-sm | 8px / 0.5rem | Yan yana arama eylemleri. |
| --dds-spacing-md | 12px / 0.75rem | Kompakt nesne satırları. |
| --dds-spacing-lg | 16px / 1rem | Sonuç içeriğinin dolgusu. |
| --dds-spacing-xl | 24px / 1.5rem | Arama ile sonuçlar arasındaki boşluk. |
| --dds-spacing-2xl | 32px / 2rem | Ana sayfa iç boşluğu. |
| --dds-spacing-3xl | 40px / 2.5rem | Bölüm aralığı. |
| --dds-spacing-4xl | 48px / 3rem | Büyük bölüm sınırı. |
| --dds-spacing-5xl | 64px / 4rem | Geniş düzen aralığı. |
| --dds-spacing-6xl | 80px / 5rem | Ferahlık veren kompozisyon. |
| --dds-spacing-7xl | 96px / 6rem | Listelenen en büyük aralık adımı. |
### Açık tema anlamsal renk örnekleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --dds-color-text-primary | #1D2C3B | Birincil sonuç etiketleri. |
| --dds-color-background-surface-secondary | #EBF1F6 | İkincil içerik yüzeyi. |
| --dds-color-border-brand-base | #00468B | Marka girdi kenarlığı. |
| --dds-color-background-surface-inactive | #E1E1E1 | Etkin olmayan alan yüzeyi. |
| --dds-color-border-inactive-base | #7E7E7E | Etkin olmayan kenarlık. |
| --dds-color-text-inactive | #B6B6B6 | Etkin olmayan etiket; gövde metni değildir. |
### Tipografi ölçeğinde seçili roller

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Display 1 ≥1024px | 72px / 88px; weight 300 | Yoğun bir sonuç listesi değil, büyük editoryal başlık. |
| Heading 1 ≥1024px | 48px / 56px; weight 300 | Geniş sayfa başlığı. |
| Heading 1 <1024px | 40px / 48px; weight 300 | Kompakt sayfa başlığı. |
| Heading 4 ≥1024px | 24px / 32px; weight 400 | Bölüm başlığı. |
| Heading 4 <1024px | 20px / 28px; weight 400 | Kompakt bölüm başlığı. |
| Body 2 | 16px / 24px; weight 400 | Varsayılan paragraf rolü. |
| Body 3 | 14px / 20px; weight 400 | Yoğun meta veriler. |
| Caption | 12px / 20px; weight 400 | Alan yardımcı metni. |
| Button 1 | 16px / 24px; weight 500 | Varsayılan eylem etiketi. |
### Arama bileşimi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| InputGroup(element) | Initializer exported by @dds/components | Grup sarmalayıcısını oluşturulduktan sonra başlatın. |
| dds__input-group | Input and addon wrapper | Giriş alanının önündeki ve arkasındaki yuvaları bitişik tutun. |
| dds__text-input | Native input class | Sorgu ve sonuçlar uygulamanın sorumluluğundadır. |
| dds__input-addon | Accessory wrapper | Dekoratif ön simge veya temizleme eylemi. |
| dds__button--ghost | Low-emphasis button modifier | Arama/temizleme örneklerinde bu varyant kullanılır. |
| dds__button--icon-only | Icon-only button modifier | Düğmeye yine de aria-label ekleyin. |
### Stil yüklemesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| dds-styles.css | All-in-one starter | Bileşen stillerini, token’ları, yazı tiplerini ve yardımcı paketleri içerir. |
| dds-tokens.css | Global and semantic tokens | Bileşen token’larını içermez. |
| dds-components.css | All component styles and component tokens | Ayrı paket yaklaşımında token’lar ve yazı tipleriyle birlikte gereklidir. |
| dds-fonts.css | CDN font definitions | DDS yazı tipi oluşturma işlemi için ekleyin. |
| dds-grid.css | Grid classes | Ayrı düzen paketi. |
| dds-icons.css | Icon classes | Simge yazı tipini tek başına yüklemez; simge kurulumuna bakın. |
## Dell tasarım sistemi Tam 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ı.

## Dell tasarım sistemi DDS v3 ve uygulama sınırları

### Bir bileşim, arama hizmeti değil

> DDS, yeniden kullanılabilir görsel temelleri ürün davranışlarından ayırır. Bu envanter için kullanışlı entegrasyon noktası, eklenti yuvalarına sahip yerel bir giriş alanı olan InputGroup'tur. Çağrılacak bir Search oluşturucusu yoktur ve tasarım sistemi cihazları getirmez. Uygulamamız taslak girişi, uygulanmış sorguyu ve seçili cihazı ayrı değerler olarak tutar. Böylece yazma ile gönderme arasındaki fark görünür olur.

Destekleyici belirtimi okuyun

### Tek bir sürüm seçin

Aşağıdaki herkese açık geliştirici örneği Vanilla 3.2.0 sürümünü hedefler. CSS ve JavaScript aynı sürümü kullanır. Mevcut v2 entegrasyonları farklı paketleme kullanır; bu içe aktarımları kullanmadan önce geçiş belgelerini izlemelidir. Mevcut paket Dell'e özeldir; belgelenmiş CDN, herkese açık bir npm kayıt deposu uydurmadan bu bileşimi değerlendirmek için somut bir yol sunar.

Destekleyici belirtimi okuyun

## Dell tasarım sistemi Anlamsal yüzeyler ve sınırlar

### Yayımlanmış rol adlarını kullanın

Başvuru tablosu, resmî bileşen belgelerindeki açık mod giriş alanı değerlerini kaydeder. Ürün kodu, DDS stilleri yüklendikten sonra anlamsal CSS değişkenlerini kullanmalıdır. Birincil metin ve ikincil yüzey, okunabilir sonuç alanını oluşturur; marka kenarlığı ise giriş alanının sınırını belirtir. Etkin olmayan ön plan rengi bilerek soluk tutulmuştur ve varsayılan meta veri rengi olarak kullanılmamalıdır.

Destekleyici belirtimi okuyun

### DDS belirteçlerini yeniden tanımlamayın

Genel renk ilkelleri anlamsal rolleri besler; bu roller de bileşene özgü kararları destekler. Uygulama geliştiricileri, genel ölçeği geçersiz kılmak yerine anlamsal rollere başvurmalıdır. Koyu görünüm için gerçekten desteklenen bir belirteç modu gerekir; yalnızca sayfa arka planını değiştirmek alan, etiket ve odak renklerini tutarsız bırakır. Bu yerel örnek açık modda kalır.

Destekleyici belirtimi okuyun

## Dell tasarım sistemi Belge yapısını değiştirmeden duyarlı tipografi

### Tek anlamsal başlık, iki görsel boyut

Sayfa başlığı her görüntü alanında h1 olarak kalır. Belgelenmiş Başlık 1 boyutlarını kullanır: geniş düzenlerde 48/56, 1024px altındaysa 40/48. Örnek bağımsız bir yerel yorum olduğundan sistem yedek yazı tiplerini kullanır; yerel stil sayfası DDS yazı tipi kaynaklarını sağlar. Açıklamalar için Body 2, kısa cihaz meta verileri içinse Body 3 kullanılır.

Destekleyici belirtimi okuyun

### Gerçek adlar için alan bırakın

Cihaz modeli, ofis adı veya destek durumu birden fazla satıra taşabilir. Tanımlayıcıları okunabilir tutun ve bir varlık etiketinin tek kopyasını kısaltmayın. Kompakt düzen görsel hiyerarşiyi ve sütun düzenini değiştirirken etiket ile değer arasındaki ilişkiyi korur.

Destekleyici belirtimi okuyun

## Dell tasarım sistemi Bölünmüş görünüm için dört piksellik ritim

### Ölçek adımlarını ilişkilerle eşleştirin

Birbiriyle ilişkili eylemler arasında sm, sonuç satırlarının içinde lg, sorgu ile sonuç alanı arasında xl kullanın. Daha geniş ekranlarda dış kapsayıcı için 2xl kullanılabilir. Bunlar, yayımlanmış ölçeğin uygulamadaki kullanımlarıdır; her arama sayfasının tam olarak bu iç boşluklara ihtiyaç duyduğuna dair resmî kurallar değildir.

Destekleyici belirtimi okuyun

### Yoğunluk ve yeniden akış

DDS; kompakt, varsayılan ve rahat ızgaraları tanımlar. Bu örnekte arama denetimleri rahat düzeyde tutulurken her sonucun meta verileri kompakt olabilir. Dar ekranlarda seçili cihaz paneli, okuma sırasını koruyacak şekilde sonuç listesinin altına gelir. Ayrıntı paneli sabit değildir ve sonucun görünmesini engelleyemez.

- Arama etiketini ve yardımcı metni her genişlikte alanın üstünde tutun.

- Satır sığmadığında gönderme eyleminin alanın altına geçmesine izin verin.

- Yatay kaydırma oluşturmak yerine seçili cihaz ayrıntılarını sonuçların altına taşıyın.

Destekleyici belirtimi okuyun

## Dell tasarım sistemi Aramanın yapısı ve davranışı

### Elle gönderim bilinçli bir tercihtir

Başta yer alan arama simgesi dekoratiftir; envanter kapsamını görünür etiket tanımlar. Sondaki temizleme denetimi yalnızca girişte metin olduğunda görünür. Elle gönderim kipimiz form üzerinden çalışır; bu nedenle Enter tuşu ve görünür Cihazları ara düğmesi aynı sonucu verir. Yalnızca girişin değiştirilmesi, uygulanmış sonuç kümesini etkilemez.

Destekleyici belirtimi okuyun

### Otomatik kipin sözleşmesi farklıdır

DDS ayrıca girilen dördüncü karakterden sonra başlayan bir otomatik kip tanımlar. Bu kip olarak belgelenen bir arayüze tek karakterde anında filtreleme eklemeyin. Otomatik aramaya geçiyorsanız elle gönderim düğmesini kaldırın ve eşik değerini, iptali ve sonuç duyurusunu bilinçli biçimde uygulayın. Verilen örnek elle gönderim kipini kullanır.

Destekleyici belirtimi okuyun

## Dell tasarım sistemi Taslak, uygulanmış sorgu ve seçim

### Örnekteki durum geçişleri

Temizle işlemi hem girişi hem de uygulanmış filtreyi sıfırlar, örnek envanterin tamamını geri yükler ve odağı alana döndürür. Seçim ayrı bir düğme eylemidir: sorguyu değiştirmeden varlık ayrıntılarını gösterir. Sonuç bulunmadığında uygulanmış ifade ve açık bir sıfırlama yolu görüntülenir. Uzak bir envanterin arandığını asla iddia etmez.

1. Bir varlık adı veya etiketi girin; gönderim yapılana kadar geçerli sonuçlar değişmez.

2. Formu gönderin ve filtrelenmiş yerel dizideki sonuç sayısını güncelleyin.

3. Bir sonucu inceleyin veya sorguyu temizleyin; odağı işlemi başlatan denetimde tutun.

Destekleyici belirtimi okuyun

## Dell tasarım sistemi Etiketler, yer işaretleri ve duyurular

### Gerçek kapsamı belirtin

Form, Device inventory adıyla tanımlanan bir arama yer işaretidir. Yazarken de kalıcı bir etiket ve yardımcı metin görünür kalır. Temizleme simgesi, tıklama işleyicisi eklenmiş bir span değil, aria-label değerine sahip bir düğmedir. Dekoratif simgeler yardımcı teknolojilerden gizlenir. Sonuç sayısı kibar bir durum mesajıdır; her tuş vuruşunda değil, gönderimden sonra değişir.

Destekleyici belirtimi okuyun

### Seçim, başka bir sayfaya gitmek değildir

Her sonuç, basılma durumuna ve erişilebilir tam ada sahip gerçek bir düğme kullanır. Ayrıntı başlığı, incelenen öğeyi belirtir. Bu örnekte yönetim arka ucu bulunmadığından hiçbir bağlantı, cihaz yönetimi sayfasını açıyormuş gibi davranmaz. Geçerli seçim hem kenarlıkla hem de metin etiketiyle görünür.

Destekleyici belirtimi okuyun

## Dell tasarım sistemi Gerçek varlıkları yükleyin ve grubu başlatın

### Belgelenmiş paketle başlayın

Yetkili bir iç uygulamada @dds/components paketini Dell Artifactory'den yükleyin ve dds-styles.css dosyasını projenin stil sayfası hattı üzerinden içe aktarın. Bağımsız bir kavram kanıtı için aşağıda gösterilen sabitlenmiş herkese açık CDN bağlantılarını kullanın. İşaretleme oluşturulduktan sonra InputGroup'u başlatın. Gönderme, temizleme ve filtreleme için olay işleyicileri uygulama kodunda kalır.

Destekleyici belirtimi okuyun

### Bileşim çalıştıktan sonra iyileştirin

Tam stil sayfası, başlamak için en yalın seçenektir. Seçici entegrasyon için genel/anlamsal belirteçler ve yazı tiplerinin yanı sıra kullanılan her bileşenin stil sayfası gerekir. Tek başına belirteçler bileşen belirteçlerini içermez; yalnızca simge sınıfları da yazı tipini yüklemez. Bu destekleyici paketleri kaldırmak, mevcut gibi görünen ancak görsel olarak eksik kalan denetimlere yol açabilir.

Destekleyici belirtimi okuyun

## Dell tasarım sistemi Arama sözleşmesini sınayın

### Yararlı bir yerel test

Latitude yazıp göndermeden eski sonuç sayısının korunduğunu doğrulayın. Gönderin ve eşleşen cihazı inceleyin. Eksik bir etiket arayın, boş durumun gösterildiğini doğrulayın; ardından temizleyip tüm örnek cihazların geri geldiğini kontrol edin. Klavye girişiyle ve dar genişlikte de tekrarlayın. Bu kontroller yalnızca bu örneği doğrular; sonraki bir Dell ürününü veya ağ entegrasyonunu onaylamaz.

Destekleyici belirtimi okuyun

## Dell 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. DDS v3 aralığı, tipografi ve belgelenmiş açık mod giriş alanı renklerinin bağımsız HTML/CSS yorumu; sistem yedek yazı tipi.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Device inventory — DDS v3 study</title><style>*{box-sizing:border-box}body{margin:0;font:16px/24px Arial,sans-serif;color:#1d2c3b;background:white}header{padding:16px 32px;border-bottom:1px solid #c5d4e3;color:#00468b}main{padding:32px;max-width:1200px;margin:auto}h1{font-size:48px;line-height:56px;font-weight:300;margin:16px 0}h2{font-size:24px;line-height:32px;font-weight:400}label{display:block;font-weight:bold;margin-bottom:8px}.search{display:flex;gap:8px;align-items:stretch}.input{border:1px solid #00468b;display:flex;align-items:center;flex:1;min-width:0}.input span{padding:8px 12px}input{border:0;padding:12px 0;width:100%;min-width:0;font:inherit;background:transparent;color:inherit}button{font:inherit;cursor:pointer;padding:8px 16px;background:white;color:#00468b;border:1px solid #00468b}button:hover{background:#ebf1f6}button:focus-visible,input:focus-visible{outline:3px solid #00468b;outline-offset:3px}.input button{border:0}.submit{background:#00468b;color:white}.submit:hover{background:#003567}.helper{font-size:14px;line-height:20px;color:#516478}.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;margin-top:24px}.result{display:flex;text-align:left;align-items:center;gap:16px;width:100%;padding:16px;margin-bottom:12px;border:1px solid #c5d4e3;color:#1d2c3b}.result[aria-pressed=true]{border:2px solid #00468b;padding:15px;background:#ebf1f6}.result strong{display:block}.result small{display:block;font-size:14px}.device{width:64px;height:40px;border:3px solid #516478;border-radius:3px;background:linear-gradient(140deg,#dcebf6,#86afce);position:relative;flex-shrink:0}.device:after{content:'';position:absolute;bottom:-8px;left:-7px;right:-7px;height:4px;background:#516478;border-radius:0 0 4px 4px}.device.desktop{width:28px;height:48px;background:#c5d4e3;margin:0 18px}.device.desktop:after{display:none}aside{background:#ebf1f6;padding:24px;align-self:start}aside h2{margin-top:0}dt{font-size:12px;color:#516478;margin-top:16px}dd{margin:4px 0 0}footer{padding:16px 32px;border-top:1px solid #c5d4e3;font-size:12px;line-height:20px;color:#516478}#empty{padding:24px;background:#ebf1f6}#count{font-size:14px;margin:24px 0 0}@media(max-width:1023px){h1{font-size:40px;line-height:48px}}@media(max-width:650px){main{padding:16px}.layout{grid-template-columns:1fr}.search{flex-wrap:wrap}.input{flex-basis:100%}.submit{width:100%}header,footer{padding:16px}}</style><header>DEVICE OPERATIONS <span style="float:right;font-size:12px">Local sample inventory</span></header><main><h1>Find a device</h1><p>Review model, location and support coverage in one place.</p><form role="search" aria-label="Device inventory" id="form"><label for="query">Search devices</label><p class="helper" id="help">Enter a model or asset tag. Results change after you submit.</p><div class="search"><div class="input"><span aria-hidden="true">⌕</span><input id="query" type="search" aria-describedby="help"><button type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div><button class="submit" type="submit">Search devices</button></div></form><p id="count" role="status"></p><div class="layout"><section aria-label="Matching devices"><div id="results"></div><div id="empty" hidden>No devices match this query. Clear the search to view the sample inventory.</div></section><aside aria-label="Device details"><span class="helper">SELECTED DEVICE</span><h2 id="name"></h2><dl><dt>Asset tag</dt><dd id="tag"></dd><dt>Location</dt><dd id="location"></dd><dt>Support coverage</dt><dd id="coverage"></dd><dt>Record source</dt><dd>Local demonstration data</dd></dl></aside></div></main><footer>Independent HTML/CSS interpretation of DDS v3. Published light-mode colors, spacing and type sizes; system fallback font. No Dell services are connected.</footer><script>
const devices=[{name:'Latitude 7450',tag:'LT-104',location:'London · Design studio',coverage:'Through 30 June 2027',kind:'laptop'},{name:'Precision 5680',tag:'PR-208',location:'Berlin · Engineering lab',coverage:'Through 15 March 2028',kind:'laptop'},{name:'OptiPlex 7020',tag:'OP-316',location:'Amsterdam · Front desk',coverage:'Through 20 August 2027',kind:'desktop'}];let selected=devices[0],applied='';const $=id=>document.getElementById(id);function render(){const matches=devices.filter(d=>(d.name+' '+d.tag).toLowerCase().includes(applied.toLowerCase()));$('count').textContent=matches.length+' matching device'+(matches.length===1?'':'s')+(applied?' for “'+applied+'”':'');$('results').replaceChildren();$('empty').hidden=matches.length>0;for(const d of matches){const b=document.createElement('button');b.className='result';b.setAttribute('aria-pressed',String(d===selected));const pic=document.createElement('span');pic.className='device '+d.kind;pic.setAttribute('aria-hidden','true');const label=document.createElement('span'),strong=document.createElement('strong'),small=document.createElement('small');strong.textContent=d.name;small.textContent=d.tag+' · '+d.location.split(' · ')[0];label.append(strong,small);b.append(pic,label);b.onclick=()=>{selected=d;render()};$('results').append(b)}for(const key of ['name','tag','location','coverage'])$(key).textContent=selected[key]}
$('form').onsubmit=e=>{e.preventDefault();applied=$('query').value.trim();render()};$('query').oninput=()=>{$('clear').hidden=!$('query').value};$('clear').onclick=()=>{$('query').value='';applied='';$('clear').hidden=true;render();$('query').focus()};render();
</script></html>
```

Kod referansı

- Bu belge kendi arama davranışını sağlar. InputGroup başlatmasını sabitlenmiş stil sayfasıyla denetlemek için yerel DDS örneğini kullanın.

### Tam yerel uygulama girişi

Kurulumdan itibaren tam uygulama; odaklanmış API açıklamalarının yanında burada bir araya getirilmiştir. Kurulum bölümünde belgelenen paket ve derleme ön koşullarını izleyin.

```
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>
```

Kod referansı

- index.html adıyla kaydedin ve belgelenmiş DDS 3.2.0 CDN'sine ağ erişimi olan yerel bir sunucuda çalıştırın. Bu örnek gerçek InputGroup başlatmasını ve yerel filtrelemeyi kullanır; Dell arka ucu içermez. Kurum içi npm alternatifi: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . Gömülü önizleme çevrimdışı bir HTML/CSS yorumudur; bu CDN çalışma zamanı değildir.

### Uygulamanın yönettiği aramayla InputGroup

Kurulum, yerel giriş alanı ile eklentileri bir araya getirir, InputGroup'u başlatır ve gerçek form gönderimini bağlar. Baştaki simge yerel, dekoratif bir karakterdir; simge yazı tipine bağımlılık olduğu ima edilmez.

```
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
```

Kod referansı

- Doğrulanmış v3 belgelerinde bağımsız bir Search API yoktur.

- Yalnızca simgesi olan düğmelerde aria-label kullanın; filtrelemeyi uygulama sağlar.

## Dell tasarım sistemi AI Agent Kurulumu

### Uygulamaya Başlangıç Noktası

index.html adıyla kaydedin ve belgelenmiş DDS 3.2.0 CDN'sine ağ erişimi olan yerel bir sunucuda çalıştırın. Bu örnek gerçek InputGroup başlatmasını ve yerel filtrelemeyi kullanır; Dell arka ucu içermez. Kurum içi npm alternatifi: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . Gömülü önizleme çevrimdışı bir HTML/CSS yorumudur; bu CDN çalışma zamanı değildir.

```
<!doctype html>
<html lang="en"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" crossorigin href="https://dds.dell.com/components/3.2.0/css/dds-styles.css">
<title>Local device search</title>
<main style="padding:24px;max-width:720px;margin:auto">
<h1>Find a device</h1>
<form role="search" aria-label="Device inventory" id="search-form">
<label for="query">Search devices</label>
<p id="help">Enter a model or asset tag, then submit.</p>
<div class="dds__input-group" id="device-search">
<div class="dds__input-addon" aria-hidden="true">⌕</div>
<input id="query" class="dds__text-input" type="search" aria-describedby="help">
<div class="dds__input-addon"><button class="dds__button dds__button--ghost dds__button--xs" type="button" id="clear" hidden aria-label="Clear device search">Clear</button></div>
</div>
<button class="dds__button dds__button--ghost dds__button--md" type="submit">Search devices</button>
</form>
<p id="count" role="status"></p><ul id="results"></ul>
</main>
<script type="module">
import { InputGroup } from 'https://dds.dell.com/components/3.2.0/js/index.mjs';
InputGroup(document.querySelector('#device-search'));
const inventory=['Latitude 7450 · LT-104','Precision 5680 · PR-208','OptiPlex 7020 · OP-316'];
const input=document.querySelector('#query'), clear=document.querySelector('#clear');
function render(query='') {
 const matches=inventory.filter(x=>x.toLowerCase().includes(query.toLowerCase()));
 document.querySelector('#results').replaceChildren(...matches.map(text=>{const li=document.createElement('li');li.textContent=text;return li}));
 document.querySelector('#count').textContent=matches.length+' matching devices';
}
input.addEventListener('input',()=>{clear.hidden=!input.value.length});
document.querySelector('#search-form').addEventListener('submit',event=>{event.preventDefault();render(input.value.trim())});
clear.addEventListener('click',()=>{input.value='';clear.hidden=true;render();input.focus()});
render();
</script></html>
```

### Projeniz İçin Bir İstem

```
Eksiksiz DDS 3.2.0 InputGroup bileşimini kullanarak kapsamı belirli bir cihaz envanteri araması oluşturun. Elle gönderimi, görünür kapsam etiketini, yerel sonuç duyurusunu ve temizleme davranışını koruyun. DDS anlamsal belirteçlerini ve duyarlı tipografisini kullanın; bir Search API uydurmayın veya eski v2 içe aktarımlarını kullanmayın.
```

## Dell tasarım sistemi Kaynaklar ve Kapsam

Bağımsız DDS v3 başvurusu. Kurum içi paket için Dell kayıt deposuna erişim gerekir; prototipleme amacıyla sürümlenmiş herkese açık CDN belgelenmiştir. Dell kimliği, varlık yönetimi bağlantısı veya resmî sertifika olduğu ima edilmez.

- DDS 3.2.0 kurulumu Kurum içi pakete erişim, herkese açık prototip CDN'si ve gerekli stil paketleri.

- Arama uygulaması Arama, InputGroup kullanılarak oluşturulur; bağımsız bir Search API yoktur.

- Arama tasarımı Elle ve otomatik arama davranışı, kapsam etiketleri ve yer işaretleri.

- Boşluklar On bir anlamsal aralık adımı.

- Tipografi Varsayılan ve kompakt renk skalaları.

- Girdi belirteçleri Girdi alanlarında kullanılan belgelenmiş anlamsal renkler.

- Belirteç mimarisi Genel, anlamsal ve bileşen belirteçlerinin sınırları.

- Izgara Yoğunluk ve dört piksellik ritim.

## Dell tasarım sistemi İlgili Kaynaklar

### Duet tasarım sistemi

ISO tarih değerleri, açık aralık doğrulaması, bileşen odaklama yöntemleri ve ayrı açık kaynak tarih seçici sınırı içeren tarih aralığı iş akışıyla Duet’in LocalTapiola renk ve boşluk ölçeklerini inceleyin.

### Elastic UI

Doğrulanmış Borealis ölçekleri, yerel tablo ve arama kontrolleri, önem derecesine göre filtreleme, yerel olarak kaydedilen olaylar ve eksiksiz React kaynak koduyla bir Elastic UI günlük gezgini oluşturun.

### Emplifi Soul

Soul’un veri tablosu sözleşmesini altı piksellik boşlukları, katmanlı renk rolleri ve kompakt Inter yazı tipiyle birlikte inceleyin. Toplu seçimi, eksik veri gösterimini ve özet satırlarını karşılaştırın; ardından doğrulanmış özel React paketi giriş noktalarını inceleyin.


- [Uygulama başvurusu](https://www.delldesignsystem.com/components/search)
- [Kaynak](https://www.delldesignsystem.com/foundations/spacing)
- [Kaynak](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [Kaynak](https://www.delldesignsystem.com/foundations/typography/)
- [Kaynak](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [Kaynak](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [Destekleyici belirtimi okuyun](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [Destekleyici belirtimi okuyun](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [Destekleyici belirtimi okuyun](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [Destekleyici belirtimi okuyun](https://www.delldesignsystem.com/getting-started/tokens)
- [Destekleyici belirtimi okuyun](https://www.delldesignsystem.com/foundations/typography/)
- [Destekleyici belirtimi okuyun](https://www.delldesignsystem.com/foundations/spacing)
- [Destekleyici belirtimi okuyun](https://www.delldesignsystem.com/foundations/grid)
- [Destekleyici belirtimi okuyun](https://www.delldesignsystem.com/components/search)
- [Kod referansı](https://www.delldesignsystem.com/components/search)
- [Kod referansı](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [DDS 3.2.0 kurulumu Kurum içi pakete erişim, herkese açık prototip CDN'si ve gerekli stil paketleri.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs)
- [Arama uygulaması Arama, InputGroup kullanılarak oluşturulur; bağımsız bir Search API yoktur.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs)
- [Arama tasarımı Elle ve otomatik arama davranışı, kapsam etiketleri ve yer işaretleri.](https://www.delldesignsystem.com/components/search)
- [Boşluklar On bir anlamsal aralık adımı.](https://www.delldesignsystem.com/foundations/spacing)
- [Tipografi Varsayılan ve kompakt renk skalaları.](https://www.delldesignsystem.com/foundations/typography/)
- [Girdi belirteçleri Girdi alanlarında kullanılan belgelenmiş anlamsal renkler.](https://www.delldesignsystem.com/components/text-input/?tab=Design)
- [Belirteç mimarisi Genel, anlamsal ve bileşen belirteçlerinin sınırları.](https://www.delldesignsystem.com/getting-started/tokens)
- [Izgara Yoğunluk ve dört piksellik ritim.](https://www.delldesignsystem.com/foundations/grid)