# HPE Grommet Tasarım Sistemi ## HPE Grommet Tasarım Sistemi Arayüz Önizlemesi Önerilen tahsisi ayarlayın ve doğrulanmış yerel bir plan hazırlayın. ## HPE Grommet Tasarım Sistemi Tasarım Referansı baseSpacing=24 ve scale=6 ile oluşturulan Grommet v2 temel teması; bunlar grommet-theme-hpe değerleri değildir. Yerel başlangıç projesinde Arial ile örneklenen marka ve odak renkleri açıkça uygulama teması tercihleri olarak belirtilmiştir. ### Varsayılan kenar boyutu ölçeği | 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. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## 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. Destekleyici belirtimi okuyun ### 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ### 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ### Rezervasyon adını doğrulayın name="name" değerine sahip zorunlu bir FormField, TextInput id="reservation-name" bileşenini kapsar. htmlFor, görünür etiketi giriş alanına bağlar. Özel doğrulayıcı, kırpılmış değer üç karakterden kısaysa açık bir hata döndürür. validation değerini submit olarak ayarlayın; böylece henüz dokunulmamış boş form kullanıcıyı hatayla karşılamaz. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ### 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ### 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ### 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ### Yerel sonucu açıkça belirtin Planı hazırla, doğrulanmış formun ve mevcut tahsisin yerel bir anlık görüntüsünü kaydeder. Altyapı oluşturmaz. Sonuç yalnızca geçerli gönderimden sonra değişir; kaydırıcı değişiklikleri ise bir öneri olarak kalır. Bu ayrım, hazırlanmış bir planı düzenlenmekte olan taslakla karşılaştırırken işe yarar. 1. Zorunlu alan hatasını doğrulamak için boş bir ad gönderin. 2. Bir ad girin, havuz seçin ve tahsisi ayarlayın. 3. 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. Destekleyici belirtimi okuyun ## 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. Destekleyici belirtimi okuyun ## 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. ``` 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.

``` Kod referansı - 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. ``` // 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)} /> ``` Kod referansı - Çağıran bileşende useState ile poolId/setPoolId tanımlayın. - reduce etkinse depolanan değer nesne değil, kimliktir. ## HPE Grommet Tasarım Sistemi Agent Kurulumu ### Uygulamaya Başlangıç Noktası 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. ``` // 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}>