# HPE Grommet-Designsystem ## Vorschau der HPE Grommet-Designsystemoberfläche Passe eine vorgeschlagene Zuweisung an und erstelle einen validierten lokalen Plan. ## Designreferenz für das HPE Grommet-Designsystem Grommet-v2-Basisthema, generiert mit baseSpacing=24 und scale=6; dies sind keine Werte aus grommet-theme-hpe. Das native Grundgerüst legt Arial sowie die gezeigten Marken- und Fokusfarben explizit als Anwendungsentscheidungen fest. ### Standardmäßige Skala der Randgrößen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | global.edgeSize.hair | 1px | Standardgröße außerhalb der kleinen responsiven Anpassung. | | global.edgeSize.xxsmall | 3px | Standardgröße außerhalb der kleinen responsiven Anpassung. | | global.edgeSize.xsmall | 6px | Standardgröße außerhalb der kleinen responsiven Anpassung. | | global.edgeSize.small | 12px | Standardgröße außerhalb der kleinen responsiven Anpassung. | | global.edgeSize.medium | 24px | Standardgröße außerhalb der kleinen responsiven Anpassung. | | global.edgeSize.large | 48px | Standardgröße außerhalb der kleinen responsiven Anpassung. | | global.edgeSize.xlarge | 96px | Standardgröße außerhalb der kleinen responsiven Anpassung. | ### Kleine responsive Anpassungen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | global.breakpoints.small.value | 768 | Grenzwert des kleinen Breakpoints im Basisthema. | | small.edgeSize.xxsmall | 2px | Feiner Abstand auf kleinen Bildschirmen. | | small.edgeSize.xsmall | 3px | Xsmall-Abstand auf kleinen Bildschirmen. | | small.edgeSize.small | 6px | Responsives kleines Padding. | | small.edgeSize.medium | 12px | Responsives mittleres Padding. | | small.edgeSize.large | 24px | Responsives großes Padding. | | global.breakpoints.medium.value | 1536 | Nächster Breakpoint-Grenzwert der Basis. | ### Basisfarben und Steuerelemente | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | global.colors.brand | #7D4CDB | Grommet-Standardmarkenfarbe, nicht HPE-Grün. | | global.colors.focus | #6FFFB0 | Standardmäßige Fokusakzentfarbe. | | global.colors.text.light | #444444 | Fließtextfarbe im hellen Thema. | | global.colors.text.dark | #f8f8f8 | Fließtextfarbe im dunklen Thema. | | global.colors.background-front.light | #FFFFFF | Helle Vordergrundfläche. | | global.colors.background-front.dark | #444444 | Dunkle Vordergrundfläche. | | global.control.border.radius | 4px | Eckenradius des Basis-Steuerelements. | | global.control.border.width | 1px | Rahmen des Basis-Steuerelements. | ### Vereinbarung für Formulare und Felder | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Form.value | Object keyed by field name | Verwende ein einzelnes kontrolliertes Reservierungsobjekt. | | Form.onChange | (value) => {} | Erhält das aktualisierte Objekt, kein DOM-Ereignis. | | Form.onSubmit | ({ value, touched }) => {} | Lies den akzeptierten aktuellen Formularwert aus. | | Form.validate | blur \| submit \| change | Lege fest, wann die Validierung ausgeführt wird. | | Form.errors | Object keyed like value | Weise Feldern Fehler aus entfernten Quellen oder der Anwendung zu. | ### Integration von Select und Bereichen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Select.options | String array or object array | Das Beispiel verwendet Zeichenfolgen, um das Wertformat einfach zu halten. | | Select.onChange | ({ value, option }) => {} | Lies für Select nicht event.target.value aus. | | Select.valueKey | { key, reduce } for object options | reduce gibt den Schlüsselwert statt des vollständigen Objekts zurück. | | Select.labelKey | Property name or function | Sichtbare Bezeichnung für Objektoptionen. | | Select.onSearch | Function; enables search input | Stelle bei Bedarf eine Filterfunktion der Anwendung bereit. | ### Aufbau des Messgeräts | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | value | number | Dargestellter Wert; wird ignoriert, wenn values angegeben ist. | | max | number or numeric string | Verfügbare Gesamtkapazität; nicht mit einem Prozentwert verwechseln. | | type | bar \| circle \| pie \| semicircle | Verwende circle für die Auslastungsübersicht. | | color | Color identifier | Mit einem einzelnen Wert gültig. | | a11yTitle | string | Beschreibe den Messwert und den Nenner. | | size | Named size or CSS dimension | Der Ring muss innerhalb der verfügbaren Breite bleiben. | ## Vollständiger Leitfaden zum HPE Grommet-Designsystem 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. ## HPE Grommet-Designsystem: Grommet-Basis und HPE-Thema ### Lila nicht als HPE-Token bezeichnen > Grommet ist ein mit HPE verbundenes React-Framework mit eigenem Basisthema. Das separate Paket grommet-theme-hpe exportiert hpe für Anwendungen, die das HPE-Design übernehmen. Diese Referenz behandelt das Basis-Framework und ein explizit konfiguriertes Beispiel. Das violette Markenthema und die mintgrüne Fokusfarbe stammen aus dem Basisthema; sie werden nicht als aktuelle HPE-Markenpalette dargestellt. Unterstützende Spezifikation lesen ### Ein kleines, explizites Anwendungsthema Die Einrichtung verwendet Arial als Anwendungsentscheidung für die Schrift und wiederholt die dokumentierten Marken- und Fokusfarben der Basis. Alle übrigen Komponentenregeln übernehmen die Werte von Grommet. Ein echtes HPE-Produkt kann stattdessen das freigegebene hpe-Thema übergeben. Prüfe anschließend Abstände und Typografie, da Themenüberschreibungen die hier aufgeführten Basiswerte ändern können. Unterstützende Spezifikation lesen ## HPE Grommet-Designsystem: Themenskalen können sich an einem Breakpoint ändern ### Benannte Werte sind responsive Entscheidungen Der Basisgenerator beginnt bei 24 Pixeln. Der standardmäßige mittlere Randabstand beträgt 24px, am kleinen Breakpoint wird der mittlere Abstand jedoch auf 12px reduziert. Das responsive Padding einer Box kann daher kleiner werden, obwohl im JSX weiterhin medium steht. Betrachte Skala und Breakpoint-Anpassung gemeinsam; behaupte nicht, medium entspreche immer vierundzwanzig Pixeln. Unterstützende Spezifikation lesen ### Verwende Box für das tatsächliche Layout Der Planer verwendet eine Spalten-Box als Seite sowie eine responsive Zeilen-/Spalten-Box für das Formular und die Kapazitätsübersicht. Das untergeordnete Formular kann wachsen, während die Übersicht eine sinnvolle Mindestbreite beibehält. Auf kleinen Bildschirmen folgt das Diagramm auf die Steuerelemente und entspricht damit der Dokumentreihenfolge. Unterstützende Spezifikation lesen ## HPE Grommet-Designsystem: Eine bewusst festgelegte, gut lesbare Basis ### Schriftgröße und Zeilenhöhe sind separate Themenwerte Der Basisgenerator leitet aus seinem Abstandsparameter eine Schriftgröße von achtzehn Pixeln mit einer Zeilenhöhe von vierundzwanzig Pixeln ab. Das Beispiel verwendet dieses Wertepaar explizit mit Arial, um nicht den Eindruck zu erwecken, eine proprietäre Markenschrift sei heruntergeladen worden. Überschriften verwenden Grommet Heading und Text verwendet Text. So kann das Thema ihre Rollen festlegen, statt dass Komponenteninternes in CSS nachgebildet wird. Unterstützende Spezifikation lesen ## HPE Grommet-Designsystem: Ein einzelnes kontrolliertes Reservierungsobjekt ### Feldnamen verknüpfen Felder mit dem Formular Form verwaltet die abgestimmte Formularvereinbarung. Beim kontrollierten Muster gehören value und onChange der aufrufenden Komponente. Der name-Wert jedes FormField und Eingabefelds gibt den zugehörigen Schlüssel im Wertobjekt an. Unser Reservierungsobjekt enthält name und pool. Der Kapazitätsregler wird als separate Zahl gehalten, da er bereits vor dem Absenden ein Live-Diagramm steuert. Unterstützende Spezifikation lesen ### Validiere den Reservierungsnamen Ein erforderliches FormField mit name="name" umschließt TextInput id="reservation-name". htmlFor verknüpft das sichtbare Label mit dem Eingabefeld. Der benutzerdefinierte Validator gibt eine konkrete Fehlermeldung zurück, wenn der getrimmte Wert kürzer als drei Zeichen ist. Setzen Sie validation auf submit, damit ein unberührtes, leeres Formular nicht sofort einen Fehler anzeigt. Unterstützende Spezifikation lesen ## HPE Grommet Select im Grommet-Designsystem hat ein eigenes Ereignisformat ### Mit Zeichenfolgen bleibt der einfache Fall vorhersehbar Die Pooloptionen im Beispiel sind Production und Development. Der kontrollierte Wert ist daher eine Zeichenfolge. Wenn Sie zu Objektoptionen wechseln, legen Sie labelKey und optional valueKey mit reduce fest und halten Sie den gespeicherten Wert mit dieser Auswahl konsistent. Select onChange liefert ein Wert-/Optionsobjekt, anders als das Ereignis der nativen Range-Eingabe. Unterstützende Spezifikation lesen ### Suche und das Laden von Optionen sind Aufgaben der Anwendung Select kann ein Suchfeld anzeigen, wenn onSearch übergeben wird. Diese Prop bedeutet nicht, dass jede Option automatisch gefiltert wird. Halten Sie die ungefilterte Quellsammlung separat vor, damit sie nach dem Schließen oder Leeren der Suche wiederhergestellt werden kann. Im Beispiel wird die Suche für zwei Pools bewusst weggelassen. Unterstützende Spezifikation lesen ## HPE Grommet Ein Meter im Grommet-Designsystem benötigt Einheiten und einen Nenner ### Kapazität statt eines unerklärten Prozentwerts darstellen Meter erhält den voraussichtlichen Verbrauch und max=100. In diesem beispielhaften Planer sind im Beispielpool bereits 35 Einheiten belegt; die vorgeschlagene Reservierung reicht von 5 bis 60. Der Prozentwert entspricht zufällig der Zahl, weil der Nenner der Demonstration einhundert beträgt. Der Code übergibt max dennoch explizit, damit der Datenvertrag auch bei einer anderen Gesamtkapazität gilt. Unterstützende Spezifikation lesen ### Diagramm und Text synchron halten Der Kreis, die Beschriftung des voraussichtlichen Verbrauchs und die verbleibenden Einheiten werden aus demselben numerischen Sliderwert abgeleitet. Die native RangeInput gibt ein DOM-Ereignis aus. Wandeln Sie event.target.value daher vor Berechnungen mit Number in eine Zahl um. Andernfalls kann die Addition einer Zeichenfolge zu fünfunddreißig ein plausibel wirkendes, aber falsches Ergebnis liefern. Unterstützende Spezifikation lesen ## HPE Grommet Dokument-Scrolling und ein Layout für schmale Bildschirme im Grommet-Designsystem ### Für diese Seite full="min" wählen Grommet full=true ist für Anwendungen gedacht, die den Viewport und das innere Scrolling selbst steuern. Dieser Planer verwendet full="min", damit das Dokument wachsen kann. So werden das Formular und seine Validierungsmeldung auf einem Smartphone nicht in einem Container mit fester Höhe eingeschlossen. Unterstützende Spezifikation lesen ### ResponsiveContext innerhalb von Grommet auslesen Eine untergeordnete Komponente liest den aktuellen Kontext aus und wählt für kleine Bildschirme column, andernfalls row. Der Provider muss diese Komponente umschließen, damit ihr Kontext das gewählte Theme widerspiegelt. Bei geringer verfügbarer Breite bleibt das Layout als Fallback eine natürliche Spalte. - Die Feldbeschriftungen oberhalb der Eingabefelder platzieren. - Die Kapazitätsübersicht in der Quellreihenfolge nach den Steuerelementen platzieren. - Die Aktionszeile umbrechen lassen, ohne Validierungstext auszublenden. Unterstützende Spezifikation lesen ## HPE Grommet Beschriftung, Fehler und Messwerte im Grommet-Designsystem verknüpfen ### Jeder numerischen Anzeige eine Bedeutung geben Das Range-Steuerelement hat eine dauerhafte Beschriftung und eine sichtbare Einheit. Der Kreis erhält einen a11yTitle mit dem voraussichtlichen Verbrauch und der Gesamtkapazität. Ein benachbarter Text zeigt dieselben Zahlen an, sodass die Information nicht allein von einem farbigen Bogen abhängt. Der Fehlertext benennt das Problem mit der Reservierung und bleibt neben dem zugehörigen Feld. Unterstützende Spezifikation lesen ### Das lokale Ergebnis klar kenntlich machen Plan vorbereiten speichert eine lokale Momentaufnahme des validierten Formulars und der aktuellen Zuteilung. Es werden keine Infrastrukturressourcen bereitgestellt. Das Ergebnis ändert sich erst nach einer gültigen Übermittlung; Änderungen am Slider bleiben ein Vorschlag. Diese Unterscheidung erleichtert den Vergleich zwischen einem vorbereiteten Plan und dem aktuell bearbeiteten Entwurf. 1. Senden Sie das Formular mit leerem Namensfeld ab und prüfen Sie die Fehlermeldung für das Pflichtfeld. 2. Geben Sie einen Namen ein, wählen Sie einen Pool und passen Sie die Zuteilung an. 3. Bereiten Sie den Plan vor und prüfen Sie, ob die lokale Momentaufnahme den ausgewählten Pool und die Einheiten als Zahl enthält. Unterstützende Spezifikation lesen ## HPE Grommet Designsystem Eine vollständige Grommet-Komposition einbinden ### Framework und zugehöriges Styling-Peer-Paket installieren Installieren Sie grommet mit styled-components und der Laufzeit React in einem Clientprojekt. Richten Sie Grommet ein und binden Sie anschließend eine untergeordnete Komponente mit ResponsiveContext, ein kontrolliertes Form, FormField/TextInput/Select, RangeInput und Meter ein. Verwenden Sie bei Button label statt children, damit das standardmäßige Verhalten der beschrifteten Schaltfläche explizit bleibt. Unterstützende Spezifikation lesen ## HPE Grommet Designsystem Komponentenbeispiele ### Vollständige, eigenständige interaktive Demo Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Unabhängige Interpretation von Basismaßen und -farben von HTML/CSS mit explizit gewählter Arial-Schrift; nicht das separate HPE-Theme. ``` Capacity reservation — Grommet study
Capacity planner

