Dell Designsystem.

Dell Designsystem DDS v3 und seine Implementierungsgrenzen

Eine Komposition, kein Suchdienst

DDS trennt wiederverwendbare visuelle Grundlagen vom Produktverhalten. Für dieses Verzeichnis ist InputGroup der geeignete Integrationspunkt: ein natives Eingabefeld mit zusätzlichen Slots. Es gibt keinen Search-Konstruktor, den Sie aufrufen könnten, und das Designsystem ruft keine Geräte ab. Unsere Anwendung verwaltet die Eingabe im Entwurfszustand, die übernommene Suchanfrage und das ausgewählte Gerät als separate Werte. So bleibt der Unterschied zwischen Eingeben und Absenden sichtbar.

Unterstützende Spezifikation lesen

Eine Version auswählen

Das folgende öffentliche Entwicklerbeispiel basiert auf Vanilla 3.2.0. Seine CSS und JavaScript verwenden dieselbe Version. Vorhandene v2-Integrationen nutzen eine andere Paketierung und sollten vor der Übernahme dieser Imports der Migrationsdokumentation folgen. Das aktuelle Paket ist Dell-intern; das dokumentierte CDN bietet eine konkrete Möglichkeit, diese Komposition zu testen, ohne ein öffentliches npm-Registry zu erfinden.

Unterstützende Spezifikation lesen

Dell Designsystem Semantische Oberflächen und Begrenzungen

Die veröffentlichten Rollennamen verwenden

Die Referenztabelle enthält Eingabefeldwerte für den hellen Modus aus der offiziellen Komponentendokumentation. Produktcode sollte nach dem Laden der DDS-Styles semantische CSS-Variablen verwenden. Primärtext und sekundäre Oberfläche bilden den gut lesbaren Ergebnisbereich; der Markenrahmen kennzeichnet die Begrenzung des Eingabefelds. Die Vordergrundfarbe für inaktive Elemente ist bewusst zurückhaltend und darf nicht zur Standardfarbe für Metadaten werden.

Unterstützende Spezifikation lesen

DDS-Tokens nicht neu definieren

Globale Farbgrundwerte fließen in semantische Rollen ein, die wiederum komponentenspezifische Entscheidungen unterstützen. Anwendungsentwickler sollten auf semantische Rollen verweisen, statt die globale Skala zu überschreiben. Ein dunkles Erscheinungsbild erfordert einen tatsächlich unterstützten Token-Modus; wenn nur der Seitenhintergrund geändert wird, bleiben Feld-, Beschriftungs- und Fokusfarben uneinheitlich. Das lokale Beispiel bleibt im hellen Modus.

Unterstützende Spezifikation lesen

Dell Designsystem Responsive Typografie ohne Änderungen an der Dokumentstruktur

Eine semantische Überschrift, zwei visuelle Größen

Die Seitenüberschrift bleibt auf jedem Viewport eine h1. Sie verwendet die dokumentierten Größen von Heading 1: 48/56 für breite Layouts und 40/48 unter 1024px. Das Beispiel verwendet Ersatzschriften des Systems, da es sich um eine eigenständige lokale Interpretation handelt; das native Stylesheet stellt die DDS-Schriftressourcen bereit. Body 2 eignet sich für Beschreibungen, während Body 3 kompakte Geräte-Metadaten darstellt.

Unterstützende Spezifikation lesen

Platz für echte Namen lassen

Ein Gerätemodell, ein Bürostandort oder ein Supportstatus kann umbrochen werden. Kennungen müssen lesbar bleiben; das einzige Exemplar eines Asset-Tags darf nicht abgeschnitten werden. In einem kompakten Layout ändern sich die visuelle Hierarchie und die Spaltenanordnung, die Zuordnung von Beschriftung und Wert bleibt jedoch erhalten.

Unterstützende Spezifikation lesen

Dell Designsystem Ein Vier-Pixel-Rhythmus für eine geteilte Ansicht

Skalenstufen entsprechend den Beziehungen zuweisen

Zwischen zusammengehörigen Aktionen sm verwenden, innerhalb von Ergebniszeilen lg und zwischen Suchanfrage und Ergebnisbereich xl. Auf breiteren Bildschirmen kann der äußere Rahmen 2xl verwenden. Dies sind anwendungsspezifische Zuordnungen der veröffentlichten Skala, keine offiziellen Vorgaben, dass jede Suchseite genau diese Abstände benötigt.

Unterstützende Spezifikation lesen

Dichte und Umbruch

• Suchbeschriftung und Zusatzinformationen bei allen Breiten oberhalb des Eingabefelds platzieren.
• Die Absendeaktion unter das Eingabefeld verschieben, wenn die Zeile nicht mehr hineinpasst.
• Die Details zum ausgewählten Gerät unter die Ergebnisse verschieben, statt horizontales Scrollen zu erzwingen.

Unterstützende Spezifikation lesen

Dell Designsystem Aufbau und Verhalten der Suche

Manuelles Absenden ist beabsichtigt

