Concevoir de meilleurs tableaux : utiliser des popovers pour des données supplémentaires

Lorsque vous travaillez avec de grands tableaux de données, l'affichage simultané de toutes les informations disponibles peut souvent rendre le tableau écrasant et difficile à lire. Par conséquent, il est courant de masquer les informations secondaires et d’utiliser un modèle de conception pour révéler plus de détails uniquement lorsque cela est nécessaire.

La conception de tables de données est essentielle à une bonne expérience utilisateur (UX), en particulier lors de la gestion de données volumineuses ou complexes. Selon des articles comme Pourquoi l'UX de la conception de tables est-elle importante ? et Concevoir de meilleurs tableaux de données, il existe un consensus sur trois façons principales de gérer ces détails cachés :

• Lignes extensibles – Développe les lignes du tableau en ligne pour révéler des détails supplémentaires.
• Vues modales – Ouvre une boîte de dialogue modale avec des informations plus détaillées.
• Vue rapide (barre latérale) – Affiche des détails supplémentaires dans une barre latérale qui peut glisser depuis le bord.

Dans cet article, je vais vous montrer comment configurer ces trois options de manière flexible, afin que vous puissiez basculer entre elles sans avoir besoin de réécrire le balisage du tableau.

Pour cela, nous utiliserons des popovers, qui sont idéaux pour joindre facilement des informations directement à des lignes spécifiques.

---

Configuration de la table de base

Pour commencer, nous utiliserons le même balisage et les mêmes styles que dans le Guide des tables de style :

Dans la dernière cellule, après le contenu du texte, nous avons ajouté un simple bouton (l'icône vient de tabler), qui déclenchera un popover :

<button type="button" popovertarget="p1"></button>

Ensuite, nous ajoutons le popover quelque part dans le document pour afficher le contenu supplémentaire lorsqu'il est déclenché :

<div id="p1" popover>
  ... content ...   
</div>

Styliser le Popover

Pour le style du popover, nous utiliserons le modèle du code Steal this popover d'Adam Argyle. Ce modèle comprend des transitions fluides pour l'apparition et la disparition du popover :

.selector {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      inset .5s,
      scale .5s,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: #0002;
  }

  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

Vue modale

Pour la disposition modale, nous ajouterons une classe de modificateur --modal pour définir la taille du modal et le centrer sur l'écran :

&.--modal {
  block-size: calc(100dvh - 2em);
  inline-size: calc(100dvw - 2em);
  inset-block-start: 1em;
  inset-inline: 1em;
  transform-origin: 50% 50%;

  @starting-style {
    &:popover-open{
      scale: 0;
    }
  }
}

---

Aperçu rapide (barre latérale)

Pour créer une barre latérale d'affichage rapide, nous ajouterons une nouvelle classe de modificateur, --inline-start, au popover. Cette barre latérale glisse depuis le côté de la fenêtre et peut être fermée avec une animation fluide. Voici la configuration :

&.--inline-start {
  --width: clamp(220px, 33vw, 350px);
  block-size: calc(100dvh - 2em);
  inline-size: var(--width);
  inset-block-start: 1em;
  inset-inline: 1em;

  @starting-style {
    &:popover-open {
      inset-inline: calc(0px - var(--width));
    }
  }
  &[popover]:not(:popover-open) { 
    inset-inline: calc(0px - var(--ui-width));
  }
}

Avec cette configuration, le popover glisse depuis la gauche. La ligne &[popover]:not(:popover-open) garantit qu'il ressort une fois fermé.

Nous pouvons appliquer des ajustements similaires pour créer des effets de glissement depuis la droite ou depuis le haut et le bas :

Fin en ligne (--inline-end)

Fin du bloc (--block-end)

---

Lignes extensibles

Et enfin, regardons les lignes extensibles. Contrairement aux modaux et aux barres latérales, les lignes extensibles s'intègrent directement dans la disposition du tableau. Traditionnellement, cette approche implique un avec un couvrant toutes les colonnes et une fonction JavaScript pour basculer sa visibilité.

Mais pouvons-nous réutiliser le popover existant pour développer les lignes en ligne ? Pas directement, mais nous pouvons faire semblant en positionnant le popover pour qu'il apparaisse juste en dessous de la ligne, créant ainsi un effet similaire.

---

Tout d'abord, nous attachons le popover en bas à gauche de la ligne du tableau en définissant le nom de l'ancre sur le et en appliquant le CSS suivant :

<button type="button" popovertarget="p1"></button>

Ensuite, nous avons besoin de deux fonctionnalités qui, malheureusement, sont actuellement Chrome uniquement :

<div id="p1" popover>
  ... content ...   
</div>

La propriété interpolate-size permet au popover de s'animer en douceur jusqu'à sa hauteur finale, tandis que Anchor-size lui permet de correspondre à la largeur de la ligne (ou à la hauteur, en utilisant Anchor-size(height)).

Jusqu'ici, tout va bien, mais la ligne développée couvre les lignes suivantes.

Nous pouvons résoudre ce problème en ajoutant la hauteur du popover à l'extrémité du bloc de remplissage des cellules du tableau dans la ligne développée :

Cool. L'illusion est complète !

Pour animer la hauteur, nous allons ajouter quelques déclarations supplémentaires au CSS :

.selector {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      inset .5s,
      scale .5s,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: #0002;
  }

  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

Automatisation de l'ajustement du rembourrage

Pour éviter de mettre à jour manuellement le remplissage, nous pouvons utiliser un script qui met à jour dynamiquement le remplissage en fonction de la hauteur du popover :

&.--modal {
  block-size: calc(100dvh - 2em);
  inline-size: calc(100dvw - 2em);
  inset-block-start: 1em;
  inset-inline: 1em;
  transform-origin: 50% 50%;

  @starting-style {
    &:popover-open{
      scale: 0;
    }
  }
}

Ce script écoute l'événement bascule du popover, mettant à jour dynamiquement une propriété personnalisée, --row, pour qu'elle corresponde à la hauteur du popover lorsqu'il est ouvert.

---

Démo

Vous pouvez voir une démo sur browser.style/ui/table-expand, où vous trouverez également les styles de démonstration de table d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!