# Siemens iX Tasarım Sistemi ## Siemens iX Tasarım Sistemi Arayüz Önizlemesi Kurgusal olayları filtreleyin, bir ekipman notunu inceleyin ve özgün önem derecesi görünür kalırken kaydı yerel olarak incelendi şeklinde işaretleyin. ## Siemens iX Tasarım Sistemi Tasarım Referansı Güncel herkese açık iX belgeleri ve resmî main branch bileşeninin API anlık görüntüsü. Aşağıdaki renk girdileri, uydurma sabit hex değerleri değil, anlamsal rollerdir. Yüklü paket sürümleri birlikte sabitlenmelidir; çevrimdışı örnekte kendi paleti ve boyutları açıkça belirtilmiştir. ### Tema ve paket girişi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Core package | @siemens/ix | Web bileşenleri ve genel stil sayfası. | | React wrappers | @siemens/ix-react | React bileşen entegrasyonu. | | Icons | @siemens/ix-icons | Resmî simge bağımlılığı. | | data-ix-theme | classic | Belge düzeyinde tema seçicisi. | | data-ix-color-schema | dark \| light \| system | Tam öznitelik yazımı şemayı kullanır. | | Global CSS | @siemens/ix/dist/siemens-ix/siemens-ix.css | Uygulama girişinde bir kez içe aktarın. | ### Metin ve yüzey rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --theme-color-primary | Primary action role | Seçilen tema üzerinden çözümleyin. | | --theme-color-std-text | Default reading color | Olay başlıkları ve gövde metni. | | --theme-color-soft-text | Secondary reading color | Saatler ve varlık meta verileri. | | --theme-color-weak-text | Disabled reading color | Önemli ikincil bilgiler için kullanmayın. | | --theme-color-alarm-text | Alarm text role | Hata metni için bir ön plan rengi gerektiğinde kullanın. | | --theme-color-component-1 | Interactive component fill | Yarı saydamdır; görünümü alttaki yüzeyden etkilenir. | | color-0 | Transparent background role | Diğer arka plan düzeyleri opaktır. | ### Önem derecesi sözlüğü | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Alarm | Error, invalid or dangerous condition | Renkli işaretleyicinin yanında metin etiketini de bulundurun. | | Critical | Between alarm and warning | Dekoratif başka bir ton değil, ayrı bir anlamdır. | | Warning | Condition requiring attention | Alarm durumuna sessizce yükseltmeyin. | | Success | Positive outcome | İnceleme eylemi alarmın başarıyla giderildiği anlamına gelmeyebilir. | | Info | Informational condition | Devre dışı içerikten ayrı tutun. | | Neutral | Unclassified neutral condition | Herhangi bir durum değerlendirmesi geçerli olmadığında kullanın. | ### Sınır hiyerarşisi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --theme-color-hard-bdr | Strong solid boundary | Belirgin ayrım. | | --theme-color-std-bdr | Standard control boundary | Girdi veya seçim denetimi. | | --theme-color-soft-bdr | Card boundary | Not defteri inceleyicisinde kullanılır. | | --theme-color-weak-bdr | Region boundary | Ana bölgeleri hafifçe birbirinden ayırın. | | --theme-color-x-weak-bdr | Very subtle boundary | Düşük vurgulu ayırıcı. | | --theme-primary-bdr-1 | Complete border value | Renk olarak değil, border: var(--theme-primary-bdr-1) biçiminde kullanın. | ### Tipografi rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | Headings | H1 through H6 | Belge hiyerarşisi. | | Body | Multiline reading | İnceleme notları ve açıklamalar. | | Label | Single-line component text | Kısa denetimler ve alanlar. | | Display | Single-line KPI presentation | Sayımlar; paragraf metni değil. | | Code | Code and technical syntax | Uygun olduğunda API örnekleri veya tanımlayıcıları. | ### Event List API anlık görüntüsü | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | IxEventList.itemHeight | S \| L \| number; default S | Örnek başlık ve meta veriler için L kullanın. | | IxEventList.compact | boolean; default false | Kompakt kip açıkça seçilmiştir. | | IxEventList.chevron | boolean; default false | Gezinme göstergesini gösterin. | | IxEventList.animated | boolean; default false | Sabit bir günlükte gereksiz hareketten kaçının. | | IxEventListItem.itemColor | string | Temanın CSS renk ifadesi. | | IxEventListItem.selected | boolean; default false | Seçilen kayıt kimliğiyle denetlenir. | | IxEventListItem.variant | outline \| filled; default outline | Sunum tercihi. | | IxEventListItem.disabled | boolean; default false | Yalnızca etkileşim kullanılamadığında devre dışı bırakın. | | itemClick | Custom event | React sarmalayıcısının onItemClick işleyicisi kaydı seçer. | ## Siemens iX 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ı. ## Siemens iX Tasarım Sistemi: İnceleme ve çözüm durumları belirgin endüstriyel olaylar ### Bir makine kontrol paneli değil, not defteri > Çalışan örnek, kurgusal bir ekipman not defteridir. Üç kayıt, kaynak önem derecelerini korurken ayrı bir yerel inceleme durumu, okuyucunun neleri incelediğini izler. Bu ayrım, arayüzün temelidir: satır seçmek, not okumak ve fiziksel bir durumu çözmek farklı işlemlerdir. Önizleme ilk ikisini uygular ve canlı kontrol yapıldığına dair bir iddiada bulunmaz. Event List, dekoratif kartlardan daha iyi bir başlangıçtır; seçili durumu, önem derecesi işaretleyicisi ve şevronu, yinelenen kayıtları gezinilebilir bir koleksiyon olarak okunaklı kılar. İnceleyici, uzun metinleri satırın dışında gösterir. Alarmın giderildiğini iddia eden sahte bir telemetri akışı veya başarı bildirimi yoktur. Destekleyici belirtimi okuyun ## Siemens iX Tasarım Sistemi: Operasyonel anlamı yansıtan renk rolleri ### İşaretleyicileri okunaklı renklerle eşleştirin Renk sistemi, opak arka plan katmanlarını yarı saydam bileşen dolgularından ayırır. Bir bileşen dolgusu, altındaki yüzeyden bağımsız olarak değerlendirilemez. Yerel kodda ekran görüntüsünden alınmış bir hex değerini her satıra kopyalamak yerine gerçek tema değişkenlerini kullanın. Standart ve yumuşak metin, farklı okuma önceliklerine hizmet eder. Zayıf metin devre dışı içerik için tasarlanmıştır; bu nedenle inceleme için gereken bir zaman damgası otomatik olarak bu role alınmamalıdır. Hata ön planı için ayrılmış alarm metni rolü, durum dolgusunu gelişigüzel yeniden kullanmaktan daha uygundur. - Renkli kenar işaretleyicisinin yanında Alarm, Uyarı veya Bilgi sözcüğünü gösterin. - Yerel incelemeden sonra alarm işaretleyicisini koruyun; inceleme, kaynak durumu değiştirmez. - Seçili stili gezinme durumuna ayırın; böylece önem derecesi ve seçim birbirinden ayırt edilebilir. Destekleyici belirtimi okuyun ## Siemens iX Tasarım Sistemi: Notları etiketlerden ayıran tipografi ### Tahmini bir piksel ölçeği yerine biçimleri kullanın iX tipografiyi başlıklar, gövde metni, etiketler, ekran yazısı ve kod olarak sınıflandırır. İnceleme notları çok satırlı gövde metni davranışına ihtiyaç duyar; büyük bir sayı ekran yazısı için uygundur; kısa bir filtre etiketi ise etiket kategorisine girer. Ekran yazısı biçimi, tüm olay açıklamasını büyütmenin pratik bir yolu değildir. Belgelenmiş ix-typography format="h3" örneği, somut bir uygulama başlangıç noktası sunar. Eşdeğer Sass typography-h3 mixin'i, yazı tipi kurallarını yeniden oluşturmadan özel bir öğeyi destekler. Önizlemede bilinçli olarak sistem yedeği ve uygulama yazı tipi boyutları kullanılmıştır; bu değerler resmî Siemens belirteçleri olarak sunulmaz. Destekleyici belirtimi okuyun ## Siemens iX Tasarım Sistemi: Event List seçimi ve yoğunluğu ### Öğe kimliğini görünümünden bağımsız yönetin API anlık görüntüsünde itemHeight değeri S, L veya sayı olabilir. Örnek L değerini seçer, compact özelliğini varsayılan false değerinde bırakır ve şevronu etkinleştirir. Daha uzun yerelleştirilmiş başlıklar içeren bir üretim günlüğünde, her kaydın örnekteki gibi sığacağını varsaymak yerine seçilen yüksekliğin metin kaydırmayla uyumlu olduğunu doğrulayın. Her öğeye, kimlik karşılaştırmasından elde edilen selected değeri verilir ve tıklama, sarmalayıcının onItemClick işleyicisi aracılığıyla itemClick olarak iletilir. İnceleyici aynı kimliği kullanır. Böylece görsel seçimin ve ayrıntı panelinin sessizce farklı kayıtlara başvurması önlenir. Filtre değişiklikleri, seçili kimliği açıkça temizler. Destekleyici belirtimi okuyun ## Siemens iX Tasarım Sistemi: Dar ekranda da işlevini koruyan inceleyici ### Ayrıntıları olay koleksiyonunun altına taşıyın Örnekteki ikiye bir ızgara, yayımlanmış bir iX ızgara belirteci değil, uygulama yerleşimidir. Dar ekranda tek sütuna dönüşür ve inceleyiciden önce kayıtların sırasını korur. İnceleyici, iç içe geçmiş bir kaydırma tuzağı oluşturmaz; okuyucu örneğin tamamında doğal biçimde kaydırma yapabilir. Olay meta verileri, okunabilir ikincil renkte ikinci satırda gösterilir. Filtre, yinelenen satırların dışında kalır ve kayıtlar değiştiğinde yerinden oynamaz. Bir durum paragrafı, filtreyi değiştirmeden veya başlığın yerini almadan seçili kaydın yerel inceleme sonucunu bildirir. Destekleyici belirtimi okuyun ## Siemens iX Tasarım Sistemi Rengi veya işaretçi hassasiyetini kullanmadan durumu algılanabilir kılın ### Metin, klavye kontrolleri ve odak Çevrimdışı önizlemede kayıtlar için yerel düğmeler, önem düzeyi için etiketli bir açılır liste ve inceleme geri bildirimi için aria-live durum bölgesi kullanılır. Kayıt seçmek için Enter ve Space tuşları kullanılabilir. Yerel kütüphane bileşimi, Event List sarmalayıcılarını kullanır; özel odak geçersiz kılmaları benimsenmeden önce kurulu sürümün klavye ve yardımcı teknoloji davranışı test edilmelidir. Etiketler, iş açısından önemli ayrımı açıklar: Alarmı çözmek yerine yerel olarak incelendi olarak işaretle. Devre dışı bırakılmış inceleme eylemine, görünür bir incelendi durumu eşlik eder. Anlamın tamamı renge bağlı değildir ve filtre, erişilemeyen eski bir seçimi başka bir kategoride gizli bırakmaz. Destekleyici belirtimi okuyun ## Siemens iX Tasarım Sistemi Paketi, temayı ve yerel uygulama durumunu entegre edin ### Özenle belirlenmiş bir entegrasyon sırası Kurulum bloğunda paket içe aktarımları, belge tema öznitelikleri, gerçek bileşen özellikleri, eksiksiz React durumu ve uygulama CSS bulunur. Tema seçici, benzer adlı özel bir öznitelik değil, data-ix-color-schema özniteliğidir. Uygulamada kurulu çekirdek, sarmalayıcılar ve simgeleri birbiriyle uyumlu sürümlere sabitleyin. Görsel örnek, bu etkileşim kurallarını yorumlayan çevrimdışı bağımsız bir HTML/CSS uygulamasıdır. Koyu lacivert palet, 24 piksellik kenar boşlukları ve şematik ekipman çizimi, özgün uygulama tercihleridir. Yerel görsel eşdeğerlik için resmî stil sayfasıyla ayrı React örneğini çalıştırın ve hesaplanan tema değerlerini inceleyin. 1. Vite React iskeletine çekirdeği, React sarmalayıcılarını ve simgeleri yükleyin; oluşturulan kök öğeyi koruyun. 2. main.jsx ve style.css dosyalarını sağlanan dosyalarla değiştirin; ardından belgede classic ile dark, light veya system seçeneklerinden birini belirleyin. 3. Bir kayıt seçin, incelendi olarak işaretleyin, listeyi filtreleyin ve gizli seçim temizlenirken önem düzeyinin korunduğunu doğrulayın. Destekleyici belirtimi okuyun ## Siemens iX 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. Bağımsız çevrimdışı HTML/CSS yorumu. Özgün palet, sistem yazı tipi ve uygulama boyutları; yerel iX çalışma zamanı değildir. ``` Equipment event notebook — iX interpretation
EVENT NOTEBOOKSample plant / offline

