e-Shared-32

Panneaux d’information unifiés

Un seul moteur visuel rend la fiche d’apprentissage métier et les détails fonctionnels.

Contrat commun

Les deux panneaux partagent la même anatomie, les mêmes sections, les mêmes espacements et le même responsive. Seuls leur rôle, leur libellé et leur contenu changent.

<aside class="shared-info-panel information-panel"
       data-shared-info-panel="learning|details">
  <header class="shared-info-panel-header">…</header>
  <div class="shared-info-panel-inner">
    <section class="information-panel-section">…</section>
  </div>
</aside>

Démonstration harmonisée

Contenu central

Sur ordinateur, le contenu reste visible entre les deux panneaux. Sur mobile, les informations s’ouvrent en plein écran avec deux onglets.

Contrat de données commun

const root = document.querySelector('[data-shared-info-mode]');
root.sharedInformationMode.setContent({
  learning: {
    eyebrow: 'Fiche d’apprentissage métier',
    title: 'Comprendre le métier et cet écran',
    subtitle: 'Pour les fondateurs et démonstrateurs.',
    sections: [{ title: 'Ce qu’il faut retenir', status: 'confirmed', content: ['Idée 1', 'Idée 2'] }]
  },
  details: {
    eyebrow: 'Détails fonctionnels',
    title: 'Plan d’enquête',
    subtitle: 'Écran 7 sur 24',
    sections: [{ title: 'Résultat attendu', content: 'Plan validé et partagé.' }]
  }
});

Les contenus HTML historiques restent compatibles. Shared normalise automatiquement les alias viewer-context-header, viewer-context-body et viewer-context-card.