DDS v3 ile kapsamı belirlenmiş bir cihaz araması oluşturun: anlamsal renkler, duyarlı tipografi ölçeği, belirteç tabanlı boşluklar ve filtreleme davranışı uygulamaya ait olan bir InputGroup düzeni.
DDS v3 aralık, tipografi ve belgelenmiş açık giriş renklerinin bağımsız HTML/CSS yorumlaması; sistem yedek yazı tipi. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Bir varlık adı veya etiketi girin; gönderim yapılana kadar geçerli sonuçlar değişmez.
Formu gönderin ve filtrelenmiş yerel dizideki sonuç sayısını güncelleyin.
Bir sonucu inceleyin veya sorguyu temizleyin; odağı işlemi başlatan denetimde tutun.
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.
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.
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.
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.
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.
html
<!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>
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.
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.
JavaScript
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
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.
04
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.
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.
05
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.