Independent HTML interpretation of Siemens iX interaction rules. Original colors, dimensions and fictional equipment records. Local review does not acknowledge or resolve a live alarm.

``` Kod referansı - Bir olayı incelendi olarak işaretlemek, önem düzeyini değiştirmez veya ekipman alarmını çözmez. Yerel iX girişi, Event List seçimini ve tema özniteliklerini ayrıca gösterir. ### Ayrı bir denetim paneliyle Event List Seçili kimlik, öğe vurgusunu ve ayrıntıları belirler. İncelendi olarak işaretleme yalnızca yerel not defteri durumunu kaydeder; özgün önem düzeyi görünür kalır. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` Kod referansı - Önem düzeyi işaretçisi için itemColor, okunabilir metin etiketi içinse önem düzeyini kullanın. - Önem düzeyi filtresini değiştirmek seçimi temizler ve denetçinin gizli bir olayı açıklamasını önler. - Yerel inceleme düğmesi uygulama mantığıdır; iX alarm onayı işlevi uydurulmuş değildir API. ### Kopyalanmış yazı tipi boyutları olmadan temaya uyumlu tipografi Yazı tipi boyutunu temalar arasında sabitlemek yerine belgelenmiş format özelliğini veya Sass karışımını kullanın. ``` Inspection record @import "@siemens/ix/scss/mixins/font"; .inspection-title { @include typography-h3; } ``` Kod referansı - Önizlemede sistem yazı tipi yedeği kullanılır; Siemens markalı yazı tipleri dağıtılmaz. ## Siemens iX Tasarım Sistemi Yapay Zekâ Ajanı Kurulumu ### Uygulamaya Başlangıç Noktası Vite React iskeletinin mevcut kök öğesini koruyarak main.jsx ve style.css dosyalarını tamamlayın. Resmî sarmalayıcılar, CSS içe aktarımı ve Event List özellikleri belgelenmiştir; yerel paket derlemesi burada çalıştırılmamıştır. Gömülü önizleme, bağımsız bir çevrimdışı yorumdur. ``` // In a Vite React project: npm install @siemens/ix @siemens/ix-react @siemens/ix-icons // src/main.jsx import React, {useState} from 'react'; import {createRoot} from 'react-dom/client'; import {IxEventList, IxEventListItem, IxTypography} from '@siemens/ix-react'; import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; import './style.css'; document.documentElement.dataset.ixTheme='classic'; document.documentElement.dataset.ixColorSchema='dark'; const records=[ {id:'E-014',severity:'alarm',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Original demonstration record: inspect the cooling circuit before considering a reset.'}, {id:'E-015',severity:'warning',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Original demonstration record: schedule a filter inspection.'}, {id:'E-016',severity:'info',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'Original demonstration record: a checklist is available for review.'} ]; function App(){ const [filter,setFilter]=useState('all'),[selected,setSelected]=useState('E-014'),[reviewed,setReviewed]=useState([]); const visible=records.filter(r=>filter==='all'||r.severity===filter); const record=visible.find(r=>r.id===selected); return

