Dashboard Widget
Widget de chiffres qui lit la largeur de sa propre case : empilé quand elle est étroite, en deux colonnes, puis sur une ligne avec un mini-histogramme dès 300 px.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0748-root se déclare conteneur (container: dwg / inline-size) et prend toute la largeur de son parent. Les règles @container dwg comparent cette largeur à deux seuils : la fenêtre du navigateur n'intervient jamais. Le même widget peut donc s'afficher large dans le contenu principal et étroit dans une colonne latérale de la même page.
Sous 240 px, les quatre chiffres de .dwg-stats s'empilent sur une colonne. De 240 à 299 px, ils passent en grille de deux. À partir de 300 px, ils s'alignent sur quatre colonnes et la rangée .dwg-chart (sept barres dont la hauteur est écrite en style="height:…%") apparaît sous les chiffres.
Aucun JavaScript : tout tient dans le CSS. Le changement de disposition est immédiat (un nombre de colonnes ne s'interpole pas) et rien ne bouge en continu, ce qui rend le widget neutre vis-à-vis du réglage « réduire les animations ».
Accessibilité
- Texte réel : titre en
<h4>, chaque chiffre et son libellé sont du texte lu dans l'ordre (valeur puis libellé). Adaptez le niveau de titre à votre page. - Histogramme décoratif :
.dwg-chartportearia-hidden="true"car ses barres n'ont ni valeurs ni légende. Si elles portent une information, ajoutez un résumé en texte à côté du widget. - Contraste : libellés en blanc à 55 % sur fond
#0a0a0f, chiffres en blanc pur ; la pastille verte#10b981sur son fond teinté reste lisible en petite taille. - Clavier et toucher : rien à activer, le widget n'a aucun élément interactif. Le changement de colonnes vient de la largeur, il fonctionne de la même façon au doigt et sur ordinateur.
- Mouvement : aucune transition ni animation dans le code, rien à couper sous
prefers-reduced-motion.
Compatibilité navigateur
Requêtes de conteneur en CSS seul (Chrome 105, Firefox 110, Safari 16 d'après @mdn/browser-compat-data 8.1.8). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : 1 colonne à 200 px, 2 colonnes à 250 px, 4 colonnes et histogramme à 300 et 600 px ; aucun débordement à 390 px de page ; deux copies côte à côte gardent chacune leur disposition.
Un navigateur sans @container garde la disposition de base : chiffres empilés, histogramme masqué. Le contenu reste complet et lisible.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0748-root">
<div class="dwg-card">
<div class="dwg-head"><h4>…</h4><span class="dwg-badge">…</span></div>
<div class="dwg-stats">
<div class="dwg-stat"><span class="dwg-stat-val">…</span><span class="dwg-stat-label">…</span></div>
<!-- 4 chiffres -->
</div>
<div class="dwg-chart" aria-hidden="true"><span class="dwg-bar" style="height:40%"></span><!-- 7 barres --></div>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Seuils (CSS — @container dwg (min-width: 240px) et (min-width: 300px)) |
240 px → 2 colonnes, 300 px → 4 colonnes + histogramme | Déplacez les deux valeurs pour l'adapter à vos libellés : un libellé long demande un seuil 4 colonnes plus haut (360 px par exemple). |
Nom du conteneur (CSS — container: dwg / inline-size) |
dwg |
Renommez-le dans la déclaration et dans les deux @container si votre page utilise déjà ce nom. |
Chiffres et libellés (HTML — .dwg-stat-val, .dwg-stat-label) |
4 chiffres d'exemple neutres | Remplacez-les par vos valeurs ; avec trois ou cinq chiffres, changez aussi repeat(4, 1fr) dans le palier de 300 px. |
Barres de l'histogramme (HTML — style="height:…%" sur .dwg-bar) |
7 barres de 40 à 90 % | Chaque pourcentage est la hauteur d'une barre dans une rangée de 40 px ; ajoutez ou retirez des <span>, elles se partagent la largeur. |
Couleurs (CSS — .dwg-bar, .dwg-badge, fond de .fx-0748-root) |
Dégradé #8b5cf6 → #a78bfa, pastille #10b981, fond #0a0a0f |
Changez le dégradé des barres et la couleur de la pastille ; pour un fond clair, inversez aussi la couleur des chiffres. |
Titre (HTML — <h4> dans .dwg-head) |
« Analytics » | Changez le texte et, si besoin, le niveau de titre ; le style suit tant que la balise reste dans .dwg-head. |
FAQ
aria-hidden seulement si vous ajoutez un texte qui dit ce que montrent les barres.
