snippets الافتراضية والمسمّاة
وفّر snippets احتياطية وسمِّ فتحات snippets المتعددة في المكوّن.
snippets الافتراضية والمسمّاة درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
المقطع الافتراضي
يصبح المحتوى الموضوع داخل وسمَي المكوّن المقطعَ الافتراضي، ويمكن الوصول إليه عبر children.
<Card>
<p>Inside the card</p>
</Card>داخل المكوّن
صيّر المحتوى الافتراضي باستخدام خاصية children.
let { children } = $props();
<div class="card">
{@render children()}
</div>المقاطع المسمّاة
مرّر مقاطع متعددة بالاسم باعتبارها خصائص.
<Card>
{#snippet header()}<h2>Title</h2>{/snippet}
{#snippet body()}<p>Text</p>{/snippet}
</Card>استلام المقاطع المسمّاة
عرّف كل مقطع مسمّى باعتباره خاصية.
let { header, body } = $props();
{@render header()}
{@render body()}المحتوى البديل
وفّر محتوى بديلًا افتراضيًا باستخدام الشروط العادية.
{#if header}{@render header()}{:else}<h2>Default</h2>{/if}أمان الأنواع
حدّد نوع كل معامل مقطع صراحةً للحصول على دعم من بيئة التطوير.
استبدال الفتحات المسمّاة
تستبدل المقاطع نمط الفتحات المسمّاة من Svelte 4، مع توفير إمكانات أكبر.
المحتوى الافتراضي
لا تحتوي المقاطع على محتوى بديل مضمّن؛ استخدم {#if لهذا الغرض.
أنماط التركيب
اجمع بين المقاطع الافتراضية والمسمّاة لإنشاء تصميمات مكوّنات عديمة الواجهة.
تلميح للترحيل
عند الترحيل، حوّل كل فتحة مسمّاة إلى خاصية مقطع مسمّى.
استنتاج الأنواع في TypeScript
ينشئ Svelte 5 أنواع Snippet تلقائيًا من خصائص المكوّن.
اختبار سريع
ما الذي يحلّ محل الفتحات المسمّاة في Svelte 5؟
مراجعة
يستخدم المحتوى الافتراضي مقطع children؛ أما المقاطع المسمّاة فهي خصائص صريحة تُصيّر باستخدام @render.
الأسئلة الشائعة
هل درس «snippets الافتراضية والمسمّاة» مجاني؟
نعم — نص درس «snippets الافتراضية والمسمّاة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «snippets الافتراضية والمسمّاة»؟
وفّر snippets احتياطية وسمِّ فتحات snippets المتعددة في المكوّن. تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «snippets الافتراضية والمسمّاة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- $props() للخصائص ذات الأنواع
- {#snippet} و {@render}
- تمرير snippets كخصائص
- snippets الافتراضية والمسمّاة