Campo colore

Il campo color memorizza un valore colore controllato all'interno di una riga di repeater.

Ideale per

• colori dei badge
• campioni di accento
• valori della legenda del grafico
• semplici token visivi per elemento

Esempio di schema

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

Utilizzo nel template

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

Esempio variante:

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

Quando usarlo

Usa color quando ogni elemento ripetuto necessita di un valore visivo leggero che gli editor possano controllare in modo sicuro.

Quando non usarlo

Non usare color quando:

• il colore dovrebbe essere imposto globalmente tramite design token
• il valore dovrebbe essere scelto da un piccolo insieme di nomi invece di un input colore libero

Usa select o un sistema di styling condiviso invece.

Note tecniche

• mantieni color all'interno di strutture ripetute controllate, non come sostituto dei design token globali
• usalo quando la variazione a livello di elemento è intenzionale e limitata
• preferisci varianti nominate tramite select quando la coerenza è più importante della scelta libera del colore
• valuta l'impatto sull'accessibilità prima di fare affidamento solo sul colore per trasmettere significato

Voci correlate

• Ripetitore
• Selettore
• Intervallo