Modellieren Sie eine Kapazitätsreservierung mit den Layout-Primitiven, gesteuerten Formularfeldern und numerischen Anzeigen von Grommet. Setzen Sie die Theme-Skala bewusst ein und halten Sie das Grommet-Basistheme vom separat installierten HPE-Theme getrennt.
Eigenständige Interpretation von HTML/CSS-Abmessungen und -Farben der Grommet-Basis mit explizit gewählter Arial-Schrift; nicht das separate HPE-Thema. · Implementierungsreferenz
02
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Capacity reservation — Grommet study</title><style>*{box-sizing:border-box}body{margin:0;background:white;color:#444;font:18px/24px Arial,sans-serif}header{padding:24px 36px;border-bottom:1px solid #ddd;display:flex;gap:12px;align-items:center}.mark{width:22px;height:22px;border:4px solid #7d4cdb;border-radius:50%}main{max-width:1050px;margin:auto;padding:36px}h1{font-size:36px;line-height:42px;margin:12px 0 24px;color:#222}h2{font-size:24px;line-height:30px;margin:0 0 12px}.intro{max-width:650px;margin-bottom:36px}.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:48px}label{display:block;font-weight:600;margin-bottom:12px}input,select,button{font:inherit;max-width:100%}input[type=text],select{width:100%;border:1px solid #888;border-radius:4px;background:transparent;padding:12px;color:#444}input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid #6fffb0;outline-offset:3px}.field{margin-bottom:24px}input[type=range]{width:100%;accent-color:#7d4cdb}.limits{display:flex;justify-content:space-between;font-size:14px;color:#666;margin-top:6px}button{border:2px solid #7d4cdb;border-radius:24px;background:#7d4cdb;color:white;padding:10px 24px;font-weight:600;cursor:pointer}button:hover{background:#6839c0}aside{background:#f2f2f2;padding:24px;border-radius:12px;align-self:start;text-align:center}.ring{width:192px;height:192px;border-radius:50%;background:conic-gradient(#7d4cdb var(--used),#dadada 0);margin:24px auto;display:grid;place-items:center;position:relative}.ring:before{content:'';position:absolute;inset:12px;background:#f2f2f2;border-radius:50%}.ring span{position:relative;font-size:36px;font-weight:bold}.ring small{display:block;font-size:14px;font-weight:400;line-height:20px}.legend{text-align:left;border-top:1px solid #ddd;padding-top:12px;font-size:14px}.legend div{display:flex;justify-content:space-between;margin:8px 0}.error{font-size:14px;color:#b30000;margin-top:6px}#result{background:#f2f2f2;border-left:4px solid #7d4cdb;padding:24px;margin-top:36px}footer{font-size:12px;line-height:18px;color:#666;border-top:1px solid #ddd;padding:24px 36px}@media(max-width:700px){main{padding:24px}.layout{grid-template-columns:1fr;gap:24px}h1{font-size:30px;line-height:36px}header,footer{padding:24px}.intro{margin-bottom:24px}}</style><header><span class="mark" aria-hidden="true"></span><strong>Capacity planner</strong></header><main><h1>Plan a reservation</h1><p class="intro">Explore a proposed allocation before preparing a local plan. This model contains 100 capacity units.</p><div class="layout"><form id="form" novalidate><div class="field"><label for="name">Reservation name</label><input id="name" type="text" required aria-describedby="error"><div class="error" id="error" hidden></div></div><div class="field"><label for="pool">Capacity pool</label><select id="pool"><option>Production</option><option>Development</option></select></div><div class="field"><label for="units">Requested allocation: <output id="requested">20</output> units</label><input id="units" type="range" min="5" max="60" step="5" value="20"><div class="limits"><span>5 units</span><span>60 units</span></div></div><button type="submit">Prepare plan</button><p style="font-size:14px;color:#666">No infrastructure will be provisioned.</p></form><aside><h2>Projected usage</h2><div class="ring" id="ring" style="--used:55%" role="img" aria-label="55 of 100 units projected usage"><span><output id="used">55</output><small>of 100 units</small></span></div><div class="legend"><div><span>Already used</span><strong>35</strong></div><div><span>Proposed reservation</span><strong id="proposed">20</strong></div><div><span>Remaining</span><strong id="remaining">45</strong></div></div></aside></div><section id="result" hidden><h2>Prepared local plan</h2><p id="snapshot" role="status"></p><p style="font-size:14px">This snapshot changes only when you prepare the plan again.</p></section></main><footer>Independent base Grommet HTML/CSS interpretation. Base purple/mint palette and spacing; Arial is an application font choice. This is not the separate HPE branded theme.</footer><script>
const $=id=>document.getElementById(id);$('units').oninput=()=>{const units=Number($('units').value),used=35+units;$('requested').textContent=$('proposed').textContent=units;$('used').textContent=used;$('remaining').textContent=100-used;$('ring').style.setProperty('--used',used+'%');$('ring').setAttribute('aria-label',used+' of 100 units projected usage')};$('form').onsubmit=e=>{e.preventDefault();const name=$('name').value.trim();if(name.length<3){$('error').textContent='Use at least three characters for the reservation name.';$('error').hidden=false;$('name').setAttribute('aria-invalid','true');$('name').focus();return}$('error').hidden=true;$('name').removeAttribute('aria-invalid');$('snapshot').textContent=name+' · '+$('pool').value+' · '+$('units').value+' units. Prepared in this local demonstration.';$('result').hidden=false};
</script></html>
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.
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.
Bewusst zum HPE-Branding-Theme wechseln
Verwenden Sie das separate Paket nur, wenn dies dem beabsichtigten Designziel entspricht; prüfen Sie die Werte anhand der installierten Version erneut.
jsx
// npm install grommet-theme-hpe
import { Grommet } from 'grommet';
import { hpe } from 'grommet-theme-hpe';
// Wrap the Planner from the full setup example:
<Grommet theme={hpe} themeMode="light" full="min"><Planner /></Grommet>
poolId/setPoolId mit useState in der aufrufenden Komponente deklarieren.
Wenn reduce aktiviert ist, wird die ID statt des Objekts gespeichert.
04
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.
Implementieren Sie den bereitgestellten Reservierungsplaner mit dem Basis-Theme von Grommet, einem kontrollierten Form, benannten FormFields, Select, RangeInput und einem Meter mit explizitem max. Halten Sie die Werte des Basis-Themes von grommet-theme-hpe getrennt. Wandeln Sie den Sliderwert in eine Zahl um, zeigen Sie Einheiten an, validieren Sie den Namen und erstellen Sie ausschließlich eine lokale Plan-Momentaufnahme.
05
HPE Grommet Designsystem Quellen und Geltungsbereich
Unabhängige Implementierungsreferenz für das Basis-Theme von Grommet. Die Verwendung des HPE-Branding-Themes wird separat gezeigt. Die Kapazitätswerte sind fiktive lokale Daten, keine Infrastrukturmetriken oder Angaben zur Bereitstellung.
