HPE Grommet Tasarım Sistemi.

Ad / Kural	Değer / Yapılandırma	Kullanım
`global.edgeSize.hair`	`1px`	Küçük ekranlar için duyarlı geçersiz kılma dışında kullanılan varsayılan boyut.
`global.edgeSize.xxsmall`	`3px`	Küçük ekranlar için duyarlı geçersiz kılma dışında kullanılan varsayılan boyut.
`global.edgeSize.xsmall`	`6px`	Küçük ekranlar için duyarlı geçersiz kılma dışında kullanılan varsayılan boyut.
`global.edgeSize.small`	`12px`	Küçük ekranlar için duyarlı geçersiz kılma dışında kullanılan varsayılan boyut.
`global.edgeSize.medium`	`24px`	Küçük ekranlar için duyarlı geçersiz kılma dışında kullanılan varsayılan boyut.
`global.edgeSize.large`	`48px`	Küçük ekranlar için duyarlı geçersiz kılma dışında kullanılan varsayılan boyut.
`global.edgeSize.xlarge`	`96px`	Küçük ekranlar için duyarlı geçersiz kılma dışında kullanılan varsayılan boyut.

Küçük ekranlara yönelik duyarlı geçersiz kılmalar

Ad / Kural	Değer / Yapılandırma	Kullanım
`global.breakpoints.small.value`	`768`	Temel temadaki küçük ekran kesme noktası sınırı.
`small.edgeSize.xxsmall`	`2px`	Küçük ekranlar için ince aralık.
`small.edgeSize.xsmall`	`3px`	Küçük ekranlar için xsmall aralığı.
`small.edgeSize.small`	`6px`	Duyarlı küçük dolgu.
`small.edgeSize.medium`	`12px`	Duyarlı orta dolgu.
`small.edgeSize.large`	`24px`	Duyarlı geniş dolgu.
`global.breakpoints.medium.value`	`1536`	Bir sonraki temel kesme noktası sınırı.

Temel renkler ve denetimler

Ad / Kural	Değer / Yapılandırma	Kullanım
`global.colors.brand`	`#7D4CDB`	HPE yeşili değil, varsayılan Grommet marka rengi.
`global.colors.focus`	`#6FFFB0`	Varsayılan odak vurgusu.
`global.colors.text.light`	`#444444`	Açık temada gövde metni.
`global.colors.text.dark`	`#f8f8f8`	Koyu temada gövde metni.
`global.colors.background-front.light`	`#FFFFFF`	Ön açık yüzey.
`global.colors.background-front.dark`	`#444444`	Ön koyu yüzey.
`global.control.border.radius`	`4px`	Temel denetim köşesi.
`global.control.border.width`	`1px`	Temel denetim kenarlığı.

Form ve alan sözleşmesi

Ad / Kural	Değer / Yapılandırma	Kullanım
`Form.value`	`Object keyed by field name`	Tek bir denetlenen rezervasyon nesnesi kullanın.
`Form.onChange`	`(value) => {}`	DOM olayı değil, güncellenmiş nesne alınır.
`Form.onSubmit`	`({ value, touched }) => {}`	Kabul edilen geçerli form değerini okuyun.
`Form.validate`	`blur \| submit \| change`	Doğrulamanın ne zaman çalışacağını seçin.
`Form.errors`	`Object keyed like value`	Uzak sistem veya uygulama hatalarını alanlara ekleyin.

Select ve aralık entegrasyonu

Ad / Kural	Değer / Yapılandırma	Kullanım
`Select.options`	`String array or object array`	Değer biçimini basit tutmak için örnekte dizeler kullanılır.
`Select.onChange`	`({ value, option }) => {}`	Select için event.target.value değerini okumayın.
`Select.valueKey`	`{ key, reduce } for object options`	reduce, nesnenin tamamı yerine anahtara karşılık gelen değeri döndürür.
`Select.labelKey`	`Property name or function`	Nesne seçenekleri için görünür etiket.
`Select.onSearch`	`Function; enables search input`	Gerektiğinde uygulama tarafında filtreleme sağlayın.

Meter bileşen yapısı

