Crea una búsqueda de dispositivos con ámbito definido mediante DDS v3: colores semánticos, escala tipográfica adaptable, espaciado basado en tokens y una composición InputGroup cuyo filtrado corresponde a la aplicación.
Interpretación independiente de HTML/CSS del espaciado y la tipografía de DDS v3, y de los colores claros documentados para los campos de entrada; fuente alternativa del sistema. · Referencia de implementación
02
Referencia de diseño sistema de diseño Dell
Fundamentos de DDS v3 y Storybook verificado de Vanilla 3.2.0. Los valores de color son las vistas previas del modo claro de la tabla de tokens de Text Input, no un tema universal. La vista previa aplica estas reglas en una implementación independiente de HTML/CSS; el ejemplo de código carga el CDN real y versionado de DDS.
DDS v3 y sus límites de implementación sistema de diseño Dell
Una composición, no un servicio de búsqueda
DDS separa los fundamentos visuales reutilizables del comportamiento del producto. Para este inventario, el punto de integración más útil es InputGroup: un campo de entrada nativo con espacios para elementos complementarios. No hay un constructor Search que debas invocar, y el sistema de diseño no obtiene dispositivos. Nuestra aplicación mantiene valores separados para el texto de entrada en borrador, la consulta aplicada y el dispositivo seleccionado. Así se distingue claramente entre escribir y enviar.
El ejemplo público para desarrolladores que aparece a continuación está dirigido a Vanilla 3.2.0. Sus paquetes CSS y JavaScript usan esa misma versión. Las integraciones existentes con v2 emplean un empaquetado distinto y deben seguir la documentación de migración antes de adoptar estas importaciones. El paquete actual es interno de Dell; el CDN documentado ofrece una forma concreta de evaluar esta composición sin inventar un registro público de npm.
Superficies y límites semánticos de sistema de diseño Dell
Usa los nombres de función publicados.
La tabla de referencia registra los valores de entrada del modo claro de la documentación oficial del componente. El código del producto debe usar variables semánticas CSS después de cargar los estilos DDS. El texto principal y la superficie secundaria forman el área de resultados legible; el borde de marca identifica el límite del campo. El color de primer plano inactivo tiene deliberadamente menos énfasis y no debe usarse como color predeterminado de los metadatos.
Las primitivas de color globales alimentan los roles semánticos, que a su vez respaldan las decisiones específicas de cada componente. Los autores de aplicaciones deben usar los roles semánticos en lugar de sobrescribir la escala global. Una apariencia oscura requiere un modo de tokens compatible; cambiar solo el fondo de la página deja incoherentes los colores de los campos, las etiquetas y el foco. El ejemplo local permanece en modo claro.
Sistema de diseño Dell Tipografía adaptable sin cambiar la estructura del documento
Un encabezado semántico, dos tamaños visuales
El encabezado de la página sigue siendo h1 en todos los tamaños de pantalla. Usa los tamaños documentados para Encabezado 1: 48/56 en diseños amplios y 40/48 por debajo de 1024px. El ejemplo usa fuentes alternativas del sistema porque es una interpretación local independiente; la hoja de estilos nativa proporciona los recursos tipográficos de DDS. Cuerpo 2 se usa para las descripciones y Cuerpo 3 para los metadatos compactos de los dispositivos.
El modelo de un dispositivo, el nombre de una oficina o el estado de asistencia pueden ocupar varias líneas. Mantén los identificadores legibles y no trunques la única copia de una etiqueta de activo. Un diseño compacto cambia la jerarquía visual y la disposición de las columnas, pero mantiene la misma asociación entre etiqueta y valor.
Sistema de diseño Dell Un ritmo de cuatro píxeles para una vista dividida
Asigna pasos de escala según las relaciones
Usa sm entre acciones relacionadas, lg dentro de las filas de resultados y xl entre la consulta y la región de resultados. La estructura exterior puede usar 2xl en pantallas más amplias. Estas son asignaciones de la escala publicada para la aplicación, no prescripciones oficiales que exijan esos márgenes exactos en todas las páginas de búsqueda.
Sistema de diseño Dell Anatomía y comportamiento de la búsqueda
El envío manual es intencional
El símbolo de búsqueda al inicio es decorativo; la etiqueta visible define el ámbito del inventario. El control para borrar al final aparece solo cuando hay texto. El modo manual envía el formulario, por lo que Enter y el botón visible Buscar dispositivos tienen el mismo efecto. Cambiar el texto de entrada por sí solo no altera el conjunto de resultados aplicado.
El modo automático tiene un funcionamiento distinto
DDS también describe un modo automático que comienza después de introducir el cuarto carácter. No añadas un filtrado inmediato desde el primer carácter a una interfaz documentada con ese modo. Si cambias a la búsqueda automática, elimina el botón de envío manual e implementa deliberadamente el umbral, la cancelación y el anuncio de resultados. El ejemplo proporcionado usa el modo manual.
Sistema de diseño Dell Borrador, consulta aplicada y selección
Transiciones de estado del ejemplo
Borrar restablece tanto el texto de entrada como el filtro aplicado, restaura todo el inventario de ejemplo y devuelve el foco al campo. La selección es una acción independiente del botón: muestra los detalles del activo sin modificar la consulta. Si no hay resultados, se muestra la frase aplicada y una opción explícita para restablecerlos. Nunca se afirma que se haya buscado en un inventario remoto.
Introduce el nombre o la etiqueta de un activo; los resultados actuales se mantienen hasta que se envíe la búsqueda.
Envía el formulario y actualiza el recuento de resultados a partir del arreglo local filtrado.
Inspecciona un resultado o borra la consulta; mantén el foco en el control que inició la acción.
Sistema de diseño Dell Etiquetas, puntos de referencia y anuncios
Indica el ámbito real
El formulario es un punto de referencia de búsqueda llamado Inventario de dispositivos. La etiqueta persistente y el texto de ayuda siguen visibles al escribir. El icono para borrar es un botón con aria-label, no un span con un controlador de clic. Los símbolos decorativos se ocultan a las tecnologías de asistencia. El recuento de resultados es un mensaje de estado cortés; cambia después del envío, en lugar de anunciar cada pulsación.
Cada resultado usa un botón real con un estado de pulsación y un nombre accesible completo. El encabezado de detalles identifica el elemento inspeccionado. Ningún enlace simula abrir una página de administración de dispositivos, porque este ejemplo no cuenta con un backend de administración. La selección actual se distingue tanto con un borde como con una etiqueta de texto.
Sistema de diseño Dell Carga los recursos reales e inicializa el grupo
Empieza con el paquete documentado
Para una aplicación interna autorizada, instala @dds/components desde Dell Artifactory e importa dds-styles.css mediante el flujo de hojas de estilo del proyecto. Para una prueba de concepto independiente, usa los enlaces públicos fijados de CDN que se muestran a continuación. Inicializa InputGroup cuando exista el marcado. Los controladores de eventos para el envío, el borrado y el filtrado forman parte del código de la aplicación.
Sistema de diseño Dell Pon a prueba el funcionamiento de la búsqueda
Una prueba local útil
Escribe Latitude sin enviar la búsqueda y comprueba que se mantenga el recuento de resultados anterior. Envía la búsqueda e inspecciona el dispositivo coincidente. Busca una etiqueta inexistente, verifica el estado sin resultados y, luego, borra la búsqueda y confirma que vuelvan a aparecer todos los dispositivos de ejemplo. Repite la prueba con el teclado y en una pantalla estrecha. Estas comprobaciones validan este ejemplo, pero no certifican un producto Dell derivado ni una integración de red.
Sistema de diseño Dell Ejemplos de componentes del sistema de diseño
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación independiente HTML/CSS del espaciado, la tipografía y los colores claros documentados para campos de entrada de DDS v3; fuente de reserva del sistema.
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>
Este documento proporciona su propio comportamiento de búsqueda. Usa el ejemplo nativo de DDS para comprobar la inicialización de InputGroup con la hoja de estilos y el script fijados.
Entrada de implementación nativa completa
La implementación completa de la configuración, reunida aquí junto con las explicaciones específicas de API. Sigue los requisitos documentados de paquetes y compilación en la sección de configuración.
Guárdalo como index.html y sírvelo localmente con acceso a la red para usar el CDN documentado de DDS 3.2.0. Esto utiliza la inicialización real de InputGroup y el filtrado local; no hay conexión con el backend de Dell. Alternativa con npm interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . La vista previa integrada es una interpretación sin conexión HTML/CSS, no la ejecución de este CDN.
InputGroup con búsqueda gestionada por la aplicación
La configuración combina el campo de entrada nativo con complementos, inicializa InputGroup y conecta el envío real del formulario. El símbolo inicial es un carácter decorativo local; no implica dependencia de una fuente de iconos.
javascript
import { InputGroup } from '@dds/components';
InputGroup(document.querySelector('#device-search'));
// Use the complete form and event handlers in the setup example.
La documentación verificada de v3 no incluye un Search API independiente.
Usa aria-label en los botones que solo muestran un icono; la aplicación proporciona el filtrado.
04
Configuración del agente sistema de diseño Dell
Punto de partida para la implementación
Guárdalo como index.html y sírvelo localmente con acceso a la red para usar el CDN documentado de DDS 3.2.0. Esto utiliza la inicialización real de InputGroup y el filtrado local; no hay conexión con el backend de Dell. Alternativa con npm interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . La vista previa integrada es una interpretación sin conexión HTML/CSS, no la ejecución de este CDN.
Crea una búsqueda acotada para un inventario de dispositivos usando la composición completa de InputGroup de DDS 3.2.0. Conserva el envío manual, una etiqueta de ámbito visible, el anuncio local de resultados y la opción de borrar. Usa los tokens semánticos de DDS y la tipografía adaptable; no inventes un Search API ni sustituyas las importaciones heredadas de v2.
05
Fuentes y alcance sistema de diseño Dell
Referencia independiente de DDS v3. El paquete interno requiere acceso al registro de Dell; el CDN público con versión fijada está documentado para prototipos. No se implica identidad de Dell, conexión con la gestión de activos ni certificación oficial.
