Composant · Données

ScoreCard

Stable

Carte de score : un titre, une notation symbolique (étoiles pour la valeur, croix pour la complexité) et un score chiffré. Le type value emploie un accent succès, le type complexity un accent avertissement.

Exemples

Une note de valeur (étoiles), une note de complexité (croix) et un score sur dix avec unité personnalisée.

Scores

Valeur métier

4.2 points

Complexité

2.5 points

Maturité

7.0 pts

Voir le code (Svelte)

<div class="card-demo-row">
  <ScoreCard title="Valeur métier" score={4.2} stars={4} type="value" />
  <ScoreCard title="Complexité" score={2.5} stars={3} type="complexity" />
  <ScoreCard
    title="Maturité"
    score={7}
    stars={7}
    max={10}
    unit="pts"
    type="value"
  />
</div>

API du composant

Prop	Type	Défaut	Description
`title`	`string`	requis	Titre de la métrique notée.
`score`	`number`	requis	Score affiché (une décimale).
`stars`	`number`	requis	Nombre de symboles pleins (0..max).
`max`	`number`	`5`	Nombre total de symboles.
`type`	`"value" \| "complexity"`	`"value"`	Étoiles (value) ou croix (complexity).
`unit`	`string`	`"points"`	Libellé d'unité du score.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Taille de la carte.

Tokens CSS

Variable CSS	Description
`--st-component-card-background`	Fond de la carte (défaut : surface-raised).
`--st-semantic-feedback-success`	Accent du score / étoiles (type value).
`--st-semantic-feedback-warning`	Accent du score (type complexity).
`--st-semantic-border-default`	Symboles vides (non remplis).