# Sistema di design Dell ## Sistema di design Dell Anteprima dell’interfaccia Invia una query locale, esamina un risultato e ripristina l’inventario con Cancella. ## Sistema di design Dell Riferimento di progettazione Fondamenti di DDS v3 e Storybook verificato di Vanilla 3.2.0. I valori dei colori sono le anteprime in modalità chiara della tabella dei token Text Input, non rappresentano un tema universale. L’anteprima applica queste regole in HTML/CSS indipendenti; l’esempio di codice carica la versione reale di DDS dal CDN. ### Spaziatura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --dds-spacing-xs | 4px / 0.25rem | Prossimità tra icona ed etichetta. | | --dds-spacing-sm | 8px / 0.5rem | Azioni di ricerca adiacenti. | | --dds-spacing-md | 12px / 0.75rem | Righe compatte degli elementi. | | --dds-spacing-lg | 16px / 1rem | Spaziatura interna del contenuto dei risultati. | | --dds-spacing-xl | 24px / 1.5rem | Spazio tra ricerca e risultati. | | --dds-spacing-2xl | 32px / 2rem | Margine interno della pagina principale. | | --dds-spacing-3xl | 40px / 2.5rem | Spaziatura tra le sezioni. | | --dds-spacing-4xl | 48px / 3rem | Separazione tra sezioni principali. | | --dds-spacing-5xl | 64px / 4rem | Ampia separazione del layout. | | --dds-spacing-6xl | 80px / 5rem | Composizione ariosa. | | --dds-spacing-7xl | 96px / 6rem | Valore di spaziatura più ampio nell’elenco. | ### Esempi di colori semantici in modalità chiara | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --dds-color-text-primary | #1D2C3B | Etichette principali dei risultati. | | --dds-color-background-surface-secondary | #EBF1F6 | Superficie secondaria del contenuto. | | --dds-color-border-brand-base | #00468B | Bordo dell’input del brand. | | --dds-color-background-surface-inactive | #E1E1E1 | Superficie del campo inattivo. | | --dds-color-border-inactive-base | #7E7E7E | Bordo inattivo. | | --dds-color-text-inactive | #B6B6B6 | Etichetta inattiva; non testo del corpo. | ### Ruoli selezionati della scala tipografica | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Display 1 ≥1024px | 72px / 88px; weight 300 | Grande titolo editoriale, non un elenco denso di risultati. | | Heading 1 ≥1024px | 48px / 56px; weight 300 | Titolo di pagina ampio. | | Heading 1 <1024px | 40px / 48px; weight 300 | Titolo di pagina compatto. | | Heading 4 ≥1024px | 24px / 32px; weight 400 | Titolo della sezione. | | Heading 4 <1024px | 20px / 28px; weight 400 | Titolo di sezione compatto. | | Body 2 | 16px / 24px; weight 400 | Ruolo predefinito del paragrafo. | | Body 3 | 14px / 20px; weight 400 | Metadati compatti. | | Caption | 12px / 20px; weight 400 | Testo di supporto del campo. | | Button 1 | 16px / 24px; weight 500 | Etichetta predefinita dell’azione. | ### Composizione della ricerca | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | InputGroup(element) | Initializer exported by @dds/components | Inizializza il wrapper del gruppo dopo averlo creato. | | dds__input-group | Input and addon wrapper | Mantieni gli slot iniziale e finale accanto all’input. | | dds__text-input | Native input class | L’applicazione gestisce query e risultati. | | dds__input-addon | Accessory wrapper | Icona decorativa iniziale o azione di cancellazione. | | dds__button--ghost | Low-emphasis button modifier | Gli esempi di ricerca/cancellazione usano questa variante. | | dds__button--icon-only | Icon-only button modifier | Aggiungi comunque aria-label al pulsante. | ### Stili di caricamento | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | dds-styles.css | All-in-one starter | Include gli stili dei componenti, i token, i font e i bundle helper. | | dds-tokens.css | Global and semantic tokens | Non include i token dei componenti. | | dds-components.css | All component styles and component tokens | Necessario insieme a token e font nell’approccio con bundle separati. | | dds-fonts.css | CDN font definitions | Includi per il rendering dei font DDS. | | dds-grid.css | Grid classes | Bundle di layout separato. | | dds-icons.css | Icon classes | Non carica autonomamente il font delle icone; consulta la configurazione delle icone. | ## Sistema di design Dell Guida completa Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Sistema di design Dell DDS v3 e i limiti della sua implementazione ### Una composizione, non un servizio di ricerca > DDS distingue le basi visive riutilizzabili dal comportamento del prodotto. Per questo inventario, il punto d’integrazione utile è InputGroup: un input nativo con slot accessori. Non esiste un costruttore Search da richiamare e il design system non recupera i dispositivi. La nostra applicazione gestisce come valori distinti l’input in bozza, la query applicata e il dispositivo selezionato. In questo modo è chiara la differenza tra digitare e inviare. Leggi la specifica di supporto ### Scegli una versione L’esempio pubblico per sviluppatori qui sotto è destinato a Vanilla 3.2.0. CSS e JavaScript utilizzano la stessa versione. Le integrazioni v2 esistenti adottano un packaging diverso e, prima di utilizzare questi import, dovrebbero seguire la documentazione per la migrazione. Il pacchetto attuale è riservato all’uso interno di Dell; il CDN documentato offre un modo concreto per valutare questa composizione senza inventare un registro npm pubblico. Leggi la specifica di supporto ## Sistema di design Dell Superfici semantiche e confini ### Usa i nomi dei ruoli pubblicati La tabella di riferimento riporta i valori degli input in modalità chiara, tratti dalla documentazione ufficiale del componente. Dopo aver caricato gli stili DDS, il codice del prodotto dovrebbe utilizzare le variabili semantiche CSS. Il testo principale e la superficie secondaria creano un’area dei risultati leggibile; il bordo del brand delimita l’input. Il colore di primo piano inattivo è volutamente attenuato e non deve diventare il colore predefinito dei metadati. Leggi la specifica di supporto ### Non ridefinire i token DDS Le primitive globali dei colori alimentano i ruoli semantici, che a loro volta supportano le scelte specifiche dei componenti. Chi sviluppa applicazioni dovrebbe fare riferimento ai ruoli semantici anziché sovrascrivere la scala globale. Per ottenere un aspetto scuro serve una modalità dei token effettivamente supportata; cambiare solo lo sfondo della pagina rende incoerenti i colori dei campi, delle etichette e dello stato di focus. Questo esempio locale mantiene la modalità chiara. Leggi la specifica di supporto ## Sistema di design Dell Tipografia adattiva senza modificare la struttura del documento ### Un’intestazione semantica, due dimensioni visive L’intestazione della pagina rimane un h1 su ogni viewport. Usa le dimensioni documentate per Heading 1: 48/56 nei layout ampi e 40/48 sotto i 1024px. L’esempio usa font di fallback di sistema perché è un’interpretazione locale indipendente; il foglio di stile nativo fornisce le risorse dei font DDS. Body 2 è usato per le descrizioni, mentre Body 3 presenta i metadati compatti dei dispositivi. Leggi la specifica di supporto ### Lascia spazio ai nomi reali Il modello di un dispositivo, il nome di un ufficio o lo stato dell’assistenza possono andare a capo. Mantieni gli identificatori leggibili e non troncare l’unica copia del codice di un asset. In un layout compatto cambiano la gerarchia visiva e la disposizione delle colonne, ma resta invariata l’associazione tra etichette e valori. Leggi la specifica di supporto ## Sistema di design Dell Ritmo a incrementi di quattro pixel per una vista divisa ### Associa i livelli della scala alle relazioni Usa sm tra azioni correlate, lg all’interno delle righe dei risultati e xl tra la query e l’area dei risultati. Nei layout più ampi, il contenitore esterno può usare 2xl. Sono applicazioni della scala pubblicata, non prescrizioni ufficiali secondo cui ogni pagina di ricerca debba usare esattamente questi margini interni. Leggi la specifica di supporto ### Densità e adattamento DDS descrive griglie compatte, predefinite e confortevoli. In questo esempio i controlli di ricerca mantengono una spaziatura confortevole, mentre i metadati di ciascun risultato sono compatti. Sugli schermi stretti, il pannello del dispositivo selezionato segue l’elenco dei risultati, mantenendo l’ordine di lettura. Il pannello dei dettagli non è fisso e non può coprire l’ultimo risultato. - Mantieni l’etichetta di ricerca e il testo guida sopra il campo a qualsiasi larghezza. - Sposta l’azione di invio sotto il campo quando la riga non entra nello spazio disponibile. - Sposta i dettagli del dispositivo selezionato sotto i risultati invece di introdurre lo scorrimento orizzontale. Leggi la specifica di supporto ## Sistema di design Dell Anatomia e comportamento della ricerca ### L’invio manuale è intenzionale Il simbolo di ricerca a sinistra è decorativo; è l’etichetta visibile a definire l’ambito dell’inventario. Il controllo per cancellare compare a destra solo quando è presente del testo. La modalità manuale invia il modulo, quindi il tasto Invio e il pulsante visibile Cerca dispositivi hanno lo stesso effetto. La modifica dell’input, da sola, non cambia l’insieme dei risultati applicato. Leggi la specifica di supporto ### La modalità automatica prevede un comportamento diverso DDS descrive anche una modalità automatica che si avvia dopo l’inserimento del quarto carattere. Non associare un filtro immediato, attivo già al primo carattere, a un’interfaccia documentata per quella modalità. Se passi alla ricerca automatica, rimuovi il pulsante di invio manuale e implementa con attenzione la soglia, l’annullamento e l’annuncio dei risultati. L’esempio fornito usa la modalità manuale. Leggi la specifica di supporto ## Sistema di design Dell Bozza, query applicata e selezione ### Transizioni di stato nell’esempio Cancella azzera sia l’input sia il filtro applicato, ripristina l’intero inventario di esempio e riporta il focus sul campo. La selezione è un’azione separata eseguita tramite pulsante: mostra i dettagli dell’asset senza modificare la query. Se non ci sono risultati, viene visualizzata la frase applicata insieme a un’opzione esplicita per azzerare la ricerca. Non viene mai dichiarato che sia stato consultato un inventario remoto. 1. Inserisci il nome o il codice di un asset; i risultati correnti rimangono invariati fino all’invio. 2. Invia il modulo e aggiorna il conteggio dei risultati in base all’array locale filtrato. 3. Esamina un risultato o cancella la query; mantieni il focus sul controllo che ha avviato l’azione. Leggi la specifica di supporto ## Sistema di design Dell Etichette, punti di riferimento e annunci ### Dichiara l’ambito effettivo Il modulo è un punto di riferimento di ricerca denominato Inventario dispositivi. Un’etichetta persistente e il testo guida rimangono visibili durante la digitazione. L’icona per cancellare è un pulsante con aria-label, non uno span con un gestore di clic. I simboli decorativi sono nascosti alle tecnologie assistive. Il conteggio dei risultati è un messaggio di stato annunciato in modalità cortese; viene aggiornato dopo l’invio, non a ogni pressione di tasto. Leggi la specifica di supporto ### La selezione non è navigazione Ogni risultato usa un vero pulsante con uno stato premuto e un nome accessibile completo. L’intestazione dei dettagli identifica l’elemento esaminato. Nessun collegamento finge di aprire una pagina di gestione dei dispositivi, perché questo esempio non dispone di un backend di gestione. La selezione corrente è indicata sia da un bordo sia da un’etichetta testuale. Leggi la specifica di supporto ## Sistema di design Dell Carica gli asset reali e inizializza il gruppo ### Inizia dal bundle documentato Per un’applicazione interna autorizzata, installa @dds/components da Dell Artifactory e importa dds-styles.css tramite la pipeline dei fogli di stile del progetto. Per una prova di concetto autonoma, usa i collegamenti CDN pubblici con versione bloccata mostrati qui sotto. Inizializza InputGroup dopo che il markup è disponibile. I gestori di eventi per l’invio, la cancellazione e il filtraggio rimangono codice dell’applicazione. Leggi la specifica di supporto ### Ottimizza dopo aver verificato il funzionamento della composizione Il foglio di stile completo è il punto di partenza più semplice. Un’integrazione selettiva richiede i token globali e semantici e i font, oltre al foglio di stile di ciascun componente usato. I soli token non includono quelli dei componenti, e le sole classi delle icone non caricano il font. Rimuovere questi bundle di supporto può produrre controlli apparentemente presenti ma visivamente incompleti. Leggi la specifica di supporto ## Sistema di design Dell Verifica il comportamento previsto della ricerca ### Un test locale utile Digita Latitude senza inviare e verifica che il conteggio precedente dei risultati rimanga invariato. Invia la ricerca ed esamina il dispositivo corrispondente. Cerca un codice non presente, verifica lo stato vuoto, quindi cancella la ricerca e controlla che ricompaiano tutti i dispositivi di esempio. Ripeti con la tastiera e su uno schermo stretto. Queste verifiche convalidano l’esempio, ma non certificano un prodotto Dell derivato né un’integrazione di rete. Leggi la specifica di supporto ## Sistema di design Dell Esempi di componenti del sistema di design ### Esempio interattivo completo e autonomo Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS della spaziatura, della tipografia e dei colori per gli input in modalità chiara documentati per DDS v3; font di fallback di sistema. ``` Device inventory — DDS v3 study
DEVICE OPERATIONS Local sample inventory

