# Dell Designsystem ## Dell Designsystem-Oberflächenvorschau Senden Sie eine lokale Suchanfrage, sehen Sie sich ein Ergebnis an und stellen Sie mit „Leeren“ den Bestand wieder her. ## Dell Designsystem-Designreferenz DDS-v3-Grundlagen und das verifizierte Storybook für Vanilla 3.2.0. Die Farbwerte stammen aus den Vorschauen für den hellen Modus in der Token-Tabelle für Texteingaben und gelten nicht für jedes Theme. Die Vorschau setzt diese Regeln in einem eigenständigen HTML/CSS um; das Codebeispiel lädt das echte, versionierte DDS-CDN. ### Abstände | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --dds-spacing-xs | 4px / 0.25rem | Nähe zwischen Symbol und Beschriftung. | | --dds-spacing-sm | 8px / 0.5rem | Benachbarte Suchaktionen. | | --dds-spacing-md | 12px / 0.75rem | Kompakte Objektzeilen. | | --dds-spacing-lg | 16px / 1rem | Innenabstand der Ergebnisinhalte. | | --dds-spacing-xl | 24px / 1.5rem | Abstand zwischen Suche und Ergebnissen. | | --dds-spacing-2xl | 32px / 2rem | Innenabstand des Hauptbereichs. | | --dds-spacing-3xl | 40px / 2.5rem | Abstände zwischen Abschnitten. | | --dds-spacing-4xl | 48px / 3rem | Abgrenzung wichtiger Abschnitte. | | --dds-spacing-5xl | 64px / 4rem | Großzügige Layoutabstände. | | --dds-spacing-6xl | 80px / 5rem | Großzügige Gestaltung. | | --dds-spacing-7xl | 96px / 6rem | Größter aufgeführter Abstandsschritt. | ### Semantische Farbbeispiele für den hellen Modus | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --dds-color-text-primary | #1D2C3B | Primäre Ergebnisbeschriftungen. | | --dds-color-background-surface-secondary | #EBF1F6 | Sekundäre Inhaltsfläche. | | --dds-color-border-brand-base | #00468B | Rahmen des Markeneingabefelds. | | --dds-color-background-surface-inactive | #E1E1E1 | Inaktive Feldfläche. | | --dds-color-border-inactive-base | #7E7E7E | Inaktive Begrenzung. | | --dds-color-text-inactive | #B6B6B6 | Inaktive Beschriftung; kein Fließtext. | ### Ausgewählte Rollen der Typografieskala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Display 1 ≥1024px | 72px / 88px; weight 300 | Großer redaktioneller Titel, keine dichte Ergebnisliste. | | Heading 1 ≥1024px | 48px / 56px; weight 300 | Breiter Seitentitel. | | Heading 1 <1024px | 40px / 48px; weight 300 | Kompakter Seitentitel. | | Heading 4 ≥1024px | 24px / 32px; weight 400 | Abschnittstitel. | | Heading 4 <1024px | 20px / 28px; weight 400 | Kompakter Abschnittstitel. | | Body 2 | 16px / 24px; weight 400 | Standardrolle für Fließtext. | | Body 3 | 14px / 20px; weight 400 | Dichte Metadaten. | | Caption | 12px / 20px; weight 400 | Zusatzinformationen zum Feld. | | Button 1 | 16px / 24px; weight 500 | Standardbeschriftung für Aktionen. | ### Suchkomposition | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | InputGroup(element) | Initializer exported by @dds/components | Initialisieren Sie den Gruppen-Wrapper, sobald er vorhanden ist. | | dds__input-group | Input and addon wrapper | Die vorangestellten und nachgestellten Slots direkt neben dem Eingabefeld anordnen. | | dds__text-input | Native input class | Die Anwendung verwaltet Suchanfrage und Ergebnisse. | | dds__input-addon | Accessory wrapper | Dekoratives vorangestelltes Symbol oder Aktion zum Löschen. | | dds__button--ghost | Low-emphasis button modifier | Die Beispiele für Suche und Löschen verwenden diese Variante. | | dds__button--icon-only | Icon-only button modifier | Dem Button weiterhin ein aria-label zuweisen. | ### Styles laden | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | dds-styles.css | All-in-one starter | Enthält Komponenten-Styles, Tokens, Schriftarten und Hilfs-Bundles. | | dds-tokens.css | Global and semantic tokens | Enthält keine Komponenten-Tokens. | | dds-components.css | All component styles and component tokens | Bei der Verwendung separater Bundles zusätzlich zu Tokens und Schriftarten erforderlich. | | dds-fonts.css | CDN font definitions | Für die Darstellung der DDS-Schriftarten einbinden. | | dds-grid.css | Grid classes | Separates Layout-Bundle. | | dds-icons.css | Icon classes | Lädt die Symbolschriftart nicht eigenständig; beachten Sie die Einrichtung der Symbole. | ## Dell Designsystem Vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## 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 DDS beschreibt kompakte, standardmäßige und komfortable Raster. In diesem Beispiel bleiben die Suchsteuerelemente komfortabel, während die Metadaten in jedem Ergebnis kompakt angeordnet sind. Auf schmalen Bildschirmen folgt der Bereich für das ausgewählte Gerät auf die Ergebnisliste, damit die Lesereihenfolge erhalten bleibt. Der Detailbereich ist nicht fixiert und kann das letzte Ergebnis nicht verdecken. - 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 Das vollständige Stylesheet ist der unkomplizierte Einstieg. Für eine selektive Integration benötigen Sie globale und semantische Design-Tokens sowie Schriftarten und die Stylesheets für jede verwendete Komponente. Design-Tokens allein enthalten keine Komponententokens, und Symbolklassen allein laden die Schriftart nicht. Wenn Sie diese unterstützenden Bundles entfernen, können Steuerelemente zwar vorhanden, aber visuell unvollständig wirken. 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 ### Vollständige, eigenständige interaktive Demo Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Eigenständige HTML/CSS-Interpretation von Abständen, Typografie und dokumentierten hellen Eingabefarben in DDS v3; System-Fallback-Schriftart. ``` Device inventory — DDS v3 study
DEVICE OPERATIONS Local sample inventory

