# Système de design Siemens iX ## Aperçu de l’interface du système de design Siemens iX Filtrez des événements fictifs, consultez une note sur un équipement et marquez localement un enregistrement comme vérifié tout en gardant visible sa gravité d’origine. ## Référence de conception du système de design Siemens iX Documentation publique actuelle d’iX et capture officielle de la branche principale du composant API. Les couleurs ci-dessous sont des rôles sémantiques, et non des codes hexadécimaux fixes inventés. Les versions des packages installés doivent être verrouillées ensemble ; l’exemple hors ligne utilise sa propre palette et ses propres dimensions, clairement indiquées. ### Thème et point d’entrée du package | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Core package | @siemens/ix | Composants Web et feuille de style globale. | | React wrappers | @siemens/ix-react | Intégration du composant React. | | Icons | @siemens/ix-icons | Dépendance officielle pour les icônes. | | data-ix-theme | classic | Sélecteur de thème au niveau du document. | | data-ix-color-schema | dark \| light \| system | La graphie exacte de l’attribut est définie par le schéma. | | Global CSS | @siemens/ix/dist/siemens-ix/siemens-ix.css | À importer une seule fois au point d’entrée de l’application. | ### Rôles de lecture et de surface | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --theme-color-primary | Primary action role | Résoudre selon le thème choisi. | | --theme-color-std-text | Default reading color | Titres des événements et texte courant. | | --theme-color-soft-text | Secondary reading color | Horaires et métadonnées des ressources. | | --theme-color-weak-text | Disabled reading color | Ne pas utiliser pour des informations secondaires importantes. | | --theme-color-alarm-text | Alarm text role | À utiliser lorsqu’un texte d’erreur nécessite une couleur de premier plan. | | --theme-color-component-1 | Interactive component fill | Semi-transparent ; son apparence dépend de la surface sous-jacente. | | color-0 | Transparent background role | Les autres niveaux d’arrière-plan sont opaques. | ### Vocabulaire de gravité | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Alarm | Error, invalid or dangerous condition | Conserver le libellé à côté du marqueur coloré. | | Critical | Between alarm and warning | Une signification distincte, et non une nuance décorative supplémentaire. | | Warning | Condition requiring attention | Ne pas le requalifier silencieusement en alarme. | | Success | Positive outcome | Une action de vérification ne signifie pas nécessairement qu’une alarme a été résolue. | | Info | Informational condition | À distinguer du contenu désactivé. | | Neutral | Unclassified neutral condition | Disponible lorsqu’aucune évaluation de l’état ne s’applique. | ### Hiérarchie des bordures | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --theme-color-hard-bdr | Strong solid boundary | Séparation marquée. | | --theme-color-std-bdr | Standard control boundary | Contrôle de saisie ou de sélection. | | --theme-color-soft-bdr | Card boundary | Utilisé pour l’inspecteur du carnet. | | --theme-color-weak-bdr | Region boundary | Séparer délicatement les grandes zones. | | --theme-color-x-weak-bdr | Very subtle boundary | Séparation discrète. | | --theme-primary-bdr-1 | Complete border value | À utiliser comme bordure : var(--theme-primary-bdr-1), et non comme couleur. | ### Rôles typographiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Headings | H1 through H6 | Hiérarchie typographique du document. | | Body | Multiline reading | Notes d’inspection et explications. | | Label | Single-line component text | Commandes et champs courts. | | Display | Single-line KPI presentation | Compteurs ; pas des paragraphes. | | Code | Code and technical syntax | Exemples ou identifiants API, le cas échéant. | ### Capture d’Event List API | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | IxEventList.itemHeight | S \| L \| number; default S | Utiliser L pour le titre et les métadonnées de l’exemple. | | IxEventList.compact | boolean; default false | Le mode compact est sélectionné explicitement. | | IxEventList.chevron | boolean; default false | Afficher l’indicateur de navigation. | | IxEventList.animated | boolean; default false | Éviter les mouvements inutiles dans un journal statique. | | IxEventListItem.itemColor | string | Expression des couleurs du thème CSS. | | IxEventListItem.selected | boolean; default false | Contrôlé par l’identifiant de l’enregistrement sélectionné. | | IxEventListItem.variant | outline \| filled; default outline | Choix de présentation. | | IxEventListItem.disabled | boolean; default false | Désactiver uniquement si l’interaction n’est pas disponible. | | itemClick | Custom event | onItemClick du composant React sélectionne l’enregistrement. | ## Guide complet du système de design Siemens iX Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Événements industriels aux états de vérification et de résolution distincts — système de design Siemens iX ### Un carnet, pas un panneau de commande de machine > L’exemple fonctionnel est un carnet fictif consacré aux équipements. Trois enregistrements conservent leur gravité d’origine tandis qu’un état local de vérification distinct indique ce que le lecteur a examiné. Cette distinction est essentielle à la composition : sélectionner une ligne, lire une note et résoudre un problème matériel sont trois opérations différentes. L’aperçu permet d’effectuer les deux premières et ne prétend pas commander un système en temps réel. Event List est un meilleur point de départ que des cartes décoratives : son état sélectionné, son marqueur de gravité et son chevron rendent les enregistrements répétés faciles à parcourir au sein d’une collection navigable. L’inspecteur accueille les textes plus longs en dehors de la ligne. Aucun flux de télémétrie factice ni notification de réussite ne prétend qu’une alarme a été levée. Consultez la spécification associée ## Rôles de couleur du système de design Siemens iX pour les significations opérationnelles ### Associer les marqueurs à des couleurs de lecture Le système de couleurs distingue les couches d’arrière-plan opaques des remplissages semi-transparents des composants. L’apparence d’un remplissage ne peut pas être évaluée indépendamment de la surface située en dessous. Dans le code natif, utilisez les variables réelles du thème plutôt que de recopier une valeur hexadécimale de capture d’écran dans chaque ligne. Les textes standard et atténués répondent à des priorités de lecture différentes. Le texte faible est destiné aux éléments désactivés ; un horodatage nécessaire à une enquête ne devrait donc pas automatiquement utiliser ce rôle. Pour le texte de premier plan d’une erreur, mieux vaut utiliser le rôle dédié au texte d’alarme que de réemployer aveuglément une couleur de remplissage d’état. - Afficher le mot « Alarme », « Avertissement » ou « Info » à côté du bord coloré. - Conserver le marqueur d’alarme après une vérification locale ; la vérification ne modifie pas l’état d’origine. - Réservez le style sélectionné à l’état de navigation afin de distinguer clairement la gravité de la sélection. Consultez la spécification associée ## Typographie du système de design système de design Siemens iX : distinguer les notes des libellés ### Utilisez les formats plutôt qu’une échelle de pixels supposée iX répartit la typographie en catégories : titres, corps de texte, libellés, affichage et code. Les notes d’inspection nécessitent le comportement multiligne du corps de texte ; un grand nombre peut relever de l’affichage ; un court libellé de filtre appartient à la catégorie des libellés. Un style d’affichage n’est pas un moyen pratique d’agrandir toute la description d’un événement. L’exemple documenté ix-typography format="h3" fournit une entrée d’implémentation concrète. Le mixin Sass équivalent typography-h3 prend en charge un élément personnalisé sans qu’il soit nécessaire de recréer ses règles typographiques. L’aperçu utilise délibérément une police système de remplacement et les tailles de texte de l’application ; ces valeurs ne sont pas présentées comme des jetons officiels Siemens. Consultez la spécification associée ## Liste d’événements du système de design système de design Siemens iX : sélection et densité ### Gérez séparément l’identité et l’apparence des éléments L’instantané API expose itemHeight avec les valeurs S, L ou un nombre. L’exemple choisit L, laisse compact à sa valeur par défaut false et active un chevron. Pour un journal en production contenant des titres localisés plus longs, vérifiez que la hauteur choisie permet le retour à la ligne au lieu de supposer que chaque entrée tient comme dans l’exemple. Chaque élément reçoit selected à partir d’une comparaison d’ID et transmet itemClick au gestionnaire onItemClick du composant englobant. L’inspecteur lit le même ID. La sélection visuelle et l’affichage des détails ne peuvent donc pas désigner silencieusement des entrées différentes. Les changements de filtre effacent explicitement l’ID sélectionné. Consultez la spécification associée ## Inspecteur du système de design système de design Siemens iX, adapté aux écrans étroits ### Placez les détails sous la liste des événements La grille à deux colonnes de l’exemple est une mise en page propre à l’application, et non un jeton de grille iX publié. Sur un écran étroit, elle passe sur une colonne, en conservant l’ordre des entrées avant l’inspecteur. L’inspecteur ne crée pas de piège de défilement imbriqué : le lecteur peut faire défiler l’ensemble de l’exemple naturellement. Les métadonnées de l’événement apparaissent sur une deuxième ligne, dans une couleur secondaire lisible. Le filtre reste en dehors des lignes répétées et ne se déplace pas lorsque les entrées changent. Un paragraphe d’état indique le résultat de l’examen local de l’entrée sélectionnée, sans modifier le filtre ni remplacer le titre. Consultez la spécification associée ## Accessibilité du système de design système de design Siemens iX : rendre l’état perceptible sans dépendre de la couleur ni de la précision du pointeur ### Texte, commandes clavier et focus L’aperçu hors ligne utilise des boutons natifs pour les entrées, une liste déroulante avec libellé pour la gravité et une région d’état aria-live pour communiquer le résultat de l’examen. La touche Entrée et la barre d’espace permettent de sélectionner une entrée. La composition native de la bibliothèque utilise les composants enveloppants Event List ; avant d’adopter des modifications personnalisées du focus, testez le comportement clavier et la compatibilité avec les technologies d’assistance de la version installée. Les libellés expriment la distinction métier : « Marquer comme examiné localement », et non « Résoudre l’alarme ». Un état examiné visible accompagne la désactivation de l’action d’examen. La couleur ne porte pas à elle seule toute la signification, et le filtre ne laisse pas une ancienne sélection inaccessible, masquée dans une autre catégorie. Consultez la spécification associée ## Intégration du système de design système de design Siemens iX : relier le package, le thème et l’état local de l’application ### Une séquence d’intégration réfléchie Le bloc de configuration contient les imports des packages, les attributs de thème du document, les propriétés réelles du composant, l’état complet React et CSS de l’application. Le sélecteur de thème est data-ix-color-schema, et non un attribut personnalisé au nom similaire. Dans l’application, verrouillez les versions de core, des composants enveloppants et des icônes afin qu’elles soient compatibles. Le spécimen visuel est une interprétation hors ligne HTML/CSS de ces règles d’interaction. Sa palette bleu marine foncé, ses marges intérieures de 24 pixels et son dessin schématique d’équipement sont des choix propres à l’application. Pour obtenir un rendu natif identique, exécutez l’exemple distinct React avec la feuille de style officielle et examinez les valeurs calculées du thème. 1. Installez core, les composants enveloppants React et les icônes dans un squelette Vite React ; conservez l’élément racine généré. 2. Remplacez main.jsx et style.css par les fichiers fournis, puis choisissez classic ainsi que dark, light ou system sur le document. 3. Sélectionnez une entrée, marquez-la comme examinée, filtrez la liste et vérifiez que la gravité est conservée tandis qu’une sélection masquée est effacée. Consultez la spécification associée ## Exemples de composants du système de design système de design Siemens iX ### Exemple interactif autonome complet Enregistrez le document complet sous index.html et ouvrez-le dans un navigateur. Interprétation indépendante hors ligne HTML/CSS. Palette, police système et dimensions d’application originales ; il ne s’agit pas de l’environnement d’exécution natif d’iX. ``` 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.