Find a device

Review model, location and support coverage in one place.

``` Riferimento del codice - Questo documento fornisce un comportamento di ricerca autonomo. Usa l’esempio DDS nativo per verificare l’inizializzazione di InputGroup con il foglio di stile e lo script con versione bloccata. ### Implementazione nativa completa L’implementazione completa descritta nella configurazione, raccolta qui insieme alle spiegazioni specifiche di API. Segui i prerequisiti documentati per pacchetti e build nella configurazione. ``` Local device search

Find a device

``` Riferimento del codice - Salva il file come index.html e avvialo in locale con accesso alla rete per usare il CDN documentato di DDS 3.2.0. Questo esempio usa l’inizializzazione effettiva di InputGroup e il filtraggio locale; non richiede un backend Dell. Alternativa npm per uso interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . L’anteprima incorporata è un’interpretazione offline di HTML/CSS, non l’esecuzione tramite questo CDN. ### InputGroup con ricerca gestita dall’applicazione La configurazione combina un input nativo e componenti aggiuntivi, inizializza InputGroup e collega l’invio effettivo del modulo. Il simbolo a sinistra è un carattere decorativo locale; non implica una dipendenza da un font di icone. ``` import { InputGroup } from '@dds/components'; InputGroup(document.querySelector('#device-search')); // Use the complete form and event handlers in the setup example. ``` Riferimento del codice - Nella documentazione v3 verificata non esiste un componente Search API autonomo. - Usa aria-label sui pulsanti con la sola icona; il filtraggio è gestito dall’applicazione. ## Sistema di design Dell Configurazione dell’agente AI ### Punto di partenza per l’implementazione Salva il file come index.html e avvialo in locale con accesso alla rete per usare il CDN documentato di DDS 3.2.0. Questo esempio usa l’inizializzazione effettiva di InputGroup e il filtraggio locale; non richiede un backend Dell. Alternativa npm per uso interno: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . L’anteprima incorporata è un’interpretazione offline di HTML/CSS, non l’esecuzione tramite questo CDN. ``` Local device search

