Kleurveld

Het color-veld slaat een gecontroleerde kleurwaarde op binnen een repeater-rij.

Beste voor

• kleuren van badges
• accentstalen
• waarden in grafieklegenda
• eenvoudige visuele tokens per item

Schemavoorbeeld

{ "name": "accentColor", "label": "Accent Color", "type": "color" }

Gebruik in sjabloon

{{#each stats as="item"}}
  <span class="stat-dot" style="background-color: {{ item.accentColor }};"></span>
{{/each}}

Variantvoorbeeld:

{{#each badges as="item"}}
  <span class="badge" style="border-color: {{ item.accentColor }};">
    {{ item.label }}
  </span>
{{/each}}

Gebruik het wanneer

Gebruik color wanneer elk herhaald item een lichtgewicht visuele waarde nodig heeft die editors veilig kunnen beheren.

Gebruik het niet wanneer

Gebruik color niet wanneer:

• de kleur wereldwijd moet worden afgedwongen door designtokens
• de waarde moet worden gekozen uit een kleine benoemde set in plaats van een vrije kleurinvoer

Gebruik in plaats daarvan select of een gedeeld stijlingssysteem.

Technische opmerkingen

• gebruik color binnen gecontroleerde herhaalde structuren, niet als vervanging voor globale designtokens
• gebruik het wanneer variatie op itemniveau opzettelijk en beperkt is
• geef de voorkeur aan benoemde varianten via select wanneer consistentie belangrijker is dan vrije kleurkeuze
• beoordeel de impact op toegankelijkheid voordat je alleen op kleur vertrouwt om betekenis over te brengen

Gerelateerd

• Herhaler
• Selectie
• Bereik