``` Référence du code - Le fait de marquer un événement comme examiné ne modifie pas sa gravité et ne résout pas une alarme d’équipement. L’entrée native d’iX présente séparément la sélection dans Event List et les attributs de thème. ### Event List avec panneau d’inspection contrôlé séparément Un ID sélectionné pilote la mise en évidence de l’entrée et l’affichage des détails. L’examen ne fait qu’enregistrer un état local dans le carnet ; la gravité d’origine reste visible. ``` // 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}} ``` Référence du code - Utilisez itemColor pour le marqueur de gravité et un libellé textuel lisible pour indiquer cette gravité. - Modifier le filtre de gravité efface la sélection et évite que l’inspecteur décrive un événement masqué. - Le bouton d’examen local relève de la logique de l’application ; ce n’est pas une prétendue API d’accusé de réception d’alarme iX. ### Une typographie adaptée au thème, sans tailles de police recopiées Utilisez la propriété documentée format ou le mixin Sass au lieu de figer une taille de texte pour tous les thèmes. ``` Inspection record @import "@siemens/ix/scss/mixins/font"; .inspection-title { @include typography-h3; } ``` Référence du code - L’aperçu utilise une police système de remplacement ; il ne distribue pas les polices de marque Siemens. ## Configuration de l’agent IA système de design Siemens iX ### Point de départ de l’implémentation Complétez main.jsx et style.css pour un squelette Vite React avec son élément racine existant. Les composants enveloppants officiels, l’import CSS et les propriétés de Event List sont documentés ; la compilation des packages natifs n’a pas été exécutée ici. L’aperçu intégré est une interprétation indépendante hors ligne. ``` // 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}} ``` ### Un prompt pour votre projet ``` Créez un carnet d’événements Siemens iX à l’aide des propriétés Event List vérifiées et des attributs de thème du document présentés dans ce guide. Maintenez la gravité indépendante de la sélection et de l’examen local. Dans la version native, utilisez les couleurs sémantiques du thème. Ne laissez jamais entendre qu’une action dans le carnet résout une alarme physique. Attribuez un libellé aux filtres, rendez les lignes accessibles au clavier et empilez l’inspecteur sur les écrans étroits. ``` ## Sources et périmètre du système de design système de design Siemens iX Guide OpenDesign indépendant. Les données d’événements et l’illustration du matériel sont fictives. Le style de l’aperçu est une interprétation originale ; l’exemple React distinct utilise iX API, conformément à la documentation. Aucune connexion à une machine, aucune télémétrie ni aucun accusé de réception en direct ne sont implémentés. - Installation de React Packages, CSS et attributs de thème. - Aperçu des propriétés du composant API Propriétés et événements réels. - Fondamentaux des couleurs Rôles des surfaces, de la lecture et des états. - Typographie Catégories de texte et fonctions correspondantes. - Mise en œuvre de la typographie Format et point d’entrée Sass. - Bordures Hiérarchie des limites. - Liste des événements Exemples de composants et variations de densité. ## Ressources associées au système de design Siemens iX ### Sprout Social Seeds Examinez les véritables tokens publics de Seeds pour les couleurs, l’espacement, la typographie des produits et les bordures dans une file complète de révision éditoriale, avec sélection mixte, états vides après filtrage et annulation. ### SumUp Circuit Un guide Circuit avec des tokens sémantiques exacts, des propriétés natives de validation, un éditeur complet de fiches marchand et un aperçu illustré côté client. ### TDesign Créez un éditeur de règles compact API avec TDesign React : des rôles de thème concrets, son échelle de tailles par incréments de deux pixels, l’enregistrement des champs Form et une composition Table typée. - [Référence de mise en œuvre](https://ix.siemens.io/docs/components/event-list/code) - [Source](https://ix.siemens.io/docs/home/installation/react) - [Source](https://ix.siemens.io/docs/styles/colors) - [Source](https://ix.siemens.io/docs/styles/borders) - [Source](https://ix.siemens.io/docs/styles/typography/guide) - [Source](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Consultez la spécification associée](https://ix.siemens.io/docs/components/event-list/code) - [Consultez la spécification associée](https://ix.siemens.io/docs/styles/colors) - [Consultez la spécification associée](https://ix.siemens.io/docs/styles/typography/code) - [Consultez la spécification associée](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Consultez la spécification associée](https://ix.siemens.io/docs/guidelines/accessibility/code) - [Consultez la spécification associée](https://ix.siemens.io/docs/home/installation/react) - [Référence du code](https://ix.siemens.io/docs/components/event-list/code) - [Référence du code](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Référence du code](https://ix.siemens.io/docs/styles/typography/code) - [Installation de React Packages, CSS et attributs de thème.](https://ix.siemens.io/docs/home/installation/react) - [Aperçu des propriétés du composant API Propriétés et événements réels.](https://raw.githubusercontent.com/siemens/ix/main/packages/core/component-api.json) - [Fondamentaux des couleurs Rôles des surfaces, de la lecture et des états.](https://ix.siemens.io/docs/styles/colors) - [Typographie Catégories de texte et fonctions correspondantes.](https://ix.siemens.io/docs/styles/typography/guide) - [Mise en œuvre de la typographie Format et point d’entrée Sass.](https://ix.siemens.io/docs/styles/typography/code) - [Bordures Hiérarchie des limites.](https://ix.siemens.io/docs/styles/borders) - [Liste des événements Exemples de composants et variations de densité.](https://ix.siemens.io/docs/components/event-list/code)