Aller au contenu

Vue · Patron split

Maître-détail

Disponible

Patron Fiori split-view : SelectableList à gauche (lignes SelectableRow sélectionnables) et panneau détail à droite (StructuredList + rangée de KpiCard + mini DataTable). Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

Maître-détail : clients (données mock)

Airbus Group SE

Client actif

Chiffre d'affaires

€1,240,000.00

Factures ouvertes

7

Informations générales

Raison sociale
Airbus Group SE
Numéro client
C-001042
Secteur
Aéronautique & Défense
Contact
Marie Lefebvre
Pays
France

Dernières factures

Factures récentes du client
INV/2026/01422026-06-0142 300 €
INV/2026/01282026-04-1837 100 €
INV/2026/01192026-03-2229 800 €
Voir le code (Svelte) 
<div class="md-shell">
  <aside class="md-master">
    <h3 class="md-master-title">Clients</h3>
    <SelectableList label="Liste des clients" value="airbus">
      <SelectableRow value="airbus" selected>
        <div class="md-row">
          <span class="md-row-name">Airbus Group SE</span>
          <span class="md-row-meta">Aéronautique</span>
        </div>
      </SelectableRow>
      <SelectableRow value="safran">
        <div class="md-row">
          <span class="md-row-name">Safran SA</span>
          <span class="md-row-meta">Aéronautique</span>
        </div>
      </SelectableRow>
      <SelectableRow value="orange">
        <div class="md-row">
          <span class="md-row-name">Orange SA</span>
          <span class="md-row-meta">Télécoms</span>
        </div>
      </SelectableRow>
      <SelectableRow value="thales">
        <div class="md-row">
          <span class="md-row-name">Thales Group</span>
          <span class="md-row-meta">Défense</span>
        </div>
      </SelectableRow>
      <SelectableRow value="atos">
        <div class="md-row">
          <span class="md-row-name">Atos SE</span>
          <span class="md-row-meta">Services IT</span>
        </div>
      </SelectableRow>
    </SelectableList>
  </aside>
  <main class="md-detail">
    <div class="md-detail-head">
      <h2 class="md-detail-title">Airbus Group SE</h2>
      <Badge tone="success">Client actif</Badge>
    </div>
    <div class="md-kpi-row">
      <KpiCard
        label="Chiffre d'affaires"
        value={1240000}
        format="currency"
        delta={0.124}
        deltaFormat="percent"
        tone="category1"
      />
      <KpiCard
        label="Factures ouvertes"
        value={7}
        delta={-2}
        deltaFormat="absolute"
        tone="category2"
      />
    </div>
    <div class="md-detail-section">
      <h3 class="md-detail-subtitle">Informations générales</h3>
      <StructuredList
        bordered
        items={[{"key":"Raison sociale","term":"Raison sociale","value":"Airbus Group SE"},{"key":"Numéro client","term":"Numéro client","value":"C-001042"},{"key":"Secteur","term":"Secteur","value":"Aéronautique & Défense"},{"key":"Contact","term":"Contact","value":"Marie Lefebvre"},{"key":"Pays","term":"Pays","value":"France"}]}
      />
    </div>
    <div class="md-detail-section">
      <h3 class="md-detail-subtitle">Dernières factures</h3>
      <DataTable
        caption="Factures récentes du client"
        columns={[{"key":"ref","label":"Référence","sortable":true},{"key":"date","label":"Date","sortable":true},{"key":"montant","label":"Montant","sortable":true,"align":"end"}]}
        rows={[{"id":"1","ref":"INV/2026/0142","date":"2026-06-01","montant":"42 300 €"},{"id":"2","ref":"INV/2026/0128","date":"2026-04-18","montant":"37 100 €"},{"id":"3","ref":"INV/2026/0119","date":"2026-03-22","montant":"29 800 €"}]}
        size="sm"
      />
    </div>
  </main>
</div>

Composants DS utilisés