Ad / Kural	Değer / Yapılandırma	Kullanım
`value`	`number`	Gösterilen miktar; values sağlanırsa yok sayılır.
`max`	`number or numeric string`	Toplam kullanılabilir kapasite; bunu yüzdeyle karıştırmayın.
`type`	`bar \| circle \| pie \| semicircle`	Kullanım genel görünümü için circle kullanın.
`color`	`Color identifier`	Tek bir değerle geçerlidir.
`a11yTitle`	`string`	Ölçüyü ve paydayı açıklayın.
`size`	`Named size or CSS dimension`	Halkayı kullanılabilir genişliğin içinde tutun.

HPE Grommet Tasarım Sistemi Eksiksiz Rehber

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

DESIGN-hpe-grommet.md

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

Kılavuzu İndir

HPE Grommet Tasarım Sistemi Temel Grommet ve HPE Teması

Mor rengi HPE tasarım belirteci olarak etiketlemeyin

Grommet, HPE ile ilişkili, kendine ait temel teması bulunan bir React çerçevesidir. Ayrı grommet-theme-hpe paketi, HPE tasarım stilini benimseyen uygulamalar için hpe temasını dışa aktarır. Bu referans, temel çerçeveyi ve açıkça yapılandırılmış örneği ele alır. Mor marka rengi ve nane yeşili odak rengi temel temadan gelir; mevcut HPE markalı renk paleti olarak sunulmaz.
Bu OpenDesign kılavuzundan

Küçük ve açıkça tanımlanmış bir uygulama teması

Kurulumda uygulama tercihi olarak Arial kullanılır ve belgelenmiş temel marka ile odak renkleri yeniden belirtilir. Diğer tüm bileşen kuralları Grommet’ten devralınır. Gerçek bir HPE ürünü bunun yerine onaylı hpe temasını aktarabilir; ardından tema geçersiz kılmaları burada listelenen temel değerleri değiştirebileceğinden oluşan aralık ve tipografi doğrulanmalıdır.

HPE Grommet Tasarım Sistemi Tema ölçekleri bir kesme noktasında değişebilir

Adlandırılmış değerler duyarlı tasarım kararlarıdır

Temel oluşturucu 24 pikselden başlar. Varsayılan orta kenar aralığı 24px’tir, ancak küçük ekran kesme noktası bu değeri 12px’e düşürür. Duyarlı dolgu kullanan bir Box, JSX’te hâlâ medium yazsa bile küçülebilir. Ölçeği ve kesme noktası geçersiz kılmasını birlikte değerlendirin; medium değerinin her zaman yirmi dört piksel olduğunu vaat etmeyin.

Gerçek düzen için Box kullanın

Planlayıcı, sayfa olarak sütun düzenli bir Box; form ve kapasite özeti içinse duyarlı satır/sütun düzenli bir Box kullanır. Özet kullanışlı bir minimum genişliği korurken alt form genişleyebilir. Küçük ekranlarda grafik denetimlerin ardından gelir ve belge sırasını izler.

HPE Grommet Tasarım Sistemi Bilinçli olarak belirlenmiş, okunabilir bir temel

Yazı tipi boyutu ve satır yüksekliği ayrı tema değerleridir

Temel oluşturucu, aralık girdisinden 18 piksellik bir yazı tipi ve 24 piksellik bir satır yüksekliği türetir. Örnek, indirildiği izlenimini vermemek için bu ikiliyi Arial ile açıkça kullanır. Başlıklarda Grommet Heading, metinlerde ise Text kullanılır; böylece CSS içinde bileşenlerin iç yapısını yeniden oluşturmadan temanın bu rolleri belirlemesi sağlanır.

HPE Grommet Tasarım Sistemi Tek bir denetlenen rezervasyon nesnesi

Adlar alanları forma bağlar

Form, koordineli form sözleşmesinin sahibidir. Denetlenen örüntüde value ve onChange çağırana aittir. Her FormField ve alt girdi üzerindeki name, ilgili değer anahtarını belirtir. Rezervasyon nesnemiz name ve pool alanlarını içerir. Kapasite kaydırıcısı ayrı bir sayı olarak tutulur; çünkü gönderimden önce canlı diyagramı günceller.

Rezervasyon adını doğrulayın

