كنت بحاجة إلى تطبيق البعض بشكل ديناميكي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
المزيد من البرامج التعليمية svelte:
- الشروع في العمل مع Svelte - برنامج تعليمي قصير
- كيفية العمل مع الدعائم في Svelte
- كيفية استيراد المكونات في Svelte
- كيفية تصدير الوظائف والمتغيرات من مكون Svelte
- قوالب Svelte: المنطق الشرطي
- كيفية عرض مكون Svelte عند الطلب
- فتحات رشيقة
- كيفية إضافة التعليقات في قوالب Svelte
- Svelte Bindings
- معالجة تحديثات الحالة في Svelte
- جمل رد الفعل في Svelte
- أحداث دورة الحياة الرشيقة
- قوالب Svelte: الحلقات
- حل الوعود في قوالب Svelte
- العمل مع الأحداث في Svelte
- إدارة الحالة عبر المكونات في Svelte
- كيفية الوصول إلى معلمة URL في Sapper خارج وحدة البرنامج النصي
- كيفية تطبيق CSS ديناميكيًا في Svelte
- كيفية إعادة التوجيه إلى عنوان URL في Sapper
- كيفية محاكاة حلقة for في قوالب Svelte