الفتحات الافتراضية لإسقاط المحتوى
ضع عنصر داخل مكوّن لقبول أي محتوى ابنة
الفتحات الافتراضية لإسقاط المحتوى درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ما هي slots
تتيح slots للمكوّنات الأب إدراج markup في مواضع محددة داخل مكوّن الابن.
عنصر slot
ضعوا داخل الابن وسم <slot /> في الموضع الذي يجب أن يظهر فيه المحتوى.
<!-- Card.svelte -->
<div class="card">
<slot />
</div>الاستخدام من المكوّن الأب
ضعوا العناصر الأبناء داخل وسم المكوّن. وستظهر حيث يوجد slot.
<Card>
<p>Hello inside the card!</p>
</Card>قوة التركيب
يتيح لكم هذا النمط إنشاء هياكل تخطيط قابلة لإعادة الاستخدام، مثل البطاقات والنوافذ والصفحات.
عناصر أبناء متعددة
يمكن لأي عدد من العناصر ملء slot الافتراضي.
<Card>
<h1>Title</h1>
<p>Body</p>
</Card>السلاسل النصية البسيطة
يمكنكم أيضًا تمرير نص عادي بوصفه محتوى slot.
<Button>Click me</Button>المحتوى الشرطي
استخدموا {#if} داخل المكوّن الأب لاختيار المحتوى الذي تريدون إدراجه في slot.
Slots للمكوّنات
يمكن أن يتضمن محتوى slot مكوّنات أخرى بحرية.
<Card>
<Avatar />
<Username />
</Card>التنسيق
يحتفظ المحتوى المُدرج في slot بتنسيقات المكوّن الأب الذي كتبه، لا المكوّن الابن.
التخطيط مقابل المنطق
تُستخدم slots للتخطيط والتركيب، لا لتمرير البيانات. استخدموا props للبيانات.
مخارج slot
يمكن أن يحتوي المكوّن على مواضع slot متعددة (افتراضية ومسمّاة).
تحقق سريع
أين يظهر المحتوى المُدرج في slot؟
مراجعة
استخدموا <slot /> في الابن، ومرّروا العناصر الأبناء بين وسمَي المكوّن الأب لإدراج المحتوى.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «الفتحات الافتراضية لإسقاط المحتوى» مجاني؟
نعم — نص درس «الفتحات الافتراضية لإسقاط المحتوى» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «الفتحات الافتراضية لإسقاط المحتوى»؟
ضع عنصر داخل مكوّن لقبول أي محتوى ابنة تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «الفتحات الافتراضية لإسقاط المحتوى»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الفتحات الافتراضية لإسقاط المحتوى
- الفتحات المسمّاة باستخدام slot="name"
- المحتوى الاحتياطي للفتحات
- التحقق من محتوى الفتحات باستخدام $$slots