Composant · Données

ColorScaleBar

Stable

Barre rendant une échelle de couleur continue à partir d'une liste de stops arbitraires (colors, ≥2), via un linear-gradient(…) en ligne — sa raison d'être. Pensée pour documenter les échelles séquentielles, divergentes ou OKLab : libellés d'extrémités min/max et orientation au choix. Le style propre (rayon, bordure, typo) reste token-only.

Exemples

Échelle séquentielle, échelle divergente et une barre verticale.

Échelles de couleur

Séquentielle (intensité)

100

Divergente (écart)

−1

Verticale

max

min

Voir le code (Svelte)

<div class="scalebar-demo-col">
  <ColorScaleBar
    label="Séquentielle (intensité)"
    colors={["#eff6ff","#60a5fa","#1d4ed8","#172554"]}
    min="0"
    max="100"
    length={280}
  />
  <ColorScaleBar
    label="Divergente (écart)"
    colors={["#b91c1c","#fca5a5","#f5f5f5","#93c5fd","#1d4ed8"]}
    min="−1"
    max="+1"
    length={280}
  />
  <div class="scalebar-demo-row">
    <ColorScaleBar
      label="Verticale"
      orientation="vertical"
      colors={["#fef3c7","#f59e0b","#7c2d12"]}
      min="min"
      max="max"
      length={140}
    />
  </div>
</div>

API du composant

Prop	Type	Défaut	Description
`colors`	`string[]`	—	Stops du gradient (≥2), rendus en ligne.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Sens de la barre.
`length`	`number`	–	Longueur de la barre en pixels.
`thickness`	`number`	–	Épaisseur de la barre en pixels.
`min` / `max`	`string`	–	Libellés d'extrémités optionnels.
`label`	`string`	–	Libellé accessible de la barre.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

Tokens CSS

Variable CSS	Description
`--st-semantic-border-subtle`	Bordure de la barre.
`--st-radius-sm`	Rayon de la barre.
`--st-colorScaleBar-length` / `--st-colorScaleBar-thickness`	Dimensions par défaut (sinon props length/thickness).