كيفية تطبيق CSS ديناميكيًا في Svelte

كنت بحاجة إلى تطبيق البعض بشكل ديناميكيCSSخصائص عنصر ، باستخدامSvelte، عندما كان لأحد المتغيرات قيمة معينة.

كان أبسط حل وجدته هو إضافة فئة HTML عندما يكون ملفselectedكانت القيمة المتغيرةtrue، ثم كتبت بعض CSS التي استهدفت هذا العنصر بالفئة:

<style>
  /* ...other CSS... */
  span.cell.selected {
    outline-color: lightblue;
    outline-style: dotted;
  }
</style>
<span class=“cell {selected === true ? ‘selected’ : ‘’}”>
{value}
</span>

هذا النوع من الحاجة شائع جدًا لدرجة أن Svelte أضاف القدرة على ربط اسم الفئة بقيمة متغيرة:

<span class="cell" class:selected="{selected}">
  {value}
</span>

وبطريقة أكثر إيجازًا ، باستخدام تدوين الاختصار:

<span class="cell" class:selected>
  {value}
</span>

تحميل مجانيكتيب Svelte

كيفية تطبيق CSS ديناميكيًا في Svelte

المزيد من البرامج التعليمية svelte: