# SAP Fiori Tasarım Sistemi ## SAP Fiori Tasarım Sistemi Arayüz Önizlemesi Bir satın alma talebini düzenleyin, miktarı doğrulayın, yoğunluğu değiştirin ve yerel bir özet hazırlayın. ## SAP Fiori Tasarım Sistemi Tasarım Referansı Morning Horizon (sap_horizon) kaynak parametreleri ve güncel UI5 Web Components belgeleri. Aşağıdaki Less @sap adları kaynak parametreleridir; tarayıcı stilleri, bunlara karşılık gelen --sap özel özelliklerini kullanır. Korunan boyutlar, önerilen geçersiz kılma noktaları değil, gözlemlerdir. ### Horizon renk rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | @sapBrandColor | #0070f2 | Birincil marka rolü. | | @sapBackgroundColor | #f5f6f7 | Sayfa arka planı. | | @sapBaseColor | #ffffff | Temel yüzey. | | @sapTextColor | #131e29 | Birincil metin. | | @sapNegativeColor | #aa0808 | Olumsuz durum. | | @sapCriticalColor | #e76500 | Kritik rol; metin için ayrı bir türetilmiş rol kullanılır. | | @sapPositiveColor | #256f3a | Olumlu durum. | | @sapInformationBackground | #e1f4ff | Bilgilendirme mesajı yüzeyi. | | @sapWarningBackground | #fff8d6 | Kritik mesaj yüzeyi. | ### Tipografi ve geometri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | @sapFontFamily | "72", "72full", Arial, Helvetica, sans-serif | Yayınlanmış yazı tipi yığını. | | @sapFontSize | 0.875rem | Temel boyut. | | @sapContent_LineHeight | 1.5 | İçerik satır yüksekliği çarpanı. | | @sapElement_Height | 2.25rem | Korunan normal boyut. | | @sapElement_Compact_Height | 1.625rem | Korunan kompakt boyut. | | @sapElement_LineHeight | 2.75rem | Korunan normal satır kutusu. | | @sapElement_Compact_LineHeight | 2rem | Korunan kompakt satır kutusu. | | @sapButton_BorderCornerRadius | 0.5rem | Düğme köşe parametresi. | | @sapContent_FocusWidth | 0.125rem | Odak genişliği. | | @sapContent_FocusColor | #0032a5 | Odak rengi. | ### Tema ve yoğunluk kurulumu | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | sap_horizon | Morning Horizon | Bileşenlerde yerleşik varsayılan tema. | | sap_horizon_dark | Evening Horizon | Ek tema için varlıklar gerekir. | | sap_horizon_hcb / sap_horizon_hcw | High contrast black / white | Desteklenen yüksek karşıtlıklı temalar ayrı temalardır. | | Assets.js | One import per component library used | Ek tema varlıklarını kaydedin. | | setTheme(name) | @ui5/webcomponents-base/dist/config/Theme.js | Temayı herkese açık API üzerinden değiştirin. | ### Select sözleşmesi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | ui5-select value | Matches option value or text | Bunu option bileşenlerinin selected işaretleriyle karıştırmayın. | | selectedOption | Read-only IOption | Seçili option nesnesini okuyun. | | change | event.detail.selectedOption | Kesinleşmiş seçim değişikliği. | | live-change | Navigation preview | Bunu kesinleşmiş bir iş kararı olarak değerlendirmeyin. | | accessible-name-ref | ID of visible labeling element | Görünür metni denetime bağlayın. | ### Girdi ve geri bildirim | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | value | String | Sayısal girdiyi açıkça dönüştürün. | | input | Each keystroke | Canlı tahmini toplamlar için kullanın. | | change | Enter or focusout | Her tuş vuruşundaki girdiden farklıdır. | | value-state | None / Negative / Critical / Information / Positive | Geçerli API içindeki durum adları. | | slot="valueStateMessage" | One root element | Belirli bir alan açıklaması. | ### Mesaj şeridi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | design | Information / Positive / Critical / Negative | Anlamsal uygulama mesajı. | | hide-close-button | Boolean attribute | Gerekli açıklamayı görünür tutun. | | default slot | Prefer text content | Şeridi karmaşık bir panele dönüştürmekten kaçının. | ## SAP Fiori Tasarım Sistemi Eksiksiz Kılavuzu 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ı. ## SAP Fiori Tasarım Sistemi tasarımı ile UI5 uygulamasının kapsamları farklıdır ### Somut bir başlangıç noktası > SAP Fiori, kurumsal bir kullanıcı deneyimini tanımlar. Bu referansta, uygulanabilir bir satın alma talebi örneği için UI5 Web Components seçilmiştir. Bu, söz konusu bileşenleri yüklemenin bir SAPUI5 uygulaması, Fiori elements yerleşim planı veya yetkilendirilmiş bir SAP iş işlemi oluşturduğu anlamına gelmez. Ana bileşen paketi Input, Select ve Button bileşenlerini sağlar. Daha üst düzey Fiori bileşenleri ayrı bir pakette bulunur. Bu örnekte yalnızca kullanılan modüllerin içe aktarılması, başlangıç noktasını açıkça belirtir ve desteklenmeyen bir tüm bileşenler CDN'i izlenimi vermekten kaçınır. Destekleyici belirtimi okuyun ## SAP Fiori Tasarım Sistemi Genel bir mavi palet yerine adlandırılmış Horizon parametrelerini kullanın ### Yüzey ve durum rolleri Morning Horizon, sayfayı açık gri bir yüzeye yerleştirir ve temel yüzey olarak beyazı kullanır. Marka mavisi ile metin rengi ayrı parametrelerdir. Olumsuz, kritik, olumlu ve bilgilendirici roller; kartlar arasında sırayla kullanılacak dekoratif renkleri değil, anlamları belirtir. Önizlemede, yerel hazırlık satın alma onayı anlamına gelmediğinden hazırlanmış özet için bir bilgilendirme şeridi kullanılır. Ürün fiyatı, masraf yerleri ve onay açıklamaları özgün örnek verilerdir. Bunlar hiçbir zaman SAP tarafından sağlanan iş kuralları olarak yorumlanmamalıdır. Destekleyici belirtimi okuyun ## SAP Fiori Tasarım Sistemi Compact, ekran görüntüsünün küçültülmesi değil, bileşen ayarıdır ### Yoğunluğu anlamlı bir alana uygulayın UI5; root, body, bir alan veya bir bileşen üzerinde compact işaretleyicisinin kullanılmasını destekler. data-ui5-compact-size özniteliği ve ui5-content-density-compact sınıfı, herkese açık mekanizmalardır. İşaretleyiciyi dinamik olarak değiştirmek için ayrı bir yoğunluk API gerekmez. Etkileşim uygun kaldığı sürece, yoğun masaüstü görevlerinde kompakt denetimler kullanın. Gömülü yorum, denetimler ve satırlar arasındaki boşluğu azaltır ancak aynı bilgileri korur. Dar yerleşim, her etiketi ve düğmeyi küçültmek yerine alanları alt alta dizer. ```
``` Kod referansı Destekleyici belirtimi okuyun ## SAP Fiori Tasarım Sistemi 72 yazı tipi ailesi ve yükleme davranışı ### Yazı tipinin kullanılabilir olması kurulumun bir parçasıdır Horizon teması, geri dönüş yazı tiplerinden önce 72 ve 72full adlarını kullanır. UI5, varsayılan yazı tipi yüklemesinin nasıl devre dışı bırakılacağını ve yazı tiplerinin yerel olarak nasıl barındırılacağını açıklar. Kolaylık sağlayan FontFace.css girdisi deneysel olarak işaretlenmiştir; bu yolu seçerken yolunu sabitleyin ve yeniden kontrol edin. Bağımsız önizleme, açıkça belirtilmiş bir çevrimdışı geri dönüş seçeneği olarak Arial kullanır. Yerel UI5 örneği, yayınlanmış font-family değişkenini kullanır. Bu ayrım, görsel olarak benzer bir yedek yazı tipinin ekran görüntüsünün SAP yazı tipi varlıklarının yüklendiğinin kanıtı olduğu iddiasından kaçınır. Destekleyici belirtimi okuyun ## SAP Fiori Tasarım Sistemi Select bileşeninde onaylanmış ve geçici değişiklikler bulunur ### Denetimli tek bir seçim stratejisi belirleyin Select değeri, bir Option değerine veya metnine karşılık gelir. Select value ile Option bileşenlerindeki selected işaretlerinin birlikte kullanılması önerilmez; mevcut olmayan bir değer hiçbir seçeneği seçili hâle getirmez. Örnek, gerçek bir masraf yeri seçeneğini başlangıçta seçer ve sonucu hazırlarken Select değerini okur. change olayı, seçili seçeneği içerir. live-change olayı, seçenekler arasında gezinirken ve Escape ile geri dönerken de tetiklenir. İş verileri için kesinleşmiş seçimi kullanın; geçici değişiklikleri ise önizlemelerle sınırlı tutun. - Etiketleri oluşturmadan önce Select ve Option kayıtlarını içe aktarın. - Görünür masraf yeri etiketini accessible-name-ref aracılığıyla bağlayın. - Bu örnekte tek seçim stratejisi olarak value değerini kullanın. Destekleyici belirtimi okuyun ## SAP Fiori Tasarım Sistemi Sayısal girdi için yine de uygulama doğrulaması gerekir ### Durum değeri ile mesaj birlikte kullanılmalıdır Input değerinin türü Number olsa bile değeri bir dizedir. Örnek fiyatla çarpmadan önce değeri dönüştürün ve sonlu, tam sayı sınırları içinde olduğunu kontrol edin. Boş değer sıfır olarak kabul edilmemelidir. Geçerli anlamsal hata durumu, uydurma bir Error enum değeri değil Negative'dır. valueStateMessage yuvası, belirli bir açıklama içeren tek bir kök öğe sağlar. Canlı toplam input olayını dinler; hazırlanmış özet ise yalnızca kullanıcı eylemi başlattığında güncellenir. 1. Başlığı ve sayısal dizeyi bileşenlerinden okuyun. 2. Bu örnek için başlık girilmesini ve 1 ile 20 arasında tam sayı miktar belirtilmesini zorunlu tutun. 3. Etkilenen denetimleri Negative olarak işaretleyin ve girilen değerlerini koruyun. 4. Özeti yalnızca her iki koşul da sağlandıktan sonra hazırlayın. Destekleyici belirtimi okuyun ## SAP Fiori Tasarım Sistemi Sonucu açıklayıcı ve yerel tutun ### Kısa bir sonuç için şerit kullanın MessageStrip, anlamsal tasarımları ve kapatma denetimini destekler. Zorunlu bir açıklama varsa kapatma düğmesi gizlenerek mesajın görünür kalması sağlanabilir. Varsayılan yuvasında form ya da gösterge paneli yerine metin kullanılması tercih edilir. Özet; başlık, miktar, örnek toplam ve masraf yerini içerir. Son cümle, hiçbir şeyin gönderilmediğini açıklar. Gerçek bir hizmette bu yerel adımın yerini yetkilendirilmiş bir istek ve gerçek arka uç durumunu bildiren bir yanıt alır. Destekleyici belirtimi okuyun ## SAP Fiori tasarım sistemi tema varlıkları ve modül kaydı ### Tema seçimi, temaya karşılık gelen kaynakları gerektirir Belgelenmiş varsayılan tema Morning Horizon'dır ve bileşenlerde yerleşik olarak bulunur. Ek temalar için kullanılan her kitaplığa ait Assets.js modülü gerekir. Ardından setTheme ile Evening Horizon veya yüksek kontrastlı varyantlardan biri seçilebilir. Yüklenmiş kaynakları kontrol etmeden koyu temalı bir ad seçmek, entegrasyonu tamamlamaz. Sağlanan giriş noktası, işaretlemeyi oluşturmadan önce her özel öğeyi kaydeder. Vite, dinamik ES importlarını ve JSON kaynaklarını işler. Çevrimdışı HTML örneğinden bağımsız olarak yerel projeyi derleyin; yazı tiplerini, tema yüklemesini ve klavye davranışını doğrulayın. Destekleyici belirtimi okuyun ## SAP Fiori tasarım sistemi bileşen örnekleri ### Tamamlanmış, bağımsız ve etkileşimli örnek Belgenin tamamını index.html olarak kaydedip tarayıcıda açın. Bu, Morning Horizon parametrelerinin ve UI5 form bileşiminin çevrimdışı HTML yorumudur. Yerel paket örneği ayrıca verilmiştir. ``` Fiori purchase request
PProcurement workspaceSample environment

Purchase request

PR-DRAFT · Workplace equipment

Draft · not submitted

Request details

Whole number from 1 to 20.

27-inch studio monitorEquipment · Item 100240
€320 / unit
Estimated line total€640
Complete the draft before preparing the summary.

HTML interpretation of SAP Morning Horizon · UI5 native integration provided in guide · No SAP transaction created

``` Kod referansı - Bu HTML belgesindeki yoğunluk anahtarı bir yorumlamadır. UI5 giriş noktası, gerçek kompakt işaretçiyi, kaydedilmiş özel öğeleri ve Horizon varlıklarını gösterir. ### Miktar doğrulamalı Horizon satın alma talebi Input, Select/Option, Button ve MessageStrip birlikte yerel bir talep özeti oluşturur. Her tuş vuruşunda güncellenen toplamlar, hazırlanan sonuçtan ayrı tutulur. ``` // main.js in a Vite vanilla project. index.html contains
. import '@ui5/webcomponents/dist/Button.js'; import '@ui5/webcomponents/dist/Input.js'; import '@ui5/webcomponents/dist/Select.js'; import '@ui5/webcomponents/dist/Option.js'; import '@ui5/webcomponents/dist/MessageStrip.js'; import '@ui5/webcomponents/dist/Assets.js'; import {setTheme} from '@ui5/webcomponents-base/dist/config/Theme.js'; setTheme('sap_horizon'); document.querySelector('#app').innerHTML = `

Purchase request

Prepare a local requisition summary. No SAP transaction is created.

Request title

Enter a title for this request.

Cost center

Design · CC-240 Research · CC-360

Monitor quantity

Use a whole number from 1 to 20.

Estimated line total: €640

Prepare summary Toggle compact controls Complete the draft before preparing the summary.
`; const title=document.querySelector('#title'),qty=document.querySelector('#qty'); qty.addEventListener('input',()=>{ const n=Number(qty.value); document.querySelector('#total').textContent=Number.isInteger(n)&&n>=1&&n<=20 ? `Estimated line total: €${n*320}` : 'Enter a valid quantity to calculate the total.'; }); document.querySelector('#prepare').addEventListener('click',()=>{ const n=Number(qty.value), validTitle=!!title.value.trim(), validQty=Number.isInteger(n)&&n>=1&&n<=20; title.valueState=validTitle?'None':'Negative';qty.valueState=validQty?'None':'Negative'; const notice=document.querySelector('#notice'); if(!validTitle||!validQty){notice.design='Negative';notice.textContent='Correct the request title or quantity before continuing.';return;} notice.design='Information'; notice.textContent=`Local summary: ${title.value.trim()}, ${n} monitors, €${n*320}, ${document.querySelector('#team').value}. Nothing submitted.`; }); document.querySelector('#density').addEventListener('click',()=>document.body.toggleAttribute('data-ui5-compact-size')); ``` Kod referansı - Miktar kuralı, €320 ürün fiyatı ve masraf yerleri örnek uygulama verileridir; SAP politikası değildir. - UI5 Web Components, Fiori kalıplarının bir uygulamasıdır; bu, eksiksiz bir SAPUI5 uygulaması veya Fiori elements yerleşim planı değildir. - SAP işlem kaydı oluşturulmaz. Çevrimdışı önizleme doğrulaması, yerel bağımlılıkların derlendiği anlamına gelmez. ## SAP Fiori tasarım sistemi aracı kurulumu ### Uygulamaya Başlangıç Noktası Vite main.js dosyasını örneğin tamamıyla değiştirin. UI5 belgeleri bir ES modül paketleyicisi kullanılmasını öngörür; tüm bileşenleri kapsayan resmî bir CDN sunmaz. ``` npm create vite@latest fiori-request -- --template vanilla cd fiori-request npm install npm install @ui5/webcomponents @ui5/webcomponents-base npm run dev ``` ### Projeniz İçin Bir İstem ``` Horizon temasıyla UI5 Web Components Input, Select, Button ve MessageStrip kullanarak bir Fiori satın alma talebi oluşturun. Sayısal doğrulamayı, doğru Negative değer durumunu, açık kompakt yoğunluğu ve yerel özetin gerçeğe uygun davranışını koruyun. ``` ## SAP Fiori tasarım sistemi kaynakları ve kapsamı Bağımsız OpenDesign başvurusu. UI5 Web Components örneğidir; dağıtılmış bir SAP işlemi veya eksiksiz bir Fiori elements uygulaması değildir. - İlk adımlar Resmî paket ve paketleyici kurulumu. - Horizon kaynağı Tema parametrelerinin anlık görüntüsü. - Yapılandırma Tema adları ve varlık yükleme. - Yoğunluk Kompakt işaretçiler ve RTL. - Yazı tipleri 72 yükleme ve yerel yazı tipi yönergeleri. - Input Değer durumları ve giriş olayları. - Select Seçim stratejileri ve olaylar. - MessageStrip Anlamsal mesajın yapısı. - Düğme kaynağı Yerel düğme uygulaması. ## SAP Fiori tasarım sistemi ile ilgili kaynaklar ### SEEK Braid Temaya özel değişkenler, dört gerçek kesme noktası, bağlama uygun metin, farklı düğme tonları ve eylemi devre dışı bırakmak yerine doğrulamayı açıklayan denetimli bir alan içeren özgün bir iş arama düzeniyle Braid’i anlayın. ### Segment Evergreen Gerçek tema değerleri, denetimli etiket girişi, kurallarla canlı eşleşme, boş durumdan kurtarma akışı ve yerel inceleme iletişim kutusu içeren bir Evergreen örneği. ### Semi Design Semi’nin önerdiği temel Steps bileşenleri, denetimli Input ve Switch bileşenleri, gerçek tema belirteçleri ve açık bir React 18 veya React 19 paket seçeneğiyle ardışık bir çalışma alanı kurulumu oluşturun. - [Uygulama başvurusu](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Kaynak](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Kaynak](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Kaynak](https://ui5.github.io/webcomponents/components/Select/) - [Kaynak](https://ui5.github.io/webcomponents/components/Input/) - [Kaynak](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Destekleyici belirtimi okuyun](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Kod referansı](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Destekleyici belirtimi okuyun](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Destekleyici belirtimi okuyun](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Destekleyici belirtimi okuyun](https://ui5.github.io/webcomponents/components/Select/) - [Destekleyici belirtimi okuyun](https://ui5.github.io/webcomponents/components/Input/) - [Destekleyici belirtimi okuyun](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Destekleyici belirtimi okuyun](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Kod referansı](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Kod referansı](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [İlk adımlar Resmî paket ve paketleyici kurulumu.](https://ui5.github.io/webcomponents/docs/getting-started/first-steps/) - [Horizon kaynağı Tema parametrelerinin anlık görüntüsü.](https://raw.githubusercontent.com/SAP/theming-base-content/master/content/Base/baseLib/sap_horizon/base.less) - [Yapılandırma Tema adları ve varlık yükleme.](https://ui5.github.io/webcomponents/docs/advanced/configuration/) - [Yoğunluk Kompakt işaretçiler ve RTL.](https://ui5.github.io/webcomponents/docs/advanced/RTL-and-compact-mode/) - [Yazı tipleri 72 yükleme ve yerel yazı tipi yönergeleri.](https://ui5.github.io/webcomponents/docs/advanced/fonts/) - [Input Değer durumları ve giriş olayları.](https://ui5.github.io/webcomponents/components/Input/) - [Select Seçim stratejileri ve olaylar.](https://ui5.github.io/webcomponents/components/Select/) - [MessageStrip Anlamsal mesajın yapısı.](https://ui5.github.io/webcomponents/components/MessageStrip/) - [Düğme kaynağı Yerel düğme uygulaması.](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/packages/main/src/Button.ts)