Das vorangestellte Suchsymbol ist dekorativ; die sichtbare Beschriftung legt den Umfang des Verzeichnisses fest. Die nachgestellte Schaltfläche zum Löschen erscheint nur, wenn eine Eingabe vorhanden ist. In unserem manuellen Modus wird das Formular abgesendet, sodass die Eingabetaste und die sichtbare Schaltfläche „Geräte suchen“ denselben Effekt haben. Eine Änderung der Eingabe allein lässt die bereits angewendete Ergebnisliste unverändert.

Unterstützende Spezifikation lesen

Automatische Suche folgt anderen Regeln

DDS beschreibt auch einen automatischen Modus, der nach Eingabe des vierten Zeichens beginnt. Eine sofortige Filterung ab dem ersten Zeichen passt nicht zu einer Benutzeroberfläche, die für diesen Modus dokumentiert ist. Wenn Sie zur automatischen Suche wechseln, entfernen Sie die manuelle Absende-Schaltfläche und implementieren Sie Schwellenwert, Abbruch und Ergebnisankündigung bewusst. Das bereitgestellte Beispiel verwendet den manuellen Modus.

Unterstützende Spezifikation lesen

Dell Designsystem Entwurf, übernommene Suchanfrage und Auswahl

Zustandsübergänge im Beispiel

Beim Löschen werden sowohl die Eingabe als auch der angewendete Filter zurückgesetzt, das vollständige Beispielverzeichnis wiederhergestellt und der Fokus auf das Eingabefeld gesetzt. Die Auswahl erfolgt über eine separate Schaltfläche: Sie zeigt die Asset-Details an, ohne die Suchanfrage zu verändern. Bei null Treffern werden die angewendete Suchanfrage und eine explizite Möglichkeit zum Zurücksetzen angezeigt. Es wird niemals behauptet, ein entferntes Verzeichnis durchsucht zu haben.

1. Geben Sie einen Gerätenamen oder ein Tag ein. Die aktuellen Ergebnisse bleiben bis zum Absenden unverändert.
2. Das Formular absenden und die Ergebnisanzahl anhand des lokal gefilterten Arrays aktualisieren.
3. Ein Ergebnis aufrufen oder die Suchanfrage löschen; den Fokus auf dem auslösenden Steuerelement belassen.

Unterstützende Spezifikation lesen

Dell Designsystem Beschriftungen, Orientierungspunkte und Ankündigungen

Den tatsächlichen Suchumfang kenntlich machen

Das Formular ist ein Such-Landmark mit dem Namen „Geräteinventar“. Eine dauerhafte Beschriftung und ein Hilfetext bleiben beim Tippen sichtbar. Das Symbol zum Löschen ist eine Schaltfläche mit aria-label und kein span-Element mit einem Click-Handler. Dekorative Symbole werden vor assistiven Technologien verborgen. Die Anzahl der Ergebnisse wird als höfliche Statusmeldung ausgegeben. Sie ändert sich nach dem Absenden, statt bei jedem Tastendruck angekündigt zu werden.

Unterstützende Spezifikation lesen

Auswahl ist keine Navigation

Jedes Ergebnis verwendet eine echte Schaltfläche mit gedrücktem Zustand und einem vollständigen zugänglichen Namen. Die Detailüberschrift bezeichnet das geprüfte Element. Kein Link erweckt den Eindruck, eine Geräteverwaltungsseite zu öffnen, da dieses Beispiel kein Verwaltungs-Backend hat. Die aktuelle Auswahl ist sowohl durch einen Rahmen als auch durch eine Textkennzeichnung sichtbar.

Unterstützende Spezifikation lesen

Dell Designsystem Echte Ressourcen laden und die Gruppe initialisieren

Mit dem dokumentierten Bundle beginnen

Installieren Sie für eine autorisierte interne Anwendung @dds/components aus Dell Artifactory und importieren Sie dds-styles.css über die Stylesheet-Pipeline des Projekts. Verwenden Sie für einen eigenständigen Machbarkeitsnachweis die unten gezeigten Versionen der öffentlichen CDN-Links. Initialisieren Sie InputGroup, sobald das Markup vorhanden ist. Ereignisbehandlungslogik für das Absenden, Löschen und Filtern bleibt Anwendungscode.

Unterstützende Spezifikation lesen

Erst optimieren, wenn der Aufbau funktioniert

Unterstützende Spezifikation lesen

Dell Designsystem Den Suchablauf testen

Ein hilfreicher lokaler Test

Geben Sie Latitude ein, ohne die Suche abzusenden, und prüfen Sie, ob die vorherige Ergebnisanzahl bestehen bleibt. Senden Sie die Suche ab und prüfen Sie das passende Gerät. Suchen Sie nach einem nicht vorhandenen Tag, überprüfen Sie den Leerzustand und löschen Sie anschließend die Suche, um zu bestätigen, dass alle Beispieldaten zurückkehren. Wiederholen Sie die Tests mit Tastatureingabe und bei schmaler Fensterbreite. Mit diesen Prüfungen wird dieses Beispiel getestet; sie zertifizieren weder ein nachgelagertes Dell-Produkt noch eine Netzwerkintegration.

Unterstützende Spezifikation lesen

Dell Designsystem Beispiele für Design-System-Komponenten

<!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>

<!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>

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