Find a device

Review model, location and support coverage in one place.

``` Code-Referenz - Dieses Dokument stellt die Suchfunktion selbst bereit. Verwenden Sie das native DDS-Beispiel, um die Initialisierung von InputGroup anhand des festgelegten Stylesheets und Skripts zu prüfen. ### Vollständiger Einstieg für die native Implementierung Die vollständige Implementierung aus dem Setup, hier zusammen mit den gezielten Erläuterungen zu API zusammengestellt. Beachte die in den Setup-Anweisungen dokumentierten Voraussetzungen für Pakete und Builds. ``` Local device search

Find a device

``` Code-Referenz - Speichern Sie die Datei als index.html und stellen Sie sie mit Netzwerkzugriff auf das dokumentierte DDS 3.2.0-CDN lokal bereit. Dieses Beispiel verwendet die echte InputGroup-Initialisierung und lokale Filterung; es ist nicht mit einem Dell-Backend verbunden. Alternative mit internem npm-Repository: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . Die eingebettete Vorschau ist eine Offline-Interpretation von HTML/CSS und entspricht nicht der Laufzeitumgebung dieses CDN. ### InputGroup mit anwendungseigener Suche Der Aufbau kombiniert native Eingabefelder und Ergänzungen, initialisiert InputGroup und bindet eine echte Formularübermittlung ein. Das vorangestellte Symbol ist ein lokales dekoratives Zeichen; eine Abhängigkeit von einer Symbolschrift ist damit nicht gemeint. ``` import { InputGroup } from '@dds/components'; InputGroup(document.querySelector('#device-search')); // Use the complete form and event handlers in the setup example. ``` Code-Referenz - In der verifizierten v3-Dokumentation gibt es keine eigenständige Search API. - Verwenden Sie aria-label für Schaltflächen, die nur ein Symbol enthalten; die Filterfunktion wird von der Anwendung bereitgestellt. ## Dell Designsystem Agent einrichten ### Ausgangspunkt für die Implementierung Speichern Sie die Datei als index.html und stellen Sie sie mit Netzwerkzugriff auf das dokumentierte DDS 3.2.0-CDN lokal bereit. Dieses Beispiel verwendet die echte InputGroup-Initialisierung und lokale Filterung; es ist nicht mit einem Dell-Backend verbunden. Alternative mit internem npm-Repository: npm install @dds/components --registry=https://artifacts.dell.com/artifactory/api/npm/dx-npm-prod/ . Die eingebettete Vorschau ist eine Offline-Interpretation von HTML/CSS und entspricht nicht der Laufzeitumgebung dieses CDN. ``` Local device search

Find a device

