LoadBar
@/components/ui/LoadBar
Vannrett søyle som viser MENGDE i forhold til de andre radene i et sett.
Når brukes den
Bruk når spørsmålet er «hvor er det mye» sammenlignet med de andre radene — ikke «hvor mye er det totalt».
max er den høyeste verdien i SETTET (ikke et tak fra domenet) og er derfor påkrevd.
tone settes av kallestedet — komponenten gjetter ikke hva som er «mye» i konteksten.
Ikke bruk til andel av én helhet (0–100 %) — det er Progress.
Eksempler
Rader sammenlignet, alle toner
Tallet står alltid ved siden av søylen — søylen selv er dekorativ (aria-hidden). Bølge 3: sprekere toner — success (teal-700), warning (amber-700) og error (red-700) er nye, default løftet til text-primary.
Januar
2
Februar
5
Mars
7
April
4
Mai
6
Juni
–
{maneder.map(m => (
<LoadBar key={m.navn} value={m.antall} max={hoyesteAntall} tone="accent" />
))}Props
Sveip tabellen for å se hele innholdet
Navn
Type
Default
Beskrivelse
value *
number
—
Denne radens verdi.
max *
number
—
Høyeste verdi i settet — grunnlaget for hvor full søylen er.
tone
'default' | 'accent' | 'success' | 'warning' | 'error'
'default'
Farge, satt av kallestedet ut fra hva som er «mye» i konteksten. 700-skalaen er trygg her — dette er en FLATE, ikke tekst.
className
string
—
Ekstra klasser.