استفاده از Components و Slots در لاراول

گردآوری و تالیف : رضا جمال زاده
تاریخ انتشار : 16 مهر 1398
دسته بندی ها : لاراول

 کامپوننت‌ها در قالب لاراول زمان مورد نیاز برای توسعه اپلیکیشن را کاهش می‌دهد. این کامپوننت‌ها به ما برای ساخت اپلیکیشن‌های عالی و مناسب کمک فراوانی می‌کند.

 ایده ایجاد کامپوننت در قالب از VueJs الهام گرفته شده است تا المنت‌های html را به قسمت‌های منعطف‌تر با قابلیت استفاده مجدد تقسیم کند.

یک کامپوننت در واقع یک گروه از المنت‌هایی است که از آن‌ها می‌توان بارها و بارها استفاده کرد. به عنوان مثال شما می‌خواهید یک دکمه بسازید و از آن در قسمت‌های مختلفی از اپلیکیشن خود چند بار استفاده کنید، بنابراین برای حل این مشکل ما یک کامپوننت دکمه می‌سازیم و به لاراول می‌گویم که هر وقت که می‌خواستیم از آن کامپوننت استفاده کنیم آن را بگیرد.

ایجاد یک کامپوننت

 فرض کنید می‌خواهیم یک کامپوننت هشدار بوت استرپ را ایجاد کنیم که بتوانیم این کامپوننت را در موارد مختلف فراخوانی کنیم. پس به پوشه resources/views/ رفته و یک پوشه به نام components را ایجاد می‌کنیم. در ادامه ما یک فایل به نام alert.blade.php را در این پوشه ایجاد کرده و کدهای زیر را به آن اضافه می‌کنیم:

<div class="alert alert-danger">
    <h4 class="alert-title">Error</h4>
    <p>{{ $slot }}</p>
</div>

همانطور که در بالا می‌بینید ما تلاش می‌کنیم تا متغیر $slot را مانند یک مکان برای جایگزینی قرار دهیم. هر مقداری که می‌خواهیم چاپ کنیم به این متغیر منتقل می‌شود.

استفاده از کامپوننت 

 در ادامه به توضیح اینکه چطور از کامپوننتی که ایجاد کرده‌ایم، استفاده کنیم می‌پردازیم. ابتدا به سراغ فایل view که کامپوننت را می‌خواهیم در آن اجرا کنیم می‌رویم و کد زیر را برای فراخوانی کامپوننت هشدار به آن اضافه می‌کنیم:

@component('components.alert')
    This is a dummy message, just for testing purpose.
@endcomponent

با استفاده از دایرکتیو @component ، ما کامپوننت هشداری که پیش‌تر ایجاد کردیم را مورد استفاده قرار می‌دهیم.

ایجاد کامپوننت‌هایی با قابلیت استفادی مجدد

 همانطور که می‌بینید، کامپوننتی را که ایجاد کردیم قابل استفاده مجدد نیست. این کامپوننت تقریباً مشابه با یک partials است که ما آن را ایجاد کرده‌ایم و با دایرکتیو @include آن ‌را به view خود اضافه کرده‌ایم. فرض کنید، می‌خواهیم یک کامپوننت داینامیک هشدار ایجاد کنیم که بتوانیم از انواع خطر، موفقیت و هشدار آن استفاده کنیم. بنابراین ما مجبور هستیم که کلاس و عنوان این کامپوننت هشدار را قابل استفادی مجدد کنیم.

 برای این کار ما دو متغیر $class و $title را در کامپوننت خود مانند زیر تعریف می‌کنیم:

<div class="alert alert-{{ $class }}">
    <h4 class="alert-title">{{ $title }}</h4>
    <p>{{ $slot }}</p>
</div>

در ادامه ما از چندینslots  در کامپوننت خود استفاده می‌کنیم، بنابراین به فایل view که کامپوننت در آن استفاده شده است می رویم و بعد آن را مانند زیر تغییر می‌دهیم:

@component('components.alert')
    @slot('class')
        success
    @endslot
    @slot('title')
        Success Message
    @endslot
    This is a success message, just for testing purpose.
@endcomponent

در کد بالا برای دو متغیر $class و $title مقادیر مورد نظر را قرار داده‌ایم. حالا اگر شما به فایل view خود در مرورگر نگاه کنید شما یک هشدار از نوع موفقیت (success alert) را خواهید دید، به همین ترتیب شما می‌توانید از کامپوننت‌هایی مانند این کامپوننت برای انواع مختلفی از پیام‌ها استفاده کنید مانند زیر:

@component('components.alert')
    @slot('class')
        warning
    @endslot
    @slot('title')
        Warning Message
    @endslot
    This is a warning message, just for testing purpose.
@endcomponent

در کد بالا یک کامپوننت هشدار از نوع warning ساخته شده و پیاده سازی آن نیز به همان صورت قبل خواهد بود.

 نتیجه‌گیری

 کامپوننت‌ها در قالب لاراول یک راه خوب برای ایجاد المنت‌های html قابل استفاده مجدد هستند. در این‌جا ما به شما ساخت یک کامپوننت خیلی ساده را نشان دادیم، اما شما می‌توانید انواع پیچیدتری از این کامپوننت‌ها را با استفاده از کامپوننت‌های قالب لاراول بسازید.

منبع

مقالات پیشنهادی

  • استفاده از api Asana در لاراول

    اخیرا پروژه‌ای را شروع کردم که از API یک ابزار مدیریت پروژه به نام Asana استفاده می‌کند. پس تصمیم گرفتم معرفی کوتاهی برای هر کسی که می‌خواهد از آن است...

    عرفان کاکایی
  • استفاده از CDN در پروژه های لاراولی

    همینطور که میدونید امروزه برای افزایش سرعت بارگذاری صفحات وبسایت و همچنین بهبود تجربه کاربری از CDN ها استفاده میشه. در این مقاله می خواهیم به بررسی ا...

    امیررضا سیستانه ای
  • 10 تا از بهترین helper های لاراول برای استفاده

    لاراول شامل توابع مختلف کمکی یا helper هست.در لاراول تعداد زیادی تابع کمکی وجود دارد که شما میتونید با استفاده ازشون کارتون رو راحت تر و سریعتر کنید....

    امیررضا سیستانه ای
  • استفاده از Bootstrap Notification در لاراول 5

    ما معمولا بعد از هر عملی مثل حذف آیتم ها احتیاج به یک notification popup داریم که پیامی شبیه "آیتم مورد نظر حذف شد" داریم, همین کار در زمینه ساخت و آپ...

    امیررضا سیستانه ای