Inline Metrics
Métriques compactes intégrées dans les headers de page, rangées de tableau ou cartes.
Démo
234requêtes/jour↑ 8%
99.7%uptime↑ 0.2%
148ms latence P95↓ 12ms
Usage
html
<BcInlineMetric value="234" unit="requêtes/jour" trend="↑ 8%" trend-dir="up" />
<BcInlineMetric value="99.7%" unit="uptime" trend="↑ 0.2%" trend-dir="up" />
<BcInlineMetric value="148ms" unit="latence P95" trend="↓ 12ms" trend-dir="down" />Props
| Prop | Type | Défaut | Description |
|---|---|---|---|
| value | String | Number | — | Valeur principale (Poppins 700) |
| unit | String | — | Unité affichée en --bc-sub |
| trend | String | — | Texte du trend (ex: '↑ 8%') |
| trend-dir | 'up' | 'down' | 'neutral' | 'neutral' | Couleur du trend |
| size | 'sm' | 'md' | 'lg' | 'md' | Taille de la valeur |
Cas d'usage
Intégré dans un BcPageHeader pour les métriques d'une page de monitoring API :
html
<BcPageHeader title="Connexion API — Monitoring" subtitle="Dernière màj : il y a 30s">
<template #metrics>
<BcInlineMetric value="234" unit="req/jour" trend="↑ 8%" trend-dir="up" />
<BcInlineMetric value="99.7%" unit="uptime" trend="↑ 0.2%" trend-dir="up" />
<BcInlineMetric value="148ms" unit="P95" trend="↓ 12ms" trend-dir="down" />
</template>
</BcPageHeader>