HPE Grommet Tasarım Sistemi Select bileşeninin kendine özgü olay biçimi vardır

Dizeler basit senaryoyu öngörülebilir kılar

Örnek havuz seçenekleri Production ve Development'dır. Bu nedenle denetlenen değer bir dizedir. Nesne seçeneklerine geçerseniz labelKey ve isteğe bağlı olarak reduce ile valueKey ayarlayın, ardından depolanan değeri bu seçimle tutarlı tutun. Select onChange, yerel aralık girdisi olayından farklı olarak bir value/option nesnesi sunar.

Arama ve seçenek yükleme uygulamanın sorumluluğundadır

Select, onSearch sağlandığında bir arama alanı gösterebilir. Bu prop, her seçeneğin otomatik olarak filtrelendiği anlamına gelmez. Arama kapatıldığında veya temizlendiğinde kaynak seçenekleri geri yükleyebilmek için filtrelenmemiş kaynak koleksiyonunu ayrı tutun. İki seçenek havuzu için örnek, aramayı bilerek içermez.

HPE Grommet Tasarım Sistemi Bir ölçüm için birimler ve payda gerekir

Açıklamasız bir yüzde yerine kapasiteyi temsil edin

Meter, kullanılan tahmini miktarı ve max=100 değerini alır. Bu örnek planlayıcıda havuzda hâlihazırda kullanılan 35 birim vardır ve önerilen rezervasyon 5 ile 60 birim arasında değişir. Demo paydası yüz olduğu için yüzde değeri sayıyla aynı çıkar. Farklı bir toplam kullanıldığında da veri sözleşmesi korunabilsin diye kod yine max değerini açıkça iletir.

Grafiği ve metni eşzamanlı tutun

Daire, tahmini kullanım etiketi ve kalan birimler aynı sayısal kaydırıcı değerinden türetilir. Yerel RangeInput bir DOM olayı üretir; bu nedenle hesaplamadan önce event.target.value değerini Number'a dönüştürün. Aksi hâlde bir dizeye otuz beş eklemek, görsel olarak makul ancak yanlış bir toplam üretebilir.

HPE Grommet Tasarım Sistemi Belge kaydırma ve dar ekran düzeni

Bu sayfa için full="min" seçin

Grommet full=true, kendi görüntü alanını ve iç kaydırmasını yöneten bir uygulama içindir. Bu planlayıcıda belge içeriğinin uzayabilmesi için full="min" kullanılır. Böylece form ve doğrulama mesajı, telefonda sabit yükseklikteki bir kabuğun altında sıkışıp kalmaz.

ResponsiveContext'i Grommet içinde okuyun

Bir alt bileşen mevcut bağlamı kullanır ve küçük ekranlarda column, diğer durumlarda row seçer. Bağlamın seçilen temayı yansıtması için sağlayıcı bu alt bileşeni sarmalamalıdır. Kullanılabilir genişlik dar olduğunda yedek düzen doğal bir sütun olarak kalır.

Alan etiketlerini girişlerinin üstünde tutun.
Kapasite özetini kaynak sıralamasında denetimlerin ardından yerleştirin.
Doğrulama metnini gizlemeden eylem satırının kaydırılarak alt satıra geçmesine izin verin.

HPE Grommet Tasarım Sistemi Etiketi, hatayı ve ölçümü ilişkilendirin

Her sayısal gösterimin ne anlama geldiğini belirtin

Aralık denetiminin kalıcı bir etiketi ve görünür birimi vardır. Daireye, tahmini kullanımı ve toplam kapasiteyi içeren bir a11yTitle verilir. Yakındaki metin de aynı sayıları gösterir; böylece bilgi renkli bir yaya bağlı kalmaz. Hata metni rezervasyon sorununu açıkça belirtir ve ilgili alanın yanında kalır.

Yerel sonucu açıkça belirtin

Zorunlu alan hatasını doğrulamak için boş bir ad gönderin.
Bir ad girin, havuz seçin ve tahsisi ayarlayın.
Planı hazırlayın ve yerel anlık görüntünün seçili havuzu ve sayısal birimleri içerdiğini doğrulayın.

HPE Grommet Tasarım Sistemi Eksiksiz bir Grommet düzeni oluşturun