Find a device

``` ### Un prompt per il tuo progetto ``` Crea una ricerca circoscritta per l’inventario dei dispositivi utilizzando la composizione completa di InputGroup di DDS 3.2.0. Mantieni l’invio manuale, un’etichetta visibile per l’ambito, l’annuncio dei risultati locali e la funzione di cancellazione. Usa i token semantici DDS e la tipografia adattiva; non inventare un componente Search API né sostituirlo con import legacy di v2. ``` ## Sistema di design Dell Fonti e ambito Riferimento indipendente a DDS v3. Il pacchetto interno richiede l’accesso al registro Dell; il CDN pubblico con versione specifica è documentato per la prototipazione. Non implica l’identità Dell, una connessione alla gestione degli asset né una certificazione ufficiale. - Installazione di DDS 3.2.0 Accesso al pacchetto interno, CDN pubblico per prototipi e bundle di stili necessari. - Implementazione della ricerca La ricerca è composta tramite InputGroup; non esiste un componente Search API autonomo. - Progettazione della ricerca Comportamento di ricerca manuale e automatico, etichette dell’ambito e punti di riferimento. - Spaziatura Undici livelli semantici di spaziatura. - Tipografia Scale predefinite e compatte. - Token degli input Colori semantici documentati usati dai campi di input. - Architettura dei token Confini tra token globali, semantici e dei componenti. - Griglia Densità e ritmo di quattro pixel. ## Sistema di design Dell Risorse correlate ### Duet sistema di design Esamina le scale cromatiche e di spaziatura di LocalTapiola di Duet attraverso un flusso di selezione di un intervallo di date, con valori ISO, convalida esplicita dell’intervallo, metodi di gestione del focus dei componenti e un confine distinto per il selettore open source. ### Elastic UI Crea un esploratore di log Elastic UI con le scale Borealis verificate, controlli nativi per tabelle e ricerca, filtri per gravità, eventi salvati in locale e codice sorgente React completo. ### Emplifi Soul Esamina il contratto delle tabelle dati di Soul insieme alla spaziatura di sei pixel, ai ruoli cromatici su più livelli e alla tipografia Inter compatta. Confronta la selezione multipla, la notazione dei dati mancanti e le righe di riepilogo, quindi consulta i punti di accesso verificati del pacchetto privato React. - [Riferimento per l’implementazione](https://www.delldesignsystem.com/components/search) - [Fonte](https://www.delldesignsystem.com/foundations/spacing) - [Fonte](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Fonte](https://www.delldesignsystem.com/foundations/typography/) - [Fonte](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Fonte](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Leggi la specifica di supporto](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Leggi la specifica di supporto](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Leggi la specifica di supporto](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Leggi la specifica di supporto](https://www.delldesignsystem.com/getting-started/tokens) - [Leggi la specifica di supporto](https://www.delldesignsystem.com/foundations/typography/) - [Leggi la specifica di supporto](https://www.delldesignsystem.com/foundations/spacing) - [Leggi la specifica di supporto](https://www.delldesignsystem.com/foundations/grid) - [Leggi la specifica di supporto](https://www.delldesignsystem.com/components/search) - [Riferimento del codice](https://www.delldesignsystem.com/components/search) - [Riferimento del codice](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Installazione di DDS 3.2.0 Accesso al pacchetto interno, CDN pubblico per prototipi e bundle di stili necessari.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Implementazione della ricerca La ricerca è composta tramite InputGroup; non esiste un componente Search API autonomo.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Progettazione della ricerca Comportamento di ricerca manuale e automatico, etichette dell’ambito e punti di riferimento.](https://www.delldesignsystem.com/components/search) - [Spaziatura Undici livelli semantici di spaziatura.](https://www.delldesignsystem.com/foundations/spacing) - [Tipografia Scale predefinite e compatte.](https://www.delldesignsystem.com/foundations/typography/) - [Token degli input Colori semantici documentati usati dai campi di input.](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Architettura dei token Confini tra token globali, semantici e dei componenti.](https://www.delldesignsystem.com/getting-started/tokens) - [Griglia Densità e ritmo di quattro pixel.](https://www.delldesignsystem.com/foundations/grid)