Gabarit · CRM / Éditeur

Dashboard 3 panneaux

Disponible

Disposition triptyque : navigation à gauche, contenu central (liste), panneau de contexte à droite (inspecteur / propriétés de l'élément sélectionné). Convient aux apps CRM, éditeur ou data-room où l'utilisateur inspecte un élément sans quitter la liste.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular.

Dashboard 3 panneaux (données mock)

CRM

Comptes

Voir le code (Svelte)

<div class="d3p-shell">
  <Header
    title="CRM"
    navItems={[{"label":"Comptes","href":"#","active":true},{"label":"Contacts","href":"#"},{"label":"Affaires","href":"#"}]}
  />
  <div class="d3p-body">
    <aside class="d3p-nav">
      <SideNav
        items={[{"label":"Comptes","href":"#","active":true},{"label":"Contacts","href":"#"},{"label":"Affaires","href":"#"}]}
        label="Entités"
      />
    </aside>
    <main class="d3p-main">
      <h2 class="d3p-section-title">Comptes</h2>
      <ul class="d3p-account-list" role="listbox" aria-label="Comptes">
        <li
          class="d3p-account-row d3p-account-row--selected"
          role="option"
          aria-selected="true"
        >
          <span class="d3p-account-name">Acme Inc.</span>
          <span class="d3p-account-status">Client actif</span>
        </li>
        <li class="d3p-account-row" role="option" aria-selected="false">
          <span class="d3p-account-name">Globex Corp.</span>
          <span class="d3p-account-status">Prospect</span>
        </li>
        <li class="d3p-account-row" role="option" aria-selected="false">
          <span class="d3p-account-name">Initech SA</span>
          <span class="d3p-account-status">Client inactif</span>
        </li>
      </ul>
    </main>
    <aside class="d3p-context" aria-label="Détails du compte">
      <h3 class="d3p-context-title">Acme Inc.</h3>
      <p class="d3p-context-subtitle">Client actif</p>
      <dl class="d3p-context-dl">
        <dt class="d3p-context-dt">Plan</dt>
        <dd class="d3p-context-dd">Entreprise</dd>
        <dt class="d3p-context-dt">Revenu annuel</dt>
        <dd class="d3p-context-dd">4,2 M$</dd>
        <dt class="d3p-context-dt">Depuis</dt>
        <dd class="d3p-context-dd">2021-03-15</dd>
        <dt class="d3p-context-dt">Responsable</dt>
        <dd class="d3p-context-dd">Marie Dupont</dd>
      </dl>
      <div class="d3p-context-actions">
        <Badge tone="success">Actif</Badge>
      </div>
    </aside>
  </div>
</div>

Composants DS utilisés

Quand l'utiliser

CRM : liste de comptes/contacts + fiche de détail
Éditeur de code ou de contenu avec panneau de propriétés
Data-room : liste de documents + aperçu/métadonnées