Soy un principiante tanto en Svelte como en Tailwind y quiero evitar un problema XY, así que este es mi objetivo:
Genero filas de una tabla con un bucle #each en Svelte. (6 valores por fila). Ahora quiero colorear condicionalmente el fondo de esta fila en función de un valor (la carga de la batería).
Mi idea era representar condicionalmente diferentes etiquetas en función de este valor. Me gusta esto:
{#each allLZ as {id, name, mac, status, lastcontact, battery}, i} {#if battery > 70} <tr class="bg-green-50"> {:else if battery > 40} <tr class="bg-yellow-50"> {:else } <tr class="bg-red-50"> {/if}Pero esto no funciona ya que Svelte quiere que las etiquetas se cierren para que sean elementos completos, no código fragmentado, lo suficientemente justo.
Entonces, ¿hay una buena manera de cambiar el color de fondo del viento de cola en función de un valor desempaquetado en #each ?
Creo que deberías cambiar el enfoque para ese problema. Podría usar la directiva de elemento class:name .
Una directiva class: proporciona una forma más corta de alternar una clase en un elemento.
Ejemplo
{#each allLZ as {id, name, mac, status, lastcontact, battery}, i} <tr class:bg-red-500={battery < 39} class:bg-yellow-500={battery >= 40 && battery < 70} class:bg-green-500={ battery >= 70}> <td>{name}/{battery}</td> </tr> {/each}Recomendaría tener una función que le devuelva el color de fondo de acuerdo con el valor de la batteryValue como:
let getBatteryColor = (batteryValue) => { if (batteryValue > 70) return 'green' if (batteryValue > 40) return 'yellow' return 'red' }... y luego consumirlo en la clase del nodo:
<tr class={`bg-${getBatteryColor(batteryValue)}`}> <td>...</td> </tr>Echa un vistazo a la REPL .