``` ### Ein Prompt für dein Projekt ``` Erstellen Sie eine gezielte Gerätesuche mit dem vollständigen InputGroup-Aufbau von DDS 3.2.0. Behalten Sie die manuelle Übermittlung, eine sichtbare Bereichsbezeichnung, die lokale Ergebnisankündigung und die Löschfunktion bei. Verwenden Sie DDS-Semantiktokens und responsive Typografie. Erfinden Sie keine Search API und ersetzen Sie keine Importe aus der veralteten v2. ``` ## Dell Designsystem Quellen und Geltungsbereich Unabhängige Referenz zu DDS v3. Für das interne Paket ist Zugriff auf die Dell-Registry erforderlich; das öffentliche versionierte CDN ist für Prototypen dokumentiert. Es wird weder eine Verbindung zur Dell-Identität oder Vermögensverwaltung noch eine offizielle Zertifizierung impliziert. - Installation von DDS 3.2.0 Zugriff auf das interne Paket, öffentliches CDN für Prototypen und erforderliche Style-Bundles. - Suchimplementierung Die Suche wird mit InputGroup aufgebaut; es gibt keine eigenständige Search API. - Suchdesign Manuelle und automatische Suche, Bereichsbezeichnungen und Landmarks. - Abstände Elf semantische Abstandsabstufungen. - Typografie Standard- und kompakte Abstufungen. - Eingabetokens Dokumentierte semantische Farben für Eingabefelder. - Token-Architektur Abgrenzung globaler, semantischer und komponentenspezifischer Tokens. - Raster Dichte und Vier-Pixel-Rhythmus. ## Dell Designsystem Verwandte Ressourcen ### Duet Designsystem Untersuchen Sie Duets Farb- und Abstandsskalen von LocalTapiola anhand eines Datumsbereichsablaufs mit ISO-Datumswerten, expliziter Bereichsvalidierung, Fokusmethoden der Komponente und klar abgegrenztem Open-Source-Picker. ### Elastic UI Erstellen Sie einen Elastic UI-Log-Explorer mit geprüften Borealis-Skalen, nativen Tabellen- und Suchsteuerelementen, Schweregradfiltern, lokal gespeicherten Ereignissen und vollständigem React-Quellcode. ### Emplifi Soul Lesen Sie Souls Vertrag für Datentabellen zusammen mit den sechs Pixeln Abstand, den abgestuften Farbrollen und der kompakten Inter-Typografie. Vergleichen Sie die Mehrfachauswahl, die Kennzeichnung fehlender Daten und die Zusammenfassungszeilen. Prüfen Sie anschließend die Einstiegspunkte des verifizierten privaten React-Pakets. - [Implementierungsreferenz](https://www.delldesignsystem.com/components/search) - [Quelle](https://www.delldesignsystem.com/foundations/spacing) - [Quelle](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Quelle](https://www.delldesignsystem.com/foundations/typography/) - [Quelle](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Quelle](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Unterstützende Spezifikation lesen](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Unterstützende Spezifikation lesen](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Unterstützende Spezifikation lesen](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Unterstützende Spezifikation lesen](https://www.delldesignsystem.com/getting-started/tokens) - [Unterstützende Spezifikation lesen](https://www.delldesignsystem.com/foundations/typography/) - [Unterstützende Spezifikation lesen](https://www.delldesignsystem.com/foundations/spacing) - [Unterstützende Spezifikation lesen](https://www.delldesignsystem.com/foundations/grid) - [Unterstützende Spezifikation lesen](https://www.delldesignsystem.com/components/search) - [Code-Referenz](https://www.delldesignsystem.com/components/search) - [Code-Referenz](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Installation von DDS 3.2.0 Zugriff auf das interne Paket, öffentliches CDN für Prototypen und erforderliche Style-Bundles.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=getting-started-installation--docs&viewMode=docs) - [Suchimplementierung Die Suche wird mit InputGroup aufgebaut; es gibt keine eigenständige Search API.](https://vanilla.delldesignsystem.com/3.2.0/iframe.html?id=components-search--docs&viewMode=docs) - [Suchdesign Manuelle und automatische Suche, Bereichsbezeichnungen und Landmarks.](https://www.delldesignsystem.com/components/search) - [Abstände Elf semantische Abstandsabstufungen.](https://www.delldesignsystem.com/foundations/spacing) - [Typografie Standard- und kompakte Abstufungen.](https://www.delldesignsystem.com/foundations/typography/) - [Eingabetokens Dokumentierte semantische Farben für Eingabefelder.](https://www.delldesignsystem.com/components/text-input/?tab=Design) - [Token-Architektur Abgrenzung globaler, semantischer und komponentenspezifischer Tokens.](https://www.delldesignsystem.com/getting-started/tokens) - [Raster Dichte und Vier-Pixel-Rhythmus.](https://www.delldesignsystem.com/foundations/grid)