Equipment event notebook

Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.

{visible.map(r=>setSelected(r.id)}>
{r.title}{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}
)}
} createRoot(document.getElementById('root')).render(); /* src/style.css — custom dimensions are application choices */ main{max-width:72rem;margin:auto;padding:24px;color:var(--theme-color-std-text)} .workspace{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-top:24px} .workspace>*{min-width:0}aside{padding:20px;border:1px solid var(--theme-color-soft-bdr)} .record{display:grid;gap:4px;padding:8px;white-space:normal;overflow-wrap:anywhere} .record span{color:var(--theme-color-soft-text)} button,select{font:inherit;padding:10px;background:var(--theme-color-component-1);color:var(--theme-color-std-text);border:1px solid var(--theme-color-std-bdr)} button:focus-visible,select:focus-visible{outline:2px solid var(--theme-color-primary);outline-offset:3px} @media(max-width:700px){.workspace{grid-template-columns:1fr}} ``` ### Projeniz İçin Bir İstem ``` Bu kılavuzda doğrulanmış Event List özelliklerini ve belge tema özniteliklerini kullanarak bir Siemens iX olay defteri oluşturun. Önem düzeyini seçim ve yerel inceleme durumundan bağımsız olarak koruyun. Yerel sürümde anlamsal tema renklerini kullanın. Defterdeki bir eylemin fiziksel alarmı çözdüğünü asla ima etmeyin. Filtreleri etiketli, satırları klavyeyle erişilebilir tutun ve dar ekranlarda denetim panelini alt alta yerleştirin. ``` ## Siemens iX Tasarım Sistemi Kaynakları ve Kapsamı Bağımsız OpenDesign kılavuzu. Olay verileri ve ekipman çizimi kurgusaldır. Önizleme stili özgün bir yorumdur; ayrı React örneğinde belgelenmiş iX API kullanılır. Makine bağlantısı, telemetri veya canlı alarm onayı uygulanmamıştır. - React kurulumu Paketler, CSS ve tema öznitelikleri. - Bileşen API anlık görüntüsü Gerçek olay özellikleri ve olaylar. - Renk temelleri Yüzey, okunabilirlik ve durum rolleri. - Tipografi Metin kategorileri ve kullanım amaçları. - Tipografi uygulaması Biçim ve Sass girişi. - Kenarlıklar Sınır hiyerarşisi. - Event List Bileşen örnekleri ve yoğunluk seçenekleri. ## Siemens iX Tasarım Sistemi İlgili Kaynaklar ### Sprout Social Seeds Karma seçim, filtrelenmiş boş durumlar ve geri alma özelliklerine sahip eksiksiz bir editoryal inceleme kuyruğunda Seeds’in gerçek herkese açık renk, boşluk, ürün tipografisi ve kenarlık belirteçlerini inceleyin. ### SumUp Circuit Tam ve doğru anlamsal belirteçler, yerel doğrulama özellikleri, eksiksiz bir satıcı ürün düzenleyicisi ve resimli bir müşteri tarafı önizlemesi içeren Circuit kılavuzu. ### TDesign TDesign React ile kompakt bir API ilke düzenleyicisi oluşturun: somut tema rolleri, iki piksellik boyut ölçeği, Form alanı kaydı ve tür denetimli bir Table bileşimi. - [Uygulama başvurusu](https://ix.siemens.io/docs/components/event-list/code) - [Kaynak](https://ix.siemens.io/docs/home/installation/react) - [Kaynak](https://ix.siemens.io/docs/styles/colors) - [Kaynak](https://ix.siemens.io/docs/styles/borders) - [Kaynak](https://ix.siemens.io/docs/styles/typography/guide) - [Kaynak](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Destekleyici belirtimi okuyun](https://ix.siemens.io/docs/components/event-list/code) - [Destekleyici belirtimi okuyun](https://ix.siemens.io/docs/styles/colors) - [Destekleyici belirtimi okuyun](https://ix.siemens.io/docs/styles/typography/code) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Destekleyici belirtimi okuyun](https://ix.siemens.io/docs/guidelines/accessibility/code) - [Destekleyici belirtimi okuyun](https://ix.siemens.io/docs/home/installation/react) - [Kod referansı](https://ix.siemens.io/docs/components/event-list/code) - [Kod referansı](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Kod referansı](https://ix.siemens.io/docs/styles/typography/code) - [React kurulumu Paketler, CSS ve tema öznitelikleri.](https://ix.siemens.io/docs/home/installation/react) - [Bileşen API anlık görüntüsü Gerçek olay özellikleri ve olaylar.](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Renk temelleri Yüzey, okunabilirlik ve durum rolleri.](https://ix.siemens.io/docs/styles/colors) - [Tipografi Metin kategorileri ve kullanım amaçları.](https://ix.siemens.io/docs/styles/typography/guide) - [Tipografi uygulaması Biçim ve Sass girişi.](https://ix.siemens.io/docs/styles/typography/code) - [Kenarlıklar Sınır hiyerarşisi.](https://ix.siemens.io/docs/styles/borders) - [Event List Bileşen örnekleri ve yoğunluk seçenekleri.](https://ix.siemens.io/docs/components/event-list/code)