Plan a reservation

Explore a proposed allocation before preparing a local plan. This model contains 100 capacity units.

5 units60 units

No infrastructure will be provisioned.

``` Code-Referenz - Die Kapazitätsberechnungen verwenden den angezeigten Beispielpool. Das eigenständige Layout ist unabhängig HTML; das native Beispiel verwendet das Basis-Theme von Grommet und nicht das separate HPE-Theme. ### 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. ``` // npm install react react-dom grommet styled-components import React, { useContext, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Grommet, Box, Heading, Text, Form, FormField, TextInput, Select, RangeInput, Meter, Button, ResponsiveContext } from 'grommet'; const theme={global:{font:{family:'Arial, sans-serif',size:'18px',height:'24px'},colors:{brand:'#7D4CDB',focus:'#6FFFB0'}}}; function Planner(){ const size=useContext(ResponsiveContext); const [value,setValue]=useState({name:'',pool:'Production'}); const [units,setUnits]=useState(20),[plan,setPlan]=useState(null); const used=35+units; return Plan a reservation Local capacity model. No infrastructure is provisioned.
setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}> setPoolId(value)} /> ``` Code-Referenz - poolId/setPoolId mit useState in der aufrufenden Komponente deklarieren. - Wenn reduce aktiviert ist, wird die ID statt des Objekts gespeichert. ## HPE Grommet Einrichtung des KI-Agenten für das Grommet-Designsystem ### Ausgangspunkt für die Implementierung Clientseitige main.jsx für ein Projekt mit einem Root-Element. Basis-Theme von Grommet mit explizit deklarierter Schriftart und Markenüberschreibung der Anwendung. Es wird nicht stillschweigend ein HPE-Theme vorausgesetzt. API anhand der offiziellen Dokumentation geprüft; die native Kompilierung wurde hier nicht verifiziert. ``` // npm install react react-dom grommet styled-components import React, { useContext, useState } from 'react'; import { createRoot } from 'react-dom/client'; import { Grommet, Box, Heading, Text, Form, FormField, TextInput, Select, RangeInput, Meter, Button, ResponsiveContext } from 'grommet'; const theme={global:{font:{family:'Arial, sans-serif',size:'18px',height:'24px'},colors:{brand:'#7D4CDB',focus:'#6FFFB0'}}}; function Planner(){ const size=useContext(ResponsiveContext); const [value,setValue]=useState({name:'',pool:'Production'}); const [units,setUnits]=useState(20),[plan,setPlan]=useState(null); const used=35+units; return Plan a reservation Local capacity model. No infrastructure is provisioned. setPlan({...accepted,units})}> String(name || '').trim().length<3?'Use at least three characters':undefined}>