انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #5 من درس: مكونات Blade الحديثة وخصائص Props والفتحات Slots

Default and Named Component Slots الفتحات الافتراضية والمسماة Slots

تصميم عناصر واجهة قابلة لإعادة الاستخدام عبر مكونات Blade الحديثة وتمرير الخصائص @props ودمج السمات والفتحات .
1 صفوف تعليمية
إطار العمل Laravel
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تستقبل المكونات محتوى HTML المكتوب بين وسمي البداية والنهاية عبر المتغير التلقائي $slot. وعندما يحتاج المكون إلى عدة مناطق محتوى منفصلة مثل نافذة منبثقة لها عنوان وجسم وتذييل، نستخدم الفتحات المسماة

  • الفتحة الافتراضية (Default $slot): تستقبل المحتوى الأساسي الموضوع داخل وسم المكون مباشرة.
  • الفتحات المسماة (<x-slot:name>): توجه كتل HTML مخصصة إلى متغيرات مسماة مثل $header و$footer.
  • فحص امتلاء الفتحة (isEmpty / isset): يتيح إخفاء غلاف الرأس أو التذييل إذا لم يمرر المستدعي محتوى لهما.
PHP 
<x-modal>
    <x-slot:title>Confirm Deletion</x-slot:title>
    <p>Are you sure you want to remove this record?</p>
    <x-slot:footer>
        <button class="btn-danger">Delete</button>
    </x-slot:footer>
</x-modal>

جميع فقرات هذا الدرس (مكونات Blade الحديثة وخصائص Props والفتحات Slots)