Çerçeveyi ve stil eş bağımlılığını yükleyin

Bir istemci projesine grommet'i, styled-components'ı ve React çalışma zamanını yükleyin. Kurulum Grommet'i, ardından ResponsiveContext'i kullanan bir alt bileşeni, denetlenen bir Form'u, FormField/TextInput/Select bileşenlerini, RangeInput'ı ve Meter'ı görüntüler. Varsayılan etiket stilli düğme davranışını açıkça korumak için children yerine Button label kullanın.

HPE Grommet Tasarım Sistemi Bileşen Örnekleri

Tamamlanmış, bağımsız ve etkileşimli örnek

Belgenin tamamını index.html olarak kaydedin ve tarayıcıda açın. Temel Grommet boyutlarının ve renklerinin birbirinden bağımsız HTML/CSS yorumu; Arial yazı tipi açıkça seçilmiştir. Ayrı HPE temasını kullanmaz.

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>

Kapasite hesaplamalarında görüntülenen örnek havuz kullanılır. Bağımsız düzen HTML; yerel örnekte ayrı HPE teması yerine temel Grommet seçilmiştir.

Tam yerel uygulama girişi

Kurulumdan itibaren tam uygulama; odaklanmış API açıklamalarının yanında burada bir araya getirilmiştir. Kurulum bölümünde belgelenen paket ve derleme ön koşullarını izleyin.

jsx

// 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 <Box pad="medium" gap="medium" width={{max:'large'}} margin="auto">
 <Heading level={1} margin="none">Plan a reservation</Heading>
 <Text>Local capacity model. No infrastructure is provisioned.</Text>
 <Box direction={size==='small'?'column':'row'} gap="large">
 <Box flex><Form value={value} onChange={setValue} validate="submit" onSubmit={({value:accepted})=>setPlan({...accepted,units})}>
 <FormField name="name" htmlFor="reservation-name" label="Reservation name" required validate={name=>String(name || '').trim().length<3?'Use at least three characters':undefined}>
 <TextInput name="name" id="reservation-name"/></FormField>
 <FormField name="pool" htmlFor="pool" label="Capacity pool"><Select name="pool" id="pool" options={['Production','Development']}/></FormField>
 <Box gap="small" margin={{vertical:'medium'}}><label htmlFor="units">Requested allocation: {units} units</label>
 <RangeInput id="units" min={5} max={60} step={5} value={units} onChange={event=>setUnits(Number(event.target.value))}/></Box>
 <Button type="submit" primary label="Prepare plan"/>
 </Form></Box>
 <Box align="center" gap="small" pad="medium" background="light-2" round="small">
 <Meter type="circle" value={used} max={100} size="small" thickness="small" color="brand" a11yTitle={`${used} of 100 units projected usage`}/>
 <Text weight="bold">{used} / 100 units used</Text><Text>{100-used} units remaining</Text>
 </Box></Box>
 {plan&&<Box background="light-2" pad="medium" role="status"><Text>Local plan: {plan.name} · {plan.pool} · {plan.units} units</Text></Box>}
 </Box>
}
createRoot(document.getElementById('root')).render(<Grommet theme={theme} themeMode="light" full="min"><Planner/></Grommet>);

Kök öğesi bulunan bir proje için istemci main.jsx dosyası. Temel Grommet ve açıkça belirtilmiş bir uygulama yazı tipi/marka geçersiz kılması kullanılır. HPE temasının kullanıldığı varsayılmaz. API resmî belgelere göre kontrol edilmiştir; yerel derlemenin doğrulaması burada yapılmamıştır.

HPE markalı temaya bilerek geçin

Ayrı paketi yalnızca hedef tasarım buysa kullanın; değerleri yüklediğiniz sürümle yeniden kontrol edin.

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>

Yukarıdaki başvuru tablosu temel temayı açıklar; bu isteğe bağlı geçersiz kılmayı değil.

Nesne Select değerleri

Etiketi görüntülerken havuz kimliğini depolayın.

jsx

<Select options={[{id:'prod',label:'Production'},{id:'dev',label:'Development'}]}
 labelKey="label" valueKey={{key:'id',reduce:true}}
 value={poolId} onChange={({value})=>setPoolId(value)} />