Modella una prenotazione di capacità con le primitive di layout, i campi modulo controllati e gli indicatori numerici di Grommet. Usa con criterio la scala del tema e mantieni distinto il tema base di Grommet dal tema HPE installato separatamente.
Interpretazione indipendente di HTML/CSS delle dimensioni e dei colori di base di Grommet, con il font Arial scelto esplicitamente; non è il tema HPE separato. · Riferimento per l’implementazione
02
HPE Grommet Riferimento di progettazione del sistema di design
Tema base di Grommet v2 generato con baseSpacing=24 e scale=6; questi non sono valori di grommet-theme-hpe. Lo starter nativo imposta esplicitamente Arial e i colori dimostrativi del brand e del focus come scelte del tema dell’applicazione.
Sistema di design HPE Grommet: Grommet di base e tema HPE
Non presentare il viola come token HPE
Grommet è un framework React associato a HPE, con un proprio tema base. Il pacchetto separato grommet-theme-hpe esporta hpe per le applicazioni che adottano lo stile di design HPE. Questo riferimento illustra il framework di base e un esempio configurato in modo esplicito. Il viola del brand e il colore menta del focus provengono dal tema base; non vengono presentati come la palette attuale del brand HPE.
La configurazione imposta Arial come scelta tipografica dell’applicazione e riprende i colori documentati per il brand e il focus del tema base. Tutte le altre regole dei componenti ereditano da Grommet. Un prodotto HPE reale può invece passare il tema hpe approvato; in tal caso, verifica la spaziatura e la tipografia risultanti, perché le sostituzioni del tema possono modificare i valori base elencati qui.
Sistema di design HPE Grommet: le scale del tema possono cambiare a un breakpoint
I valori nominali sono decisioni adattive
Il generatore di base parte da 24 pixel. La spaziatura medium predefinita dei bordi è 24px, ma al breakpoint small medium passa a 12px. Un Box con padding adattivo può quindi restringersi anche se nel JSX è ancora indicato medium. Esamina insieme la scala e la modifica al breakpoint; non garantire che medium corrisponda sempre a ventiquattro pixel.
Il pianificatore usa un Box a colonna come pagina e un Box a riga/colonna adattivo per il modulo e il riepilogo della capacità. Il modulo figlio può espandersi, mentre il riepilogo mantiene una larghezza minima adeguata. Sugli schermi piccoli, il grafico segue i controlli, rispettando l’ordine del documento.
Sistema di design HPE Grommet: una base leggibile definita con cura
La dimensione del font e l’interlinea sono valori distinti del tema
Il generatore di base ricava un font di diciotto pixel e un’interlinea di ventiquattro pixel dal proprio valore di spaziatura. L’esempio usa esplicitamente questa coppia con Arial, per non suggerire che sia stato scaricato un font proprietario del brand. Le intestazioni usano Grommet Heading e il testo usa Text, così il tema può risolverne i ruoli senza riprodurre gli elementi interni dei componenti in CSS.
Sistema di design HPE Grommet: un unico oggetto controllato per la prenotazione
I nomi collegano i campi al modulo
Form gestisce il contratto coordinato del modulo. Nel modello controllato, value e onChange appartengono al chiamante. Il name di ogni FormField e del relativo input figlio identifica la chiave corrispondente nel valore. Il nostro oggetto di prenotazione contiene name e pool. Lo slider della capacità è mantenuto come numero separato perché aggiorna un diagramma in tempo reale prima dell’invio.
Sistema di design HPE Grommet Select del sistema di progettazione ha una propria struttura degli eventi
Le stringhe rendono prevedibile il caso più semplice
Le opzioni dei pool di esempio sono Production e Development. Il valore controllato è quindi una stringa. Se passi a opzioni oggetto, imposta labelKey e, facoltativamente, valueKey con reduce, quindi mantieni il valore memorizzato coerente con questa scelta. onChange di Select espone un oggetto valore/opzione, a differenza dell’evento dell’input range nativo.
Ricerca e caricamento delle opzioni sono responsabilità dell’applicazione
Select può mostrare un campo di ricerca quando viene fornita la proprietà onSearch. Questa proprietà non implica che tutte le opzioni vengano filtrate automaticamente. Mantieni separata la raccolta di origine non filtrata, così da poterla ripristinare quando la ricerca viene chiusa o cancellata. Per i due pool, l’esempio omette intenzionalmente la ricerca.
Sistema di design HPE Grommet Un indicatore del sistema di progettazione richiede unità e un denominatore
Rappresenta la capacità, non una percentuale senza spiegazione
Meter riceve la quantità utilizzata prevista e max=100. In questo pianificatore illustrativo, il pool di esempio ha già 35 unità utilizzate e la prenotazione proposta varia da 5 a 60. La percentuale coincide per caso con il numero, perché il denominatore della dimostrazione è cento. Il codice passa comunque max in modo esplicito, così il contratto dei dati resta valido anche con un totale diverso.
Il cerchio, l’etichetta dell’utilizzo previsto e le unità rimanenti derivano dallo stesso valore numerico del cursore. RangeInput nativo genera un evento DOM, quindi converti event.target.value in Number prima di eseguire calcoli. Altrimenti, sommare una stringa a trentacinque può produrre un totale visivamente plausibile ma errato.
Sistema di design HPE Grommet Scorrimento del documento e composizione per schermi stretti nel sistema di progettazione
Scegli full="min" per questa pagina
Grommet full=true è pensato per un’applicazione che gestisce la propria viewport e lo scorrimento interno. Questo pianificatore usa full="min" per consentire al documento di estendersi. In questo modo, su un telefono il modulo e il relativo messaggio di convalida non restano intrappolati in un contenitore ad altezza fissa.
Un componente figlio usa il contesto corrente e sceglie column sugli schermi piccoli e row negli altri casi. Il provider deve racchiudere il componente figlio, affinché il contesto rifletta il tema scelto. Quando lo spazio disponibile è ridotto, il layout predefinito resta una colonna naturale.
Mantieni le etichette dei campi sopra i relativi input.
Inserisci il riepilogo della capacità dopo i controlli nell’ordine del sorgente.
Consenti alla riga delle azioni di andare a capo senza nascondere il testo di convalida.
Sistema di design HPE Grommet Collega etichette, errori e misurazioni nel sistema di progettazione
Attribuisci un significato a ogni valore numerico
Il controllo dell’intervallo ha un’etichetta persistente e un’unità visibile. Il cerchio riceve un a11yTitle che include l’utilizzo previsto e la capacità totale. Il testo vicino espone gli stessi numeri, così l’informazione non dipende da un arco colorato. Il testo dell’errore descrive il problema della prenotazione e rimane accanto al relativo campo.
Sistema di design HPE Grommet Crea una composizione Grommet completa
Installa il framework e la libreria peer per gli stili
Installa grommet con styled-components e il runtime React in un progetto client. La configurazione monta Grommet, poi un componente figlio che usa ResponsiveContext, un Form controllato, FormField/TextInput/Select, RangeInput e Meter. Usa la proprietà label di Button anziché i children, così il comportamento predefinito del pulsante con stile di etichetta rimane esplicito.
Sistema di design HPE Grommet Esempi di componenti del sistema di progettazione
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione indipendente di HTML/CSS delle dimensioni e dei colori di Grommet base, con font Arial scelto esplicitamente; non è il tema HPE separato.
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>
I calcoli della capacità usano il pool di esempio visualizzato. Il layout autonomo è indipendente HTML; l’esempio nativo seleziona Grommet base anziché il tema HPE separato.
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.
main.jsx client per un progetto con un elemento root. Grommet base con override del font e del brand dell’applicazione dichiarati esplicitamente. Non si presume implicitamente l’uso del tema HPE. API verificato rispetto alla documentazione ufficiale; la compilazione nativa non è stata verificata qui.
Passa intenzionalmente al tema brandizzato HPE
Usa il pacchetto separato solo se è questo il design target desiderato; verifica nuovamente i valori rispetto alla versione installata.
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>
Dichiara poolId/setPoolId con useState nel componente chiamante.
Con reduce abilitato, il valore memorizzato è l’ID, non l’oggetto.
04
Sistema di design HPE Grommet Configurazione dell’agente IA per il sistema di progettazione
Punto di partenza per l’implementazione
main.jsx client per un progetto con un elemento root. Grommet base con override del font e del brand dell’applicazione dichiarati esplicitamente. Non si presume implicitamente l’uso del tema HPE. API verificato rispetto alla documentazione ufficiale; la compilazione nativa non è stata verificata qui.
Implementa il pianificatore di prenotazioni fornito basato su Grommet base, con un Form controllato, FormField con nome, Select, RangeInput e Meter con max esplicito. Mantieni distinti i valori del tema base da quelli di grommet-theme-hpe. Converti il valore del cursore in un numero, mostra le unità, convalida il nome e genera solo un’istantanea locale del piano.
05
Sistema di design HPE Grommet Fonti e ambito del sistema di progettazione
Riferimento indipendente per un’implementazione basata su Grommet base. L’adozione del tema brandizzato HPE è illustrata separatamente. I valori della capacità sono dati locali fittizi, non metriche infrastrutturali né valori di provisioning.
