التحقق من محتوى الفتحات باستخدام $$slots
افحص $$slots لعرض علامات الغلاف بصورة شرطية عند استخدام فتحة فقط
التحقق من محتوى الفتحات باستخدام $$slots درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
سبب التحقق من slots
قد ترغبون أحيانًا في عرض markup الغلاف (كالحد والترويسة) فقط إذا كان الـslot يحتوي على محتوى.
كائن slots
داخل المكوّن، يكون $$slots كائنًا يحتوي على خاصية لكل slot مملوء.
قيمة صادقة عند الملء
إذا كان للـslot محتوى، فسيكون مفتاحه في $$slots ذا قيمة صادقة.
{#if $$slots.title}<h2><slot name="title" /></h2>{/if}تجنبوا الأغلفة الفارغة
تجاوزوا عرض markup الغلاف عندما يكون الـslot فارغًا للحفاظ على نظافة DOM.
الدمج مع القيم الافتراضية
يمكنكم الاختيار بين عرض المحتوى الاحتياطي وتجاوز الغلاف بالكامل.
الاكتشاف التفاعلي
يتحدّث $$slots تفاعليًا إذا تغيّر محتوى slot بين عمليات العرض.
الاستخدام مع slots متعددة
تحققوا من كل slot مسمّى بشكل مستقل.
{#if $$slots.header || $$slots.footer}...شائع في البطاقات
غالبًا ما تستخدم البطاقات ذات العنوان أو التذييل الاختياري هذا النمط.
مفتاح slot الافتراضي
يظهر الـslot الافتراضي تحت $$slots.default.
{#if $$slots.default}<div class="body"><slot /></div>{/if}TypeScript
يمكن لمستخدمي TypeScript تعريف نوع $$Slots للحصول على الإكمال التلقائي عند استخدام $$slots.
المفاضلات
يضيف ذلك تفرّعًا إلى markup، لكنه ينتج مخرجات أنظف. وهذا يستحق العناء في أنظمة التصميم.
تحقق سريع
ما الذي يتحقق منه $$slots.header؟
مراجعة
استخدموا $$slots.name لاكتشاف ما إذا كان المكوّن الأب قد ملأ slot، وتجاوزوا markup الغلاف عندما لا يملؤه.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «التحقق من محتوى الفتحات باستخدام $$slots» مجاني؟
نعم — نص درس «التحقق من محتوى الفتحات باستخدام $$slots» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «التحقق من محتوى الفتحات باستخدام $$slots»؟
افحص $$slots لعرض علامات الغلاف بصورة شرطية عند استخدام فتحة فقط تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «التحقق من محتوى الفتحات باستخدام $$slots»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الفتحات الافتراضية لإسقاط المحتوى
- الفتحات المسمّاة باستخدام slot="name"
- المحتوى الاحتياطي للفتحات
- التحقق من محتوى الفتحات باستخدام $$slots