Açık bir önem derecesi sözlüğü, temaya duyarlı renk rolleri ve iX Event List API ile endüstriyel olayları inceleyin. Bu kılavuz, incelenmiş bir kaydı giderilmiş bir makine alarmıyla karıştırmadan yerel bir ekipman defteri oluşturur.
Bağımsız çevrimdışı HTML/CSS yorumu. Özgün palet, sistem yazı tipi ve uygulama boyutları; yerel iX çalışma zamanı değildir. · Uygulama başvurusu
02
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.
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.
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.
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.
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.
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.
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.
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.
Vite React iskeletine çekirdeği, React sarmalayıcılarını ve simgeleri yükleyin; oluşturulan kök öğeyi koruyun.
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.
Bir kayıt seçin, incelendi olarak işaretleyin, listeyi filtreleyin ve gizli seçim temizlenirken önem düzeyinin korunduğunu doğrulayın.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Equipment event notebook — iX interpretation</title><style>
*{box-sizing:border-box}body{margin:0;background:#000028;color:#f3f3fa;font:15px/1.5 Arial,sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #00cccc;outline-offset:3px}.app{max-width:1200px;margin:auto;padding:28px}.top{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #55556b;padding-bottom:18px}.brand{letter-spacing:.12em;color:#00cccc}.dim{color:#b6b6c8}h1{font-size:30px;font-weight:500;line-height:1.2;margin:20px 0 8px}h2{font-size:21px;font-weight:500;margin:0 0 12px}.banner{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center;padding-bottom:24px}.schematic{height:140px;position:relative;display:flex;align-items:center;justify-content:space-evenly;border-bottom:2px solid #77788e;background:linear-gradient(transparent 23px,#23233c 24px);background-size:24px 24px}.schematic:before{content:'';position:absolute;left:10%;right:10%;top:68px;height:5px;background:#666780}.unit{position:relative;width:76px;height:76px;border:2px solid #b6b6c8;background:#141432;display:grid;place-content:center;text-align:center}.unit:first-child{border-color:#ff8da5}.unit span{color:#b6b6c8;font:12px monospace}.toolbar{display:flex;align-items:center;gap:16px;margin:10px 0 18px}select{background:#23233c;border:1px solid #8b8b9e;padding:8px 28px 8px 10px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:24px}.event{width:100%;display:grid;grid-template-columns:70px 1fr 20px;gap:14px;text-align:left;align-items:center;padding:18px 14px;border:1px solid #55556b;border-left:4px solid var(--severity);background:#141432;margin-bottom:10px}.event:hover{background:#292944}.event[aria-pressed=true]{outline:2px solid #00cccc;outline-offset:1px}.event strong{font-size:15px;font-weight:600;display:block}.event small{display:block;color:#c0c0cf;margin-top:4px}.severity{font-size:11px;letter-spacing:.06em}.inspector{padding:20px;background:#23233c;border-top:3px solid #00cccc;min-height:290px}.meta{font:12px monospace;color:#b6b6c8}.tag{font-size:12px;border:1px solid #6c6c80;padding:3px 8px;display:inline-block;margin:10px 0}.action{background:#00cccc;border:0;color:#000028;padding:11px 16px;margin-top:10px}.action:disabled{background:#515168;color:#e0e0e8;cursor:default}.status{min-height:48px;color:#b7eeee;font-size:13px}.note{border-top:1px solid #55556b;margin-top:24px;padding-top:16px;color:#b6b6c8;font-size:12px}@media(max-width:650px){.app{padding:18px}.top{font-size:12px}.banner,.layout{grid-template-columns:1fr}.banner{gap:8px}.schematic{height:115px}.schematic:before{top:56px}.unit{height:60px;width:65px}h1{font-size:26px}.event{grid-template-columns:60px 1fr 10px;gap:8px}.toolbar{flex-wrap:wrap}}
</style><main class="app"><header class="top"><b class="brand">EVENT NOTEBOOK</b><span class="dim">Sample plant / offline</span></header><div class="banner"><div><h1>Inspect the event.<br>Keep its meaning.</h1><p class="dim">Review equipment notes without changing their original severity.</p></div><div class="schematic" aria-label="Original schematic of three fictional equipment units" role="img"><div class="unit">A<span>PUMP</span></div><div class="unit">B<span>PUMP</span></div><div class="unit">C<span>LINE</span></div></div></div><div class="toolbar"><label for="severity">Severity</label><select id="severity"><option value="all">All events</option><option value="alarm">Alarm</option><option value="warning">Warning</option><option value="info">Info</option></select><span class="dim" id="count"></span></div><div class="layout"><section aria-label="Event records" id="events"></section><aside class="inspector" aria-label="Selected event" id="detail"></aside></div><p class="note">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.</p></main><script>
const data=[{id:'E-014',severity:'alarm',color:'#ff8da5',title:'Cooling flow below sample threshold',asset:'Pump A',time:'09:42',note:'Inspect the cooling circuit before considering a reset. This fictional record remains an alarm after you mark the note reviewed.'},{id:'E-015',severity:'warning',color:'#ffce6b',title:'Filter service approaching',asset:'Pump B',time:'09:38',note:'Schedule a filter inspection. Reviewing this notebook entry does not schedule maintenance or alter equipment.'},{id:'E-016',severity:'info',color:'#65cfff',title:'Inspection checklist attached',asset:'Line C',time:'09:30',note:'A fictional checklist is available for review. This sample displays the record; it does not connect to a document service.'}];let selected='E-014';const reviewed=new Set();function render(){let visible=data.filter(r=>severity.value==='all'||r.severity===severity.value);document.querySelector('#count').textContent=visible.length+' event'+(visible.length===1?'':'s');events.innerHTML=visible.map(r=>`<button class="event" id="row-${r.id}" style="--severity:${r.color}" aria-pressed="${selected===r.id}" data-id="${r.id}"><span class="severity">${r.severity.toUpperCase()}</span><span><strong>${r.title}</strong><small>${r.asset} · ${r.time}${reviewed.has(r.id)?' · Reviewed locally':''}</small></span><span aria-hidden="true">›</span></button>`).join('');const r=visible.find(r=>r.id===selected);detail.innerHTML=r?`<div class="meta">${r.id} / ${r.asset}</div><h2>${r.title}</h2><span class="tag">${r.severity.toUpperCase()} · source condition unchanged</span><p>${r.note}</p><button class="action" id="review" ${reviewed.has(r.id)?'disabled':''}>Mark reviewed locally</button><p class="status" role="status">${reviewed.has(r.id)?'Reviewed in this browser session. Source severity is unchanged.':''}</p>`:'<h2>Select an event</h2><p class="dim">Choose a record to inspect its note.</p>';events.querySelectorAll('button').forEach(b=>b.onclick=()=>{selected=b.dataset.id;render();document.getElementById('row-'+selected).focus()});if(r&&!reviewed.has(r.id))document.querySelector('#review').onclick=()=>{reviewed.add(r.id);render()}}const severity=document.querySelector('#severity'),events=document.querySelector('#events'),detail=document.querySelector('#detail');severity.onchange=()=>{selected='';render()};render();
</script></html>
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.
jsx
// 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 <main><h1>Equipment event notebook</h1><p>Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.</p>
<label htmlFor="severity">Severity</label><select id="severity" value={filter} onChange={e=>{setFilter(e.target.value);setSelected('')}}>
<option value="all">All events</option><option value="alarm">Alarm</option><option value="warning">Warning</option><option value="info">Info</option></select>
<div className="workspace"><section aria-label="Event records"><IxEventList itemHeight="L" chevron>
{visible.map(r=><IxEventListItem key={r.id} selected={selected===r.id} itemColor={`var(--theme-color-${r.severity})`} onItemClick={()=>setSelected(r.id)}>
<div className="record"><strong>{r.title}</strong><span>{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}</span></div>
</IxEventListItem>)}
</IxEventList></section><aside aria-label="Selected event">
{record?<><IxTypography format="h3">{record.id} / {record.asset}</IxTypography><p>{record.note}</p>
<button type="button" onClick={()=>setReviewed(a=>a.includes(record.id)?a:[...a,record.id])} disabled={reviewed.includes(record.id)}>Mark reviewed locally</button>
<p role="status">{reviewed.includes(record.id)?'Reviewed in this browser session. Source severity is unchanged.':''}</p></>:<p>Select an event to inspect its record.</p>}
</aside></div></main>
}
createRoot(document.getElementById('root')).render(<App/>);
/* 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}}
Önizlemede sistem yazı tipi yedeği kullanılır; Siemens markalı yazı tipleri dağıtılmaz.
04
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.
jsx
// 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 <main><h1>Equipment event notebook</h1><p>Fictional records. Reviewing an entry does not control equipment or acknowledge a live alarm.</p>
<label htmlFor="severity">Severity</label><select id="severity" value={filter} onChange={e=>{setFilter(e.target.value);setSelected('')}}>
<option value="all">All events</option><option value="alarm">Alarm</option><option value="warning">Warning</option><option value="info">Info</option></select>
<div className="workspace"><section aria-label="Event records"><IxEventList itemHeight="L" chevron>
{visible.map(r=><IxEventListItem key={r.id} selected={selected===r.id} itemColor={`var(--theme-color-${r.severity})`} onItemClick={()=>setSelected(r.id)}>
<div className="record"><strong>{r.title}</strong><span>{r.severity.toUpperCase()} · {r.asset} · {r.time}{reviewed.includes(r.id)?' · Reviewed locally':''}</span></div>
</IxEventListItem>)}
</IxEventList></section><aside aria-label="Selected event">
{record?<><IxTypography format="h3">{record.id} / {record.asset}</IxTypography><p>{record.note}</p>
<button type="button" onClick={()=>setReviewed(a=>a.includes(record.id)?a:[...a,record.id])} disabled={reviewed.includes(record.id)}>Mark reviewed locally</button>
<p role="status">{reviewed.includes(record.id)?'Reviewed in this browser session. Source severity is unchanged.':''}</p></>:<p>Select an event to inspect its record.</p>}
</aside></div></main>
}
createRoot(document.getElementById('root')).render(<App/>);
/* 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
Ajan İstemi
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.
05
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.
