Untersuchen Sie Industrieereignisse mithilfe einer klar definierten Schweregrad-Terminologie, theme-gerechter Farbrollen und der iX Event List API. Dieser Leitfaden erstellt ein lokales Geräteprotokoll, ohne einen geprüften Eintrag mit einem behobenen Maschinenalarm zu verwechseln.
Fiktive Ereignisse filtern, einen Gerätehinweis prüfen und einen Datensatz lokal als geprüft markieren, während sein ursprünglicher Schweregrad sichtbar bleibt.
Eigenständige Offline-Interpretation von HTML/CSS. Eigene Farbpalette, Systemschrift und Anwendungsabmessungen; keine native iX-Laufzeitumgebung. · Implementierungsreferenz
02
Entwurfsreferenz zum Siemens iX-Designsystem
Aktuelle öffentliche iX-Dokumentation und offizieller Snapshot der Komponenten-API aus dem Hauptzweig. Die folgenden Farbeinträge sind semantische Rollen, keine erfundenen festen Hexwerte. Installierte Paketversionen müssen aufeinander abgestimmt sein; das Offline-Beispiel verwendet eine eigene, klar ausgewiesene Farbpalette und eigene Abmessungen.
Siemens iX-Designsystem: Industrieereignisse mit klar getrennten Prüf- und Bearbeitungsstatus
Ein Notizbuch, kein Maschinenbedienpult
Das Arbeitsbeispiel ist ein fiktives Geräteprotokoll. Drei Einträge behalten ihren ursprünglichen Schweregrad bei, während ein separater lokaler Prüfstatus festhält, welche Einträge eine lesende Person geprüft hat. Diese Trennung ist für den Aufbau wesentlich: Eine Zeile auszuwählen, eine Notiz zu lesen und einen physischen Zustand zu beheben sind unterschiedliche Vorgänge. Die Vorschau setzt die ersten beiden um und behauptet nicht, eine Live-Steuerung zu bieten.
Die Event List ist ein besserer Ausgangspunkt als dekorative Karten, denn ihr Auswahlzustand, die Schweregradmarkierung und der Chevron machen wiederkehrende Einträge als navigierbare Sammlung verständlich. Der Inspektor zeigt längere Texte außerhalb der Zeile an. Es gibt keinen vorgetäuschten Telemetriestrom und keine Erfolgsmeldung, die behauptet, ein Alarm sei aufgehoben worden.
Siemens iX Designsystem: Farbrollen für operative Bedeutungen
Markierungen mit Lesefarben kombinieren
Das Farbsystem unterscheidet undurchsichtige Hintergrundebenen von halbtransparenten Komponentenfüllungen. Eine Komponentenfüllung lässt sich nicht unabhängig von der darunterliegenden Oberfläche beurteilen. Verwende in nativem Code die tatsächlichen Theme-Variablen, statt einen Hex-Wert aus einem Screenshot in jede Zeile zu kopieren.
Standardtext und dezenter Text dienen unterschiedlichen Leseprioritäten. Schwacher Text ist für deaktivierte Inhalte vorgesehen. Ein für eine Untersuchung benötigter Zeitstempel sollte daher nicht automatisch dieser Rolle zugeordnet werden. Für einen Fehlertext eignet sich die eigene Alarmtextrolle besser, als unbesehen eine Statusfüllfarbe wiederzuverwenden.
Zeige neben der farbigen Markierung das Wort Alarm, Warnung oder Info an.
Die Alarmmarkierung bleibt auch nach der lokalen Prüfung erhalten; die Prüfung ändert den ursprünglichen Zustand nicht.
Verwende den ausgewählten Stil nur für den Navigationszustand, damit Schweregrad und Auswahl unterscheidbar bleiben.
Siemens iX Designsystem: Typografie, die Notizen von Beschriftungen unterscheidet
Formate statt einer geschätzten Pixelskala verwenden
iX unterteilt Typografie in Überschriften, Fließtext, Beschriftungen, Display und Code. Prüfnotizen benötigen das mehrzeilige Verhalten des Fließtexts; eine große Zählung eignet sich für die Kategorie Display; eine kurze Filterbeschriftung gehört zur Kategorie Beschriftungen. Eine Display-Formatierung ist kein bequemer Weg, um die gesamte Ereignisbeschreibung zu vergrößern.
Das dokumentierte Beispiel ix-typography format="h3" bietet einen konkreten Einstieg in die Implementierung. Das entsprechende Sass-Mixin typography-h3 unterstützt ein benutzerdefiniertes Element, ohne dessen Schriftregeln neu erstellen zu müssen. Die Vorschau verwendet bewusst eine Systemschrift als Fallback und anwendungsspezifische Schriftgrößen; diese Werte werden nicht als offizielle Siemens-Design-Tokens ausgegeben.
Siemens iX Designsystem: Auswahl und Dichte der Event List
Identität unabhängig vom Erscheinungsbild eines Eintrags steuern
Der API-Snapshot weist itemHeight den Wert S, L oder eine Zahl zu. Das Beispiel verwendet L, belässt compact beim Standardwert false und aktiviert einen Chevron. Bei einem Produktionsprotokoll mit längeren lokalisierten Titeln muss geprüft werden, ob die gewählte Höhe für den Textumbruch ausreicht, statt anzunehmen, dass jeder Eintrag passt, nur weil dies im Beispiel der Fall ist.
Jeder Eintrag erhält selected anhand eines ID-Vergleichs und löst itemClick über den onItemClick-Handler des Wrappers aus. Der Inspektor liest dieselbe ID aus. So können die visuelle Auswahl und das Detailfenster nicht unbemerkt auf unterschiedliche Einträge verweisen. Bei einer Filteränderung wird die ausgewählte ID ausdrücklich zurückgesetzt.
Siemens iX Designsystem: Ein Inspektor, der auch in einem schmalen Ansichtsfenster funktioniert
Details unter die Ereignisliste verschieben
Das zweispaltige Raster mit einem Verhältnis von zwei zu eins im Beispiel ist ein Anwendungs-Layout und kein veröffentlichtes iX-Raster-Token. In einem schmalen Ansichtsfenster wechselt es zu einer Spalte; dabei bleibt die Reihenfolge der Einträge vor dem Inspektor erhalten. Der Inspektor erzeugt keine verschachtelte Scrollfalle; die lesende Person kann das gesamte Beispiel auf natürliche Weise scrollen.
Ereignismetadaten erscheinen in einer zweiten Zeile in einer gut lesbaren Sekundärfarbe. Der Filter bleibt außerhalb der wiederkehrenden Zeilen und bewegt sich nicht, wenn sich die Einträge ändern. Ein Statusabsatz meldet das lokale Prüfergebnis des ausgewählten Eintrags, ohne den Filter zu ändern oder den Titel zu ersetzen.
Siemens iX Designsystem: Zustände ohne Farbe oder präzise Zeigerbewegungen wahrnehmbar machen
Text, Tastatursteuerung und Fokus
Die Offline-Vorschau verwendet native Schaltflächen für Einträge, ein beschriftetes Auswahlfeld für den Schweregrad und einen aria-live-Statusbereich für Rückmeldungen zur Prüfung. Mit Eingabe und Leertaste lässt sich ein Eintrag auswählen. Die native Bibliothekskomposition verwendet ihre Event-List-Wrapper. Vor der Übernahme benutzerdefinierter Fokusüberschreibungen sollten das Tastatur- und das Verhalten für unterstützende Technologien mit der installierten Version getestet werden.
Die Beschriftungen benennen den fachlichen Unterschied: Lokal als geprüft markieren, nicht Alarm beheben. Bei einer deaktivierten Prüfaktion wird der geprüfte Zustand sichtbar angezeigt. Die Bedeutung wird nicht allein durch Farbe vermittelt, und durch den Filter bleibt keine unzugängliche veraltete Auswahl in einer anderen Kategorie verborgen.
Siemens iX Designsystem: Paket, Theme und lokalen Anwendungszustand verbinden
Eine durchdachte Integrationsabfolge
Der Einrichtungsblock enthält die Paketimporte, Theme-Attribute des Dokuments, tatsächliche Komponenteneigenschaften, den vollständigen React-Zustand und das Anwendungs-CSS. Der Theme-Selektor heißt data-ix-color-schema und nicht ähnlich benanntes benutzerdefiniertes Attribut. Sperre die installierten Versionen von Core, Wrappers und Icons in der Anwendung auf zueinander kompatible Versionen.
Das visuelle Beispiel ist eine Offline-HTML/CSS-Interpretation dieser Interaktionsregeln. Die dunkelblaue Farbpalette, 24-Pixel-Ränder und die schematische Gerätedarstellung sind eigene Entscheidungen für die Anwendung. Für native visuelle Übereinstimmung führe das separate React-Beispiel mit dem offiziellen Stylesheet aus und prüfe die berechneten Theme-Werte.
Installiere Core, React-Wrappers und Icons in einem Vite-React-Gerüst; behalte das generierte Root-Element bei.
Ersetze main.jsx und style.css durch die bereitgestellten Dateien und wähle dann auf dem Dokument classic sowie dark, light oder system aus.
Wähle einen Eintrag aus, markiere ihn als geprüft, filtere die Liste und bestätige, dass der Schweregrad erhalten bleibt, während eine ausgeblendete Auswahl zurückgesetzt wird.
Speichere das vollständige Dokument als index.html und öffne es in einem Browser. Eigenständige Offline-Interpretation als HTML/CSS. Eigene Farbpalette, Systemschrift und Anwendungsabmessungen; keine native iX-Laufzeitumgebung.
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>
Einen Eintrag als geprüft zu markieren, ändert weder seinen Schweregrad noch behebt es einen Gerätealarm. Der native iX-Eintrag veranschaulicht separat die Auswahl in der Event List und die Theme-Attribute.
Event List mit separat gesteuertem Inspektionsbereich
Eine ausgewählte ID steuert die Hervorhebung des Elements und die angezeigten Details. Durch die Überprüfung wird lediglich ein lokaler Notizbuchstatus erfasst; die ursprüngliche Priorität bleibt sichtbar.
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}}
Die Vorschau verwendet eine Systemschrift als Fallback; Siemens-Markenfonts werden nicht mitgeliefert.
04
Siemens iX-Designsystem-Agent einrichten
Ausgangspunkt für die Implementierung
Vervollständigen Sie main.jsx und style.css für ein Vite-React-Gerüst mit dem vorhandenen Root-Element. Die offiziellen Wrapper, der CSS-Import und die Eigenschaften der Event List sind dokumentiert; die native Paketkompilierung wurde hier nicht ausgeführt. Die eingebettete Vorschau ist eine unabhängige Offline-Interpretation.
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}}
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie mit den verifizierten Eigenschaften der Event List und den in diesem Leitfaden dokumentierten Theme-Attributen ein Siemens iX-Ereignisnotizbuch. Die Priorität muss unabhängig von Auswahl und lokaler Überprüfung erhalten bleiben. Verwenden Sie in der nativen Version semantische Theme-Farben. Erwecken Sie niemals den Eindruck, dass eine Aktion im Notizbuch einen physischen Alarm behebt. Kennzeichnen Sie Filter, sorgen Sie für per Tastatur zugängliche Zeilen und ordnen Sie den Inspektor auf schmalen Bildschirmen unterhalb an.
05
Quellen und Geltungsbereich des Siemens iX-Designsystems
Unabhängiger Leitfaden zu OpenDesign. Ereignisdaten und Geräteillustration sind fiktiv. Die Gestaltung der Vorschau ist eine eigenständige Interpretation; das separate React-Beispiel verwendet das dokumentierte iX-API. Es gibt keine Verbindung zu Maschinen, Telemetrie oder Live-Quittierung.
