نسخه:

قالب های تیغه

معرفی

Blade موتور قالب ساده و در عین حال قدرتمندی است که در لاراول گنجانده شده است. برخلاف برخی از موتورهای قالب PHP، Blade شما را از استفاده از کد PHP ساده در قالب های خود محدود نمی کند. در واقع، تمام قالب‌های Blade در کدهای PHP ساده کامپایل می‌شوند و تا زمانی که اصلاح شوند در حافظه پنهان ذخیره می‌شوند، به این معنی که Blade اساساً سربار صفر را به برنامه شما اضافه می‌کند. فایل های قالب Blade از .blade.php پسوند فایل استفاده می کنند و معمولاً در resources/views دایرکتوری ذخیره می شوند.

نماهای تیغه ممکن است از مسیرها یا کنترلرها با استفاده از view کمک کننده جهانی بازگردانده شوند. البته همانطور که در مستندات نماها ذکر شد ، view داده ها ممکن است با استفاده از آرگومان دوم کمک کننده به نمای Blade ارسال شوند : 

Route::get('/', function () {
    return view('greeting', ['name' => 'Finn']);
});

تیغه سوپرشارژر با Livewire

آیا می خواهید قالب های Blade خود را به سطح بعدی ببرید و به راحتی رابط های پویا بسازید؟ Laravel Livewire را بررسی کنید . Livewire به شما امکان می دهد کامپوننت های Blade را بنویسید که با عملکردهای پویا تقویت شده اند که معمولاً فقط از طریق فریم ورک های فرانت اند مانند React یا Vue امکان پذیر است، و یک رویکرد عالی برای ساخت فرانت اندهای مدرن و واکنشی بدون پیچیدگی ها، رندر سمت مشتری یا مراحل ساخت را ارائه می دهد. بسیاری از چارچوب های جاوا اسکریپت

نمایش داده ها

می‌توانید داده‌هایی را که به نمای Blade ارسال می‌شوند، با قرار دادن متغیر در بریس‌های فرفری نمایش دهید. به عنوان مثال، با توجه به مسیر زیر: 

Route::get('/', function () {
    return view('welcome', ['name' => 'Samantha']);
});

می توانید محتویات متغیر را name به صورت زیر نمایش دهید: 

Hello, {{ $name }}.

عبارات اکو Blade {{ }} به طور خودکار از طریق تابع PHP htmlspecialchars برای جلوگیری از حملات XSS ارسال می شود.

شما محدود به نمایش محتویات متغیرهای ارسال شده به view نیستید. همچنین می توانید نتایج هر تابع PHP را تکرار کنید. در واقع، شما می توانید هر کد PHP را که می خواهید در داخل دستور Blade echo قرار دهید: 

The current UNIX timestamp is {{ time() }}.

کدگذاری موجودیت HTML

به طور پیش فرض، Blade (و e تابع لاراول) موجودیت های HTML را دو برابر می کند. اگر می خواهید رمزگذاری دوگانه را غیرفعال کنید، Blade::withoutDoubleEncoding متد را از boot متد خود فراخوانی کنید AppServiceProvider : 

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Blade::withoutDoubleEncoding();
    }
}

نمایش داده های بدون فرار

به طور پیش فرض، عبارات Blade {{ }} به طور خودکار از طریق تابع PHP htmlspecialchars برای جلوگیری از حملات XSS ارسال می شوند. اگر نمی‌خواهید داده‌های شما از بین بروند، می‌توانید از دستور زیر استفاده کنید: 

Hello, {!! $name !!}.

هنگام بازتاب محتوایی که توسط کاربران برنامه شما ارائه می شود بسیار مراقب باشید. برای جلوگیری از حملات XSS هنگام نمایش داده‌های ارائه‌شده توسط کاربر، معمولاً باید از دستور پرانتز فرار و دوتایی استفاده کنید.

فریم ورک های Blade و JavaScript

از آنجایی که بسیاری از فریم ورک‌های جاوا اسکریپت نیز از پرانتزهای "فرج" برای نشان دادن نمایش یک عبارت معین در مرورگر استفاده می‌کنند، می‌توانید از @ نماد برای اطلاع رسانی به موتور رندر Blade استفاده کنید که یک عبارت باید دست نخورده باقی بماند. مثلا: 

<h1>Laravel</h1>
 
Hello, @{{ name }}.

در این مثال، @ نماد توسط Blade حذف خواهد شد. با این حال، {{ name }} بیان توسط موتور Blade دست نخورده باقی می ماند و به آن اجازه می دهد تا توسط چارچوب جاوا اسکریپت شما ارائه شود.

این @ نماد همچنین ممکن است برای فرار از دستورات Blade استفاده شود: 

{{-- Blade template --}}
@@if()
 
<!-- HTML output -->
@if()

رندر JSON

گاهی اوقات ممکن است یک آرایه را به نمای خود ارسال کنید تا آن را به صورت JSON ارائه کنید تا یک متغیر جاوا اسکریپت را مقداردهی کنید. مثلا: 

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

با این حال، به جای تماس دستی json_encode ، می توانید از Illuminate\Support\Js::from دستورالعمل متد استفاده کنید. متد from همان آرگومان های json_encode تابع PHP را می پذیرد. با این حال، اطمینان حاصل می کند که JSON حاصل به درستی برای گنجاندن در نقل قول های HTML فرار می کند. متد from یک دستور جاوا اسکریپت رشته ای را برمی گرداند JSON.parse که شی یا آرایه داده شده را به یک شی جاوا اسکریپت معتبر تبدیل می کند: 

<script>
    var app = {{ Illuminate\Support\Js::from($array) }};
</script>

آخرین نسخه‌های اسکلت برنامه لاراول شامل یک Js نما است که دسترسی راحت به این قابلیت را در قالب‌های Blade شما فراهم می‌کند: 

<script>
    var app = {{ Js::from($array) }};
</script>

شما فقط باید از Js::from روش برای ارائه متغیرهای موجود به صورت JSON استفاده کنید. قالب Blade بر اساس عبارات منظم است و تلاش برای انتقال یک عبارت پیچیده به دستورالعمل ممکن است باعث خرابی های غیرمنتظره شود.

بخشنامه @verbatim ​

اگر متغیرهای جاوا اسکریپت را در بخش بزرگی از قالب خود نمایش می دهید، می توانید HTML را در @verbatim دستورالعمل قرار دهید تا مجبور نباشید هر عبارت Blade echo را با یک @ علامت پیشوند قرار دهید: 

@verbatim
    <div class="container">
        Hello, {{ name }}.
    </div>
@endverbatim

دستورالعمل های تیغه

علاوه بر وراثت قالب و نمایش داده ها، Blade همچنین میانبرهای مناسبی را برای ساختارهای رایج کنترل PHP، مانند دستورات شرطی و حلقه ها، فراهم می کند. این میانبرها روشی بسیار تمیز و مختصر برای کار با ساختارهای کنترل PHP ارائه می‌کنند و در عین حال برای همتایان PHP خود آشنا هستند.

اگر بیانیه ها

شما می توانید if با استفاده از دستورات @if ،، و دستورالعمل ها @elseif را بسازید . این دستورالعمل ها مشابه همتایان PHP خود عمل می کنند: @else @endif 

@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

برای راحتی، Blade همچنین @unless دستورالعملی را ارائه می دهد: 

@unless (Auth::check())
    You are not signed in.
@endunless

علاوه بر دستورالعمل‌های شرطی که قبلاً مورد بحث قرار گرفت، دستورات @isset و @empty ممکن است به عنوان میانبرهای مناسب برای توابع PHP مربوطه خود استفاده شوند: 

@isset($records)
    // $records is defined and is not null...
@endisset
 
@empty($records)
    // $records is "empty"...
@endempty

دستورالعمل های احراز هویت

دستورات @auth و @guest ممکن است برای تعیین سریع اینکه آیا کاربر فعلی احراز هویت شده است یا مهمان است استفاده شود: 

@auth
    // The user is authenticated...
@endauth
 
@guest
    // The user is not authenticated...
@endguest

در صورت نیاز، می‌توانید محافظ احراز هویت را مشخص کنید که باید هنگام استفاده از دستورالعمل‌ها @auth و @guest دستورالعمل‌ها بررسی شود: 

@auth('admin')
    // The user is authenticated...
@endauth
 
@guest('admin')
    // The user is not authenticated...
@endguest

دستورالعمل های محیط زیست

می توانید بررسی کنید که آیا برنامه در محیط تولید با استفاده از @production دستورالعمل اجرا می شود: 

@production
    // Production specific content...
@endproduction

یا، می توانید تعیین کنید که آیا برنامه در یک محیط خاص با استفاده از @env دستورالعمل اجرا می شود: 

@env('staging')
    // The application is running in "staging"...
@endenv
 
@env(['staging', 'production'])
    // The application is running in "staging" or "production"...
@endenv

بخش دستورالعمل ها

شما می توانید با استفاده از دستورالعمل تعیین کنید که آیا یک بخش وراثت الگو دارای محتوا است @hasSection : 

@hasSection('navigation')
    <div class="pull-right">
        @yield('navigation')
    </div>
 
    <div class="clearfix"></div>
@endif

می توانید از sectionMissing دستورالعمل برای تعیین اینکه آیا یک بخش محتوا ندارد استفاده کنید: 

@sectionMissing('navigation')
    <div class="pull-right">
        @include('default-navigation')
    </div>
@endif

دستورالعمل های جلسه

دستورالعمل @session ممکن است برای تعیین اینکه آیا یک مقدار جلسه وجود دارد استفاده می شود. اگر مقدار جلسه وجود داشته باشد، محتویات قالب در دستورالعمل ها @session و @endsession دستورالعمل ها ارزیابی می شود. در @session محتویات دستورالعمل، می توانید $value متغیر را برای نمایش مقدار جلسه بازتاب دهید: 

@session('status')
    <div class="p-4 bg-green-100">
        {{ $value }}
    </div>
@endsession

تغییر بیانیه ها

دستورات سوئیچ را می توان با استفاده از @switch دستورات @case ،، و دستورات ساخت : @break @default @endswitch 

@switch($i)
    @case(1)
        First case...
        @break
 
    @case(2)
        Second case...
        @break
 
    @default
        Default case...
@endswitch

حلقه ها

علاوه بر دستورات شرطی، Blade دستورالعمل های ساده ای برای کار با ساختارهای حلقه PHP ارائه می دهد. باز هم، هر یک از این دستورالعمل ها به طور یکسان با همتایان PHP خود عمل می کنند: 

@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor
 
@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach
 
@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users</p>
@endforelse
 
@while (true)
    <p>I'm looping forever.</p>
@endwhile

هنگام تکرار از طریق یک foreach حلقه، می توانید از متغیر حلقه برای به دست آوردن اطلاعات ارزشمند در مورد حلقه استفاده کنید، مانند اینکه آیا در اولین یا آخرین تکرار از طریق حلقه هستید.

هنگام استفاده از حلقه‌ها، می‌توانید تکرار فعلی را نادیده بگیرید یا با استفاده از دستورات @continue و حلقه را خاتمه دهید @break : 

@foreach ($users as $user)
    @if ($user->type == 1)
        @continue
    @endif
 
    <li>{{ $user->name }}</li>
 
    @if ($user->number == 5)
        @break
    @endif
@endforeach

همچنین می توانید شرایط ادامه یا شکست را در اعلامیه دستورالعمل قرار دهید: 

@foreach ($users as $user)
    @continue($user->type == 1)
 
    <li>{{ $user->name }}</li>
 
    @break($user->number == 5)
@endforeach

متغیر حلقه

در حین تکرار از طریق یک foreach حلقه، یک $loop متغیر در داخل حلقه شما در دسترس خواهد بود. این متغیر دسترسی به برخی از بیت های مفید از اطلاعات مانند شاخص حلقه جاری و اینکه آیا این اولین یا آخرین تکرار از طریق حلقه است را فراهم می کند: 

@foreach ($users as $user)
    @if ($loop->first)
        This is the first iteration.
    @endif
 
    @if ($loop->last)
        This is the last iteration.
    @endif
 
    <p>This is user {{ $user->id }}</p>
@endforeach

$loop اگر در یک حلقه تودرتو هستید، می توانید از طریق ویژگی به متغیر حلقه والد دسترسی پیدا کنید parent : 

@foreach ($users as $user)
    @foreach ($user->posts as $post)
        @if ($loop->parent->first)
            This is the first iteration of the parent loop.
        @endif
    @endforeach
@endforeach

این $loop متغیر همچنین دارای خواص مفید دیگری نیز می باشد:

ویژگی شرح
$loop->index شاخص تکرار حلقه جاری (از 0 شروع می شود).
$loop->iteration تکرار حلقه جاری (از 1 شروع می شود).
$loop->remaining تکرارهای باقی مانده در حلقه
$loop->count تعداد کل موارد در آرایه در حال تکرار.
$loop->first آیا این اولین تکرار از طریق حلقه است.
$loop->last آیا این آخرین تکرار از طریق حلقه است.
$loop->even آیا این یک تکرار یکنواخت از طریق حلقه است.
$loop->odd آیا این یک تکرار عجیب و غریب از طریق حلقه است.
$loop->depth سطح تودرتوی حلقه جاری.
$loop->parent هنگامی که در یک حلقه تودرتو، متغیر حلقه والد.

کلاس ها و سبک های مشروط

این @class دستورالعمل به صورت مشروط یک رشته کلاس CSS را کامپایل می کند. دستورالعمل آرایه ای از کلاس ها را می پذیرد که در آن کلید آرایه شامل کلاس یا کلاس هایی است که می خواهید اضافه کنید، در حالی که مقدار یک عبارت بولی است. اگر عنصر آرایه دارای یک کلید عددی باشد، همیشه در لیست کلاس رندر شده قرار می گیرد: 

@php
    $isActive = false;
    $hasError = true;
@endphp
 
<span @class([
    'p-4',
    'font-bold' => $isActive,
    'text-gray-500' => ! $isActive,
    'bg-red' => $hasError,
])></span>
 
<span class="p-4 text-gray-500 bg-red"></span>

به همین ترتیب، @style دستورالعمل ممکن است برای اضافه کردن مشروط سبک های CSS درون خطی به یک عنصر HTML استفاده شود: 

@php
    $isActive = true;
@endphp
 
<span @style([
    'background-color: red',
    'font-weight: bold' => $isActive,
])></span>
 
<span style="background-color: red; font-weight: bold;"></span>

ویژگی های اضافی

برای راحتی، می توانید از @checked دستورالعمل استفاده کنید تا به راحتی مشخص کنید که آیا یک ورودی چک باکس HTML "بررسی شده است". checked اگر شرایط ارائه شده به صورت زیر ارزیابی شود، این دستورالعمل تکرار می شود true : 

<input type="checkbox"
        name="active"
        value="active"
        @checked(old('active', $user->active)) />

به همین ترتیب، @selected دستورالعمل ممکن است برای نشان دادن اینکه آیا یک گزینه انتخاب داده شده باید "انتخاب شود" استفاده شود: 

<select name="version">
    @foreach ($product->versions as $version)
        <option value="{{ $version }}" @selected(old('version') == $version)>
            {{ $version }}
        </option>
    @endforeach
</select>

علاوه بر این، @disabled دستورالعمل ممکن است برای نشان دادن اینکه آیا یک عنصر داده شده باید "غیرفعال" شود یا خیر استفاده شود: 

<button type="submit" @disabled($errors->isNotEmpty())>Submit</button>

علاوه بر این، @readonly دستورالعمل ممکن است برای نشان دادن اینکه آیا یک عنصر معین باید "فقط خواندنی" باشد یا خیر استفاده شود: 

<input type="email"
        name="email"
        value="email@laravel.com"
        @readonly($user->isNotAdmin()) />

علاوه بر این، @required دستورالعمل ممکن است برای نشان دادن اینکه آیا یک عنصر معین باید "الزامی" باشد استفاده شود: 

<input type="text"
        name="title"
        value="title"
        @required($user->isAdmin()) />

از جمله مشاهده های فرعی

در حالی که شما برای استفاده از دستورالعمل آزاد هستید ، اجزای @include Blade عملکردهای مشابهی را ارائه می دهند و مزایای متعددی مانند اتصال داده ها و ویژگی ها را نسبت به دستورالعمل ارائه می دهند. @include

دستورالعمل Blade @include به شما این امکان را می دهد که نمای Blade را از یک نمای دیگر اضافه کنید. تمام متغیرهایی که برای نمای والد در دسترس هستند برای نمای شامل در دسترس قرار خواهند گرفت: 

<div>
    @include('shared.errors')
 
    <form>
        <!-- Form Contents -->
    </form>
</div>

حتی اگر نمای شامل تمام داده‌های موجود در نمای والد را به ارث ببرد، می‌توانید آرایه‌ای از داده‌های اضافی را نیز ارسال کنید که باید در دسترس نمای گنجانده شده قرار گیرند: 

@include('view.name', ['status' => 'complete'])

اگر سعی کنید به @include نمایی که وجود ندارد، لاراول خطا می دهد. اگر می‌خواهید دیدگاهی را وارد کنید که ممکن است وجود داشته باشد یا نباشد، باید از @includeIf دستورالعمل استفاده کنید: 

@includeIf('view.name', ['status' => 'complete'])

اگر مایلید که یک عبارت بولی داده شده را به یا @include ارزیابی کنید ، می توانید از دستورات و استفاده کنید : true false @includeWhen @includeUnless 

@includeWhen($boolean, 'view.name', ['status' => 'complete'])
 
@includeUnless($boolean, 'view.name', ['status' => 'complete'])

برای گنجاندن اولین نمای که از یک آرایه معین از نماها وجود دارد، می توانید از includeFirst دستورالعمل استفاده کنید: 

@includeFirst(['custom.admin', 'admin'], ['status' => 'complete'])

شما باید از استفاده از ثابت‌ها __DIR__ و __FILE__ در نمای Blade خودداری کنید، زیرا آنها به مکان نمای ذخیره‌سازی شده و کامپایل شده اشاره می‌کنند.

نمایش نماها برای مجموعه ها

شما می توانید حلقه ها و شامل را در یک خط با دستورالعمل Blade ترکیب کنید @each : 

@each('view.name', $jobs, 'job')

اولین آرگومان دستورالعمل @each ، نمایشی است که برای هر عنصر در آرایه یا مجموعه ارائه می شود. آرگومان دوم آرایه یا مجموعه ای است که می خواهید روی آن تکرار کنید، در حالی که آرگومان سوم نام متغیری است که به تکرار فعلی در view اختصاص داده می شود. بنابراین، برای مثال، اگر روی یک آرایه jobs از job . کلید آرایه برای تکرار فعلی به عنوان key متغیر در نما در دسترس خواهد بود.

شما همچنین می توانید یک آرگومان چهارم را به @each دستورالعمل منتقل کنید. این آرگومان نمایه ای را تعیین می کند که در صورت خالی بودن آرایه داده شده ارائه می شود. 

@each('view.name', $jobs, 'job', 'view.empty')

نماهایی که از طریق ارائه می شوند، @each متغیرها را از نمای والد به ارث نمی برند. اگر نمای فرزند به این متغیرها نیاز دارد، باید از دستورات @foreach و @include به جای آن استفاده کنید.

بخشنامه @once ​

این @once دستورالعمل به شما امکان می دهد بخشی از الگو را تعریف کنید که فقط یک بار در هر چرخه رندر ارزیابی می شود. این ممکن است برای فشار دادن یک قطعه معین از جاوا اسکریپت در هدر صفحه با استفاده از پشته ها مفید باشد . به عنوان مثال، اگر یک مؤلفه معین را در یک حلقه رندر می‌کنید ، ممکن است بخواهید فقط اولین بار که مؤلفه رندر می‌شود، جاوا اسکریپت را به سربرگ فشار دهید: 

@once
    @push('scripts')
        <script>
            // Your custom JavaScript...
        </script>
    @endpush
@endonce

از آنجایی که این @once دستورالعمل اغلب همراه با @push یا @prepend دستورالعمل ها استفاده می شود، دستورالعمل های @pushOnce و @prependOnce برای راحتی شما در دسترس هستند: 

@pushOnce('scripts')
    <script>
        // Your custom JavaScript...
    </script>
@endPushOnce

PHP خام

در برخی شرایط، جاسازی کد PHP در نماهای خود مفید است. می توانید از @php دستور Blade برای اجرای بلوکی از PHP ساده در قالب خود استفاده کنید: 

@php
    $counter = 1;
@endphp

یا اگر برای وارد کردن کلاس فقط نیاز به استفاده از PHP دارید، می‌توانید از @use دستورالعمل زیر استفاده کنید: 

@use('App\Models\Flight')

آرگومان دوم ممکن است به @use دایرکتیو با نام مستعار کلاس وارداتی ارائه شود: 

@use('App\Models\Flight', 'FlightModel')

نظرات

Blade همچنین به شما امکان می دهد نظرات را در نماهای خود تعریف کنید. با این حال، برخلاف نظرات HTML، نظرات Blade در HTML بازگردانده شده توسط برنامه شما گنجانده نشده است: 

{{-- This comment will not be present in the rendered HTML --}}

اجزاء

کامپوننت ها و اسلات ها مزایای مشابهی را برای بخش ها، چیدمان ها و شامل: با این حال، برخی ممکن است مدل ذهنی اجزا و شکاف ها را راحت تر درک کنند. دو رویکرد برای نوشتن مؤلفه ها وجود دارد: مؤلفه های مبتنی بر کلاس و مؤلفه های ناشناس.

برای ایجاد یک جزء مبتنی بر کلاس، می توانید از make:component دستور Artisan استفاده کنید. برای توضیح نحوه استفاده از کامپوننت ها، یک Alert کامپوننت ساده ایجاد می کنیم. دستور make:component کامپوننت را در app/View/Components دایرکتوری قرار می دهد: 

php artisan make:component Alert

این make:component دستور همچنین یک view template برای کامپوننت ایجاد می کند. نمای در resources/views/components دایرکتوری قرار خواهد گرفت. هنگام نوشتن مؤلفه‌ها برای برنامه خود، مؤلفه‌ها به طور خودکار در app/View/Components دایرکتوری و resources/views/components دایرکتوری کشف می‌شوند، بنابراین معمولاً به ثبت مؤلفه دیگری نیاز نیست.

همچنین می توانید اجزایی را در زیر شاخه ها ایجاد کنید: 

php artisan make:component Forms/Input

دستور بالا یک Input کامپوننت در app/View/Components/Forms دایرکتوری ایجاد می کند و view در resources/views/components/forms دایرکتوری قرار می گیرد.

اگر می خواهید یک مؤلفه ناشناس ایجاد کنید (یک مؤلفه فقط با یک قالب Blade و بدون کلاس)، می توانید --view هنگام فراخوانی make:component دستور از پرچم استفاده کنید: 

php artisan make:component forms.input --view

دستور بالا یک فایل Blade ایجاد می کند که resources/views/components/forms/input.blade.php می تواند به عنوان یک جزء از طریق رندر شود <x-forms.input /> .

ثبت دستی اجزای بسته

هنگام نوشتن کامپوننت ها برای برنامه خود، اجزا به طور خودکار در app/View/Components دایرکتوری و resources/views/components دایرکتوری کشف می شوند.

با این حال، اگر در حال ساخت بسته‌ای هستید که از اجزای Blade استفاده می‌کند، باید کلاس کامپوننت خود و نام مستعار تگ HTML آن را به صورت دستی ثبت کنید. شما معمولاً باید اجزای خود را در boot روش ارائه دهنده خدمات بسته خود ثبت کنید: 

use Illuminate\Support\Facades\Blade;
 
/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Blade::component('package-alert', Alert::class);
}

هنگامی که کامپوننت شما ثبت شد، ممکن است با استفاده از تگ مستعار آن رندر شود: 

<x-package-alert/>

از طرف دیگر، می‌توانید از componentNamespace روشی برای بارگیری خودکار کلاس‌های مؤلفه بر اساس قرارداد استفاده کنید. به عنوان مثال، یک Nightshade بسته ممکن است دارای Calendar اجزایی باشد ColorPicker که در Package\Views\Components فضای نام قرار دارند: 

use Illuminate\Support\Facades\Blade;
 
/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}

این اجازه می دهد تا از اجزای بسته توسط فضای نام فروشنده آنها با استفاده از نحو استفاده شود package-name:: : 

<x-nightshade::calendar />
<x-nightshade::color-picker />

Blade به طور خودکار کلاسی را که به این مؤلفه پیوند داده شده است، با پوشش پاسکال نام مؤلفه شناسایی می کند. زیر شاخه ها نیز با استفاده از نماد "نقطه" پشتیبانی می شوند.

رندر کردن کامپوننت ها

برای نمایش یک کامپوننت، می توانید از یک تگ جزء Blade در یکی از قالب های Blade خود استفاده کنید. تگ‌های اجزای Blade با رشته شروع می‌شوند x- و به دنبال آن نام کیس کباب کلاس کامپوننت قرار می‌گیرد: 

<x-alert/>
 
<x-user-profile/>

اگر کلاس کامپوننت عمیق‌تر در app/View/Components دایرکتوری تو در تو باشد، می‌توانید از . کاراکتر برای نشان دادن تودرتوی دایرکتوری استفاده کنید. به عنوان مثال، اگر فرض کنیم که یک کامپوننت در قرار دارد app/View/Components/Inputs/Button.php ، ممکن است آن را به این صورت ارائه کنیم: 

<x-inputs.button/>

اگر می خواهید کامپوننت خود را به صورت مشروط رندر کنید، می توانید shouldRender متدی را در کلاس جزء خود تعریف کنید. اگر shouldRender متد برگرداند false کامپوننت رندر نمی شود: 

use Illuminate\Support\Str;
 
/**
 * Whether the component should be rendered
 */
public function shouldRender(): bool
{
    return Str::length($this->message) > 0;
}

انتقال داده به کامپوننت ها

می توانید داده ها را با استفاده از ویژگی های HTML به اجزای Blade منتقل کنید. مقادیر سخت کد شده و ابتدایی ممکن است با استفاده از رشته های صفت ساده HTML به مؤلفه منتقل شوند. عبارات و متغیرهای PHP باید از طریق ویژگی هایی که از : کاراکتر به عنوان پیشوند استفاده می کنند به کامپوننت منتقل شوند : 

<x-alert type="error" :message="$message"/>

شما باید تمام ویژگی های داده کامپوننت را در سازنده کلاس آن تعریف کنید. تمام خصوصیات عمومی یک مؤلفه به طور خودکار در معرض دید مؤلفه قرار می گیرد. لازم نیست داده ها را از render متد کامپوننت به view ارسال کنید: 

<?php
 
namespace App\View\Components;
 
use Illuminate\View\Component;
use Illuminate\View\View;
 
class Alert extends Component
{
    /**
     * Create the component instance.
     */
    public function __construct(
        public string $type,
        public string $message,
    ) {}
 
    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View
    {
        return view('components.alert');
    }
}

وقتی کامپوننت شما رندر می‌شود، می‌توانید محتوای متغیرهای عمومی جزء خود را با تکرار نام متغیرها نمایش دهید: 

<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

پوشش

آرگومان های سازنده کامپوننت باید با استفاده از مشخص شوند camelCase ، در حالی که kebab-case باید هنگام ارجاع نام آرگومان ها در ویژگی های HTML شما استفاده شوند. به عنوان مثال، با توجه به سازنده کامپوننت زیر: 

/**
 * Create the component instance.
 */
public function __construct(
    public string $alertType,
) {}

آرگومان $alertType ممکن است به این مولفه ارائه شود: 

<x-alert alert-type="danger" />

نحو مشخصه کوتاه

هنگام انتقال صفات به مؤلفه‌ها، می‌توانید از نحو «ویژگی کوتاه» نیز استفاده کنید. این اغلب راحت است زیرا نام ویژگی ها اغلب با نام متغیرهایی که مطابقت دارند مطابقت دارند: 

{{-- Short attribute syntax... --}}
<x-profile :$userId :$name />
 
{{-- Is equivalent to... --}}
<x-profile :user-id="$userId" :name="$name" />

فرار از ارائه ویژگی

از آنجایی که برخی از فریم ورک‌های جاوا اسکریپت مانند Alpine.js نیز از ویژگی‌های با پیشوند کولون استفاده می‌کنند، می‌توانید از :: پیشوند دو کولون ( ) برای اطلاع به Blade استفاده کنید که این ویژگی یک عبارت PHP نیست. به عنوان مثال، با توجه به مولفه زیر: 

<x-button ::class="{ danger: isDeleting }">
    Submit
</x-button>

HTML زیر توسط Blade ارائه می شود: 

<button :class="{ danger: isDeleting }">
    Submit
</button>

روش های جزء

علاوه بر اینکه متغیرهای عمومی در قالب کامپوننت شما در دسترس هستند، ممکن است از هر روش عمومی روی کامپوننت فراخوانی شود. برای مثال، کامپوننتی را تصور کنید که دارای یک isSelected متد است: 

/**
 * Determine if the given option is the currently selected option.
 */
public function isSelected(string $option): bool
{
    return $option === $this->selected;
}

شما می توانید این متد را از قالب جزء خود با فراخوانی متغیری که با نام متد مطابقت دارد اجرا کنید: 

<option {{ $isSelected($value) ? 'selected' : '' }} value="{{ $value }}">
    {{ $label }}
</option>

دسترسی به ویژگی‌ها و شکاف‌ها در کلاس‌های مؤلفه

اجزای Blade همچنین به شما این امکان را می دهند که به نام مؤلفه، ویژگی ها و شکاف در متد رندر کلاس دسترسی داشته باشید. با این حال، برای دسترسی به این داده‌ها، باید یک بسته از render متد جزء خود را برگردانید. بسته شدن $data آرایه ای را به عنوان تنها آرگومان خود دریافت می کند. این آرایه حاوی چندین عنصر خواهد بود که اطلاعاتی در مورد کامپوننت ارائه می دهد: 

use Closure;
 
/**
 * Get the view / contents that represent the component.
 */
public function render(): Closure
{
    return function (array $data) {
        // $data['componentName'];
        // $data['attributes'];
        // $data['slot'];
 
        return '<div>Components content</div>';
    };
}

برابر componentName با نام استفاده شده در تگ HTML بعد از x- پیشوند است. همینطور <x-alert /> خواهد componentName بود alert . این attributes عنصر حاوی تمام ویژگی هایی است که در تگ HTML وجود دارد. عنصر slot یک Illuminate\Support\HtmlString نمونه با محتویات شکاف جزء است.

بسته شدن باید یک رشته را برگرداند. اگر رشته برگشتی با یک نمای موجود مطابقت داشته باشد، آن نمای ارائه می شود. در غیر این صورت، رشته برگشتی به عنوان نمای Blade درون خطی ارزیابی می شود.

وابستگی های اضافی

اگر کامپوننت شما به وابستگی هایی از ظرف سرویس لاراول نیاز دارد ، می توانید آنها را قبل از هر یک از ویژگی های داده کامپوننت لیست کنید و به طور خودکار توسط ظرف تزریق می شوند: 

use App\Services\AlertCreator;
 
/**
 * Create the component instance.
 */
public function __construct(
    public AlertCreator $creator,
    public string $type,
    public string $message,
) {}

پنهان کردن ویژگی ها / روش ها

اگر می خواهید از قرار گرفتن برخی از متدها یا ویژگی های عمومی به عنوان متغیر در قالب کامپوننت خود جلوگیری کنید، می توانید آنها را به یک $except ویژگی آرایه در مؤلفه خود اضافه کنید: 

<?php
 
namespace App\View\Components;
 
use Illuminate\View\Component;
 
class Alert extends Component
{
    /**
     * The properties / methods that should not be exposed to the component template.
     *
     * @var array
     */
    protected $except = ['type'];
 
    /**
     * Create the component instance.
     */
    public function __construct(
        public string $type,
    ) {}
}

ویژگی های مؤلفه

ما قبلا نحوه انتقال ویژگی های داده به یک جزء را بررسی کرده ایم. با این حال، گاهی اوقات ممکن است لازم باشد ویژگی های اضافی HTML مانند , class که بخشی از داده های مورد نیاز برای عملکرد یک جزء نیستند را مشخص کنید. به طور معمول، شما می خواهید این ویژگی های اضافی را به عنصر ریشه قالب کامپوننت منتقل کنید. به عنوان مثال، تصور کنید که می خواهیم یک alert کامپوننت را مانند این رندر کنیم: 

<x-alert type="error" :message="$message" class="mt-4"/>

تمام ویژگی هایی که بخشی از سازنده کامپوننت نیستند به طور خودکار به "کیسه ویژگی" کامپوننت اضافه می شوند. این کیسه ویژگی به طور خودکار از طریق متغیر در اختیار مؤلفه قرار می گیرد $attributes . همه صفات ممکن است با تکرار این متغیر در کامپوننت ارائه شوند: 

<div {{ $attributes }}>
    <!-- Component content -->
</div>

استفاده از دستورالعمل‌هایی مانند @env درون تگ‌های مؤلفه در حال حاضر پشتیبانی نمی‌شود. به عنوان مثال، <x-alert :live="@env('production')"/> کامپایل نخواهد شد.

ویژگی های پیش فرض / ادغام شده

گاهی اوقات ممکن است لازم باشد مقادیر پیش فرض را برای ویژگی ها مشخص کنید یا مقادیر اضافی را در برخی از ویژگی های مؤلفه ادغام کنید. برای انجام این کار، می توانید از روش کیف ویژگی استفاده کنید merge . این روش به ویژه برای تعریف مجموعه‌ای از کلاس‌های پیش‌فرض CSS که همیشه باید برای یک جزء اعمال شوند مفید است: 

<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

اگر فرض کنیم این مؤلفه به این صورت استفاده می شود: 

<x-alert type="error" :message="$message" class="mb-4"/>

HTML نهایی و رندر شده کامپوننت به شکل زیر ظاهر می شود: 

<div class="alert alert-error mb-4">
    <!-- Contents of the $message variable -->
</div>

ادغام مشروط کلاسها

گاهی اوقات ممکن است بخواهید کلاس ها را ادغام کنید اگر یک شرط مشخص باشد true . شما می توانید این کار را از طریق class متد انجام دهید، که آرایه ای از کلاس ها را می پذیرد که در آن کلید آرایه شامل کلاس یا کلاس هایی است که می خواهید اضافه کنید، در حالی که مقدار یک عبارت بولی است. اگر عنصر آرایه دارای یک کلید عددی باشد، همیشه در لیست کلاس رندر شده قرار می گیرد: 

<div {{ $attributes->class(['p-4', 'bg-red' => $hasError]) }}>
    {{ $message }}
</div>

اگر نیاز به ادغام سایر ویژگی‌ها در مؤلفه خود دارید، می‌توانید merge متد را به class متد زنجیره‌ای کنید: 

<button {{ $attributes->class(['p-4'])->merge(['type' => 'button']) }}>
    {{ $slot }}
</button>

اگر نیاز به کامپایل کردن کلاس‌های مشروط روی سایر عناصر HTML دارید که نباید ویژگی‌های ادغام شده را دریافت کنند، می‌توانید از @class دستورالعمل استفاده کنید .

ادغام صفات غیر کلاسی

هنگام ادغام ویژگی هایی که ویژگی نیستند class ، مقادیر ارائه شده به merge روش، مقادیر "پیش فرض" ویژگی در نظر گرفته می شوند. با این حال، بر خلاف class ویژگی، این ویژگی ها با مقادیر ویژگی تزریق شده ادغام نمی شوند. در عوض، آنها رونویسی خواهند شد. برای مثال، button اجرای یک جزء ممکن است به شکل زیر باشد: 

<button {{ $attributes->merge(['type' => 'button']) }}>
    {{ $slot }}
</button>

برای رندر کردن مؤلفه دکمه با یک سفارشی type ، ممکن است هنگام مصرف مؤلفه مشخص شود. اگر نوع مشخص نشده باشد، از button نوع استفاده می شود: 

<x-button type="submit">
    Submit
</x-button>

HTML رندر شده کامپوننت button در این مثال به صورت زیر خواهد بود: 

<button type="submit">
    Submit
</button>

اگر می‌خواهید ویژگی دیگری غیر از اینکه class مقدار پیش‌فرض و مقادیر تزریق‌شده به هم متصل شوند، می‌توانید از این prepends روش استفاده کنید. در این مثال، data-controller ویژگی همیشه با شروع خواهد شد profile-controller و هر data-controller مقدار اضافی تزریق شده بعد از این مقدار پیش فرض قرار می گیرد: 

<div {{ $attributes->merge(['data-controller' => $attributes->prepends('profile-controller')]) }}>
    {{ $slot }}
</div>

بازیابی و فیلتر کردن ویژگی ها

می توانید با استفاده از filter روش، ویژگی ها را فیلتر کنید. این روش بسته شدنی را می‌پذیرد که true اگر بخواهید ویژگی را در کیسه ویژگی حفظ کنید، باید بازگردد: 

{{ $attributes->filter(fn (string $value, string $key) => $key == 'foo') }}

برای راحتی، می‌توانید از whereStartsWith روش برای بازیابی همه ویژگی‌هایی که کلیدهای آن‌ها با یک رشته مشخص شروع می‌شود استفاده کنید: 

{{ $attributes->whereStartsWith('wire:model') }}

برعکس، این whereDoesntStartWith روش ممکن است برای حذف تمام ویژگی هایی که کلیدهای آنها با یک رشته مشخص شروع می شود استفاده شود: 

{{ $attributes->whereDoesntStartWith('wire:model') }}

با استفاده از first روش، می توانید اولین ویژگی را در یک کیسه مشخصه ارائه دهید: 

{{ $attributes->whereStartsWith('wire:model')->first() }}

اگر می خواهید بررسی کنید که آیا یک ویژگی در مؤلفه وجود دارد، می توانید از has روش استفاده کنید. این متد نام ویژگی را به عنوان تنها آرگومان خود می پذیرد و یک بولی نشان می دهد که آیا ویژگی وجود دارد یا نه: 

@if ($attributes->has('class'))
    <div>Class attribute is present</div>
@endif

اگر یک آرایه به متد ارسال شود has ، متد تعیین می‌کند که آیا همه ویژگی‌های داده‌شده در مولفه وجود دارند یا خیر: 

@if ($attributes->has(['name', 'class']))
    <div>All of the attributes are present</div>
@endif

این hasAny روش ممکن است برای تعیین اینکه آیا هر یک از ویژگی های داده شده در مؤلفه وجود دارد یا خیر استفاده شود: 

@if ($attributes->hasAny(['href', ':href', 'v-bind:href']))
    <div>One of the attributes is present</div>
@endif

می توانید مقدار یک ویژگی خاص را با استفاده از get روش بازیابی کنید: 

{{ $attributes->get('class') }}

کلمات کلیدی رزرو شده

به‌طور پیش‌فرض، برخی از کلیدواژه‌ها برای استفاده داخلی Blade برای رندر کردن مؤلفه‌ها رزرو شده‌اند. کلمات کلیدی زیر را نمی توان به عنوان ویژگی های عمومی یا نام روش در اجزای شما تعریف کرد:

  • data
  • render
  • resolveView
  • shouldRender
  • view
  • withAttributes
  • withName

شکاف ها

شما اغلب نیاز دارید که محتوای اضافی را از طریق «اسلات» به مؤلفه خود منتقل کنید. شکاف های مؤلفه با تکرار $slot متغیر ارائه می شوند. برای کشف این مفهوم، بیایید تصور کنیم که یک alert جزء دارای نشانه گذاری زیر است: 

<!-- /resources/views/components/alert.blade.php -->
 
<div class="alert alert-danger">
    {{ $slot }}
</div>

slot ممکن است با تزریق محتوا به مؤلفه، محتوا را به آن منتقل کنیم : 

<x-alert>
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

گاهی اوقات ممکن است یک کامپوننت نیاز داشته باشد که چندین اسلات مختلف را در مکان های مختلف درون کامپوننت ارائه دهد. بیایید مؤلفه هشدار خود را تغییر دهیم تا امکان تزریق یک اسلات "عنوان" را فراهم کنیم: 

<!-- /resources/views/components/alert.blade.php -->
 
<span class="alert-title">{{ $title }}</span>
 
<div class="alert alert-danger">
    {{ $slot }}
</div>

می توانید محتوای اسلات نامگذاری شده را با استفاده از x-slot تگ تعریف کنید. هر محتوایی که در یک x-slot تگ صریح نباشد به مؤلفه موجود در $slot متغیر منتقل می شود: 

<x-alert>
    <x-slot:title>
        Server Error
    </x-slot>
 
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

isEmpty برای تعیین اینکه آیا اسلات حاوی محتوا است یا خیر، می‌توانید از روش یک اسلات استفاده کنید : 

<span class="alert-title">{{ $title }}</span>
 
<div class="alert alert-danger">
    @if ($slot->isEmpty())
        This is default content if the slot is empty.
    @else
        {{ $slot }}
    @endif
</div>

علاوه بر این، این hasActualContent روش ممکن است برای تعیین اینکه آیا اسلات حاوی محتوای "واقعی" است که یک نظر HTML نیست استفاده شود: 

@if ($slot->hasActualContent())
    The scope has non-comment content.
@endif

اسلات های محدوده

اگر از یک چارچوب جاوا اسکریپت مانند Vue استفاده کرده‌اید، ممکن است با «اسلات‌های scoped» آشنا باشید که به شما امکان می‌دهد به داده‌ها یا روش‌هایی از مؤلفه درون اسلات خود دسترسی داشته باشید. شما می‌توانید با تعریف متدها یا ویژگی‌های عمومی در کامپوننت خود و دسترسی به کامپوننت در اسلات خود از طریق $component متغیر، رفتار مشابهی را در لاراول به دست آورید. در این مثال، فرض می‌کنیم که x-alert کامپوننت دارای یک formatAlert متد عمومی است که روی کلاس جزء آن تعریف شده است: 

<x-alert>
    <x-slot:title>
        {{ $component->formatAlert('Server Error') }}
    </x-slot>
 
    <strong>Whoops!</strong> Something went wrong!
</x-alert>

ویژگی های اسلات

مانند اجزای Blade، می‌توانید ویژگی‌های اضافی مانند نام کلاس‌های CSS را به اسلات‌ها اختصاص دهید: 

<x-card class="shadow-sm">
    <x-slot:heading class="font-bold">
        Heading
    </x-slot>
 
    Content
 
    <x-slot:footer class="text-sm">
        Footer
    </x-slot>
</x-card>

برای تعامل با ویژگی های اسلات، می توانید به attributes ویژگی متغیر اسلات دسترسی پیدا کنید. برای اطلاعات بیشتر در مورد نحوه تعامل با ویژگی‌ها، لطفاً به مستندات مربوط به ویژگی‌های مؤلفه مراجعه کنید : 

@props([
    'heading',
    'footer',
])
 
<div {{ $attributes->class(['border']) }}>
    <h1 {{ $heading->attributes->class(['text-lg']) }}>
        {{ $heading }}
    </h1>
 
    {{ $slot }}
 
    <footer {{ $footer->attributes->class(['text-gray-700']) }}>
        {{ $footer }}
    </footer>
</div>

نماهای اجزای درون خطی

برای کامپوننت های بسیار کوچک، ممکن است مدیریت هر دو کلاس کامپوننت و نمایش الگوی کامپوننت سخت باشد. به همین دلیل، می‌توانید نشانه‌گذاری مؤلفه را مستقیماً از render روش برگردانید: 

/**
 * Get the view / contents that represent the component.
 */
public function render(): string
{
    return <<<'blade'
        <div class="alert alert-danger">
            {{ $slot }}
        </div>
    blade;
}

تولید اجزای نمای درون خطی

برای ایجاد کامپوننتی که نمای درون خطی را ارائه می دهد، می توانید inline هنگام اجرای make:component دستور از این گزینه استفاده کنید: 

php artisan make:component Alert --inline

اجزای دینامیک

گاهی اوقات ممکن است لازم باشد یک کامپوننت را رندر کنید اما ندانید کدام کامپوننت باید تا زمان اجرا رندر شود. در این شرایط، می توانید از کامپوننت داخلی لاراول dynamic-component برای رندر کامپوننت بر اساس مقدار زمان اجرا یا متغیر استفاده کنید: 

// $componentName = "secondary-button";
 
<x-dynamic-component :component="$componentName" class="mt-4" />

ثبت دستی کامپوننت ها

مستندات زیر در مورد ثبت دستی کامپوننت ها در درجه اول برای کسانی که در حال نوشتن بسته های لاراول هستند که شامل کامپوننت های view هستند، کاربرد دارد. اگر در حال نوشتن یک بسته نیستید، این بخش از مستندات مؤلفه ممکن است به شما مربوط نباشد.

هنگام نوشتن کامپوننت ها برای برنامه خود، اجزا به طور خودکار در app/View/Components دایرکتوری و resources/views/components دایرکتوری کشف می شوند.

با این حال، اگر در حال ساخت بسته‌ای هستید که از اجزای Blade استفاده می‌کند یا کامپوننت‌ها را در دایرکتوری‌های غیر متعارف قرار می‌دهد، باید کلاس کامپوننت خود و نام مستعار تگ HTML آن را به‌طور دستی ثبت کنید تا لاراول بداند کامپوننت را کجا پیدا کند. شما معمولاً باید اجزای خود را در boot روش ارائه دهنده خدمات بسته خود ثبت کنید: 

use Illuminate\Support\Facades\Blade;
use VendorPackage\View\Components\AlertComponent;
 
/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Blade::component('package-alert', AlertComponent::class);
}

هنگامی که کامپوننت شما ثبت شد، ممکن است با استفاده از تگ مستعار آن رندر شود: 

<x-package-alert/>

بارگیری خودکار اجزای بسته

از طرف دیگر، می‌توانید از componentNamespace روشی برای بارگیری خودکار کلاس‌های مؤلفه بر اساس قرارداد استفاده کنید. به عنوان مثال، یک Nightshade بسته ممکن است دارای Calendar اجزایی باشد ColorPicker که در Package\Views\Components فضای نام قرار دارند: 

use Illuminate\Support\Facades\Blade;
 
/**
 * Bootstrap your package's services.
 */
public function boot(): void
{
    Blade::componentNamespace('Nightshade\\Views\\Components', 'nightshade');
}

این اجازه می دهد تا از اجزای بسته توسط فضای نام فروشنده آنها با استفاده از نحو استفاده شود package-name:: : 

<x-nightshade::calendar />
<x-nightshade::color-picker />

Blade به طور خودکار کلاسی را که به این مؤلفه پیوند داده شده است، با پوشش پاسکال نام مؤلفه شناسایی می کند. زیر شاخه ها نیز با استفاده از نماد "نقطه" پشتیبانی می شوند.

اجزای ناشناس

مشابه اجزای درون خطی، کامپوننت های ناشناس مکانیزمی برای مدیریت یک جزء از طریق یک فایل واحد ارائه می دهند. با این حال، اجزای ناشناس از یک فایل مشاهده استفاده می کنند و هیچ کلاس مرتبطی ندارند. برای تعریف یک مؤلفه ناشناس، فقط باید یک قالب Blade را در resources/views/components فهرست خود قرار دهید. به عنوان مثال، با فرض اینکه یک کامپوننت را در تعریف کرده اید resources/views/components/alert.blade.php ، می توانید به سادگی آن را به این صورت ارائه کنید: 

<x-alert/>

شما می‌توانید از این . کاراکتر برای نشان دادن اینکه آیا یک جزء در عمق دایرکتوری تودرتو شده است استفاده کنید components . به عنوان مثال، با فرض اینکه کامپوننت در تعریف شده است resources/views/components/inputs/button.blade.php ، می توانید آن را به این صورت ارائه کنید: 

<x-inputs.button/>

اجزای شاخص ناشناس

گاهی اوقات، زمانی که یک جزء از چندین الگوی Blade تشکیل شده است، ممکن است بخواهید الگوهای کامپوننت داده شده را در یک فهرست واحد گروه بندی کنید. برای مثال، یک جزء "آکاردئون" را با ساختار دایرکتوری زیر تصور کنید: 

/resources/views/components/accordion.blade.php
/resources/views/components/accordion/item.blade.php

این ساختار دایرکتوری به شما این امکان را می دهد که مولفه آکاردئون و آیتم آن را به صورت زیر ارائه کنید: 

<x-accordion>
    <x-accordion.item>
        ...
    </x-accordion.item>
</x-accordion>

با این حال، برای اینکه مولفه آکاردئون را از طریق رندر کنیم x-accordion ، مجبور شدیم الگوی مؤلفه آکاردئون «شاخص» را resources/views/components به جای تودرتو کردن آن در دایرکتوری accordion با سایر الگوهای مرتبط با آکاردئون در فهرست قرار دهیم.

خوشبختانه، Blade به شما اجازه می دهد تا یک index.blade.php فایل را در پوشه قالب یک جزء قرار دهید. هنگامی که یک index.blade.php الگو برای کامپوننت وجود دارد، به عنوان گره "ریشه" کامپوننت ارائه می شود. بنابراین، می‌توانیم از همان نحو Blade استفاده کنیم که در مثال بالا آمده است. با این حال، ساختار دایرکتوری خود را به این صورت تنظیم می کنیم: 

/resources/views/components/accordion/index.blade.php
/resources/views/components/accordion/item.blade.php

ویژگی ها / ویژگی های داده

از آنجایی که مؤلفه‌های ناشناس هیچ کلاس مرتبطی ندارند، ممکن است تعجب کنید که چگونه می‌توانید تشخیص دهید که کدام داده باید به عنوان متغیر به مؤلفه منتقل شود و کدام ویژگی باید در کیف ویژگی مؤلفه قرار گیرد .

می‌توانید با استفاده از @props دستورالعمل موجود در بالای قالب Blade، مشخص کنید که کدام ویژگی باید به عنوان متغیر داده در نظر گرفته شود. تمام ویژگی‌های دیگر روی کامپوننت از طریق کیف ویژگی کامپوننت در دسترس خواهد بود. اگر می خواهید به یک متغیر داده مقدار پیش فرض بدهید، می توانید نام متغیر را به عنوان کلید آرایه و مقدار پیش فرض را به عنوان مقدار آرایه مشخص کنید: 

<!-- /resources/views/components/alert.blade.php -->
 
@props(['type' => 'info', 'message'])
 
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>

با توجه به تعریف کامپوننت در بالا، ممکن است کامپوننت را اینگونه بیان کنیم: 

<x-alert type="error" :message="$message" class="mb-4"/>

دسترسی به داده های والدین

گاهی اوقات ممکن است بخواهید به داده‌های یک مؤلفه والد در داخل مؤلفه فرزند دسترسی داشته باشید. در این موارد، می توانید از @aware دستورالعمل استفاده کنید. به عنوان مثال، تصور کنید ما در حال ساختن یک جزء منوی پیچیده متشکل از والدین <x-menu> و فرزند هستیم <x-menu.item> : 

<x-menu color="purple">
    <x-menu.item>...</x-menu.item>
    <x-menu.item>...</x-menu.item>
</x-menu>

کامپوننت <x-menu> ممکن است پیاده سازی مانند زیر داشته باشد: 

<!-- /resources/views/components/menu/index.blade.php -->
 
@props(['color' => 'gray'])
 
<ul {{ $attributes->merge(['class' => 'bg-'.$color.'-200']) }}>
    {{ $slot }}
</ul>

از آنجا که color پایه فقط به والد ( <x-menu> ) منتقل شده است، در داخل در دسترس نخواهد بود <x-menu.item> . با این حال، اگر از دستورالعمل استفاده کنیم @aware ، می توانیم آن را در داخل <x-menu.item> نیز در دسترس قرار دهیم: 

<!-- /resources/views/components/menu/item.blade.php -->
 
@aware(['color' => 'gray'])
 
<li {{ $attributes->merge(['class' => 'text-'.$color.'-800']) }}>
    {{ $slot }}
</li>

دستورالعمل @aware نمی تواند به داده های والد که به طور صریح از طریق ویژگی های HTML به مؤلفه والد منتقل نشده اند دسترسی پیدا کند. مقادیر پیش‌فرض @props که به صراحت به مؤلفه والد منتقل نمی‌شوند توسط دستورالعمل قابل دسترسی نیستند @aware .

مسیرهای مؤلفه ناشناس

همانطور که قبلا بحث شد، اجزای ناشناس معمولا با قرار دادن یک قالب Blade در resources/views/components فهرست شما تعریف می شوند. با این حال، ممکن است گاهی بخواهید علاوه بر مسیر پیش فرض، مسیرهای مؤلفه ناشناس دیگری را با لاراول ثبت کنید.

این anonymousComponentPath متد «مسیر» به مکان مؤلفه ناشناس را به‌عنوان آرگومان اول و «فضای نام» اختیاری را می‌پذیرد که اجزا باید به‌عنوان آرگومان دوم در آن قرار گیرند. به طور معمول، این روش باید از روش یکی از ارائه دهندگان خدمات boot برنامه شما فراخوانی شود : 

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Blade::anonymousComponentPath(__DIR__.'/../components');
}

هنگامی که مسیرهای کامپوننت بدون پیشوند مشخصی مانند مثال بالا ثبت می شوند، ممکن است در اجزای Blade شما نیز بدون پیشوند مربوطه ارائه شوند. برای مثال، اگر panel.blade.php کامپوننتی در مسیر ثبت شده در بالا وجود داشته باشد، ممکن است به صورت زیر نمایش داده شود: 

<x-panel />

پیشوند "namespace" ممکن است به عنوان آرگومان دوم متد ارائه شود anonymousComponentPath : 

Blade::anonymousComponentPath(__DIR__.'/../components', 'dashboard');

هنگامی که یک پیشوند ارائه می شود، اجزای موجود در آن "Namspace" ممکن است با پیشوند فضای نام کامپوننت به نام کامپوننت هنگام رندر شدن کامپوننت ارائه شوند: 

<x-dashboard::panel />

چیدمان ساختمان

طرح بندی با استفاده از کامپوننت ها

اکثر برنامه های کاربردی وب یک طرح کلی را در صفحات مختلف حفظ می کنند. اگر بخواهیم کل طرح بندی HTML را در هر نمایی که ایجاد می کنیم تکرار کنیم، نگهداری برنامه فوق العاده دست و پا گیر و سخت خواهد بود. خوشبختانه، راحت است که این طرح را به عنوان یک جزء Blade تعریف کنیم و سپس از آن در سراسر برنامه خود استفاده کنیم.

تعریف مولفه Layout

به عنوان مثال، تصور کنید که در حال ساخت یک برنامه لیست "todo" هستیم. ممکن است layout کامپوننتی را به شکل زیر تعریف کنیم : 

<!-- resources/views/components/layout.blade.php -->
 
<html>
    <head>
        <title>{{ $title ?? 'Todo Manager' }}</title>
    </head>
    <body>
        <h1>Todos</h1>
        <hr/>
        {{ $slot }}
    </body>
</html>

اعمال مولفه Layout

هنگامی که layout کامپوننت تعریف شد، ممکن است یک نمای Blade ایجاد کنیم که از کامپوننت استفاده می کند. در این مثال، یک نمای ساده تعریف می کنیم که لیست وظایف ما را نمایش می دهد: 

<!-- resources/views/tasks.blade.php -->
 
<x-layout>
    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

$slot به یاد داشته باشید، محتوایی که به یک کامپوننت تزریق می‌شود، به متغیر پیش‌فرض درون layout کامپوننت ما عرضه می‌شود . همانطور که ممکن است متوجه شده باشید، ما layout نیز $title در صورت ارائه به یک شکاف احترام می گذاریم. در غیر این صورت یک عنوان پیش فرض نشان داده می شود. ما ممکن است یک عنوان سفارشی را از نمای لیست وظایف خود با استفاده از نحو استاندارد اسلات که در مستندات مؤلفه بحث شده است، تزریق کنیم : 

<!-- resources/views/tasks.blade.php -->
 
<x-layout>
    <x-slot:title>
        Custom Title
    </x-slot>
 
    @foreach ($tasks as $task)
        {{ $task }}
    @endforeach
</x-layout>

task اکنون که نماهای چیدمان و لیست وظایف خود را تعریف کرده ایم، فقط باید نمای را از یک مسیر برگردانیم : 

use App\Models\Task;
 
Route::get('/tasks', function () {
    return view('tasks', ['tasks' => Task::all()]);
});

طرح‌بندی با استفاده از وراثت الگو

تعریف Layout

طرح‌بندی‌ها همچنین ممکن است از طریق «ارث بری قالب» ایجاد شوند. این روش اولیه ساخت برنامه های کاربردی قبل از معرفی کامپوننت ها بود .

برای شروع، اجازه دهید نگاهی به یک مثال ساده بیاندازیم. ابتدا یک صفحه آرایی را بررسی می کنیم. از آنجایی که اکثر برنامه های کاربردی وب یک طرح کلی را در صفحات مختلف حفظ می کنند، تعریف این طرح به عنوان یک نمای Blade راحت است: 

<!-- resources/views/layouts/app.blade.php -->
 
<html>
    <head>
        <title>App Name - @yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show
 
        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

همانطور که می بینید، این فایل حاوی نشانه گذاری معمولی HTML است. با این حال، دستورالعمل ها @section و @yield دستورالعمل ها را مورد توجه قرار دهید. دستورالعمل @section ، همانطور که از نام آن پیداست، بخشی از محتوا را تعریف می کند، در حالی که @yield دستورالعمل برای نمایش محتوای یک بخش خاص استفاده می شود.

اکنون که یک طرح بندی برای برنامه خود تعریف کرده ایم، بیایید یک صفحه فرزند تعریف کنیم که layout را به ارث می برد.

گسترش یک طرح

هنگام تعریف نمای فرزند، از @extends دستورالعمل Blade استفاده کنید تا مشخص کنید نمای فرزند باید چه طرحی را به ارث ببرد. نماهایی که طرح‌بندی Blade را گسترش می‌دهند، ممکن است با استفاده از @section دستورالعمل‌ها، محتوا را به بخش‌های طرح‌بندی تزریق کنند. به یاد داشته باشید، همانطور که در مثال بالا مشاهده می شود، محتویات این بخش ها در طرح بندی با استفاده از @yield : 

<!-- resources/views/child.blade.php -->
 
@extends('layouts.app')
 
@section('title', 'Page Title')
 
@section('sidebar')
    @parent
 
    <p>This is appended to the master sidebar.</p>
@endsection
 
@section('content')
    <p>This is my body content.</p>
@endsection

در این مثال، بخش از دستورالعمل برای الحاق (به جای بازنویسی) محتوا به نوار کناری طرح‌بندی sidebar استفاده می‌کند . هنگامی که نما ارائه می شود، @parent دستورالعمل @parent با محتوای طرح جایگزین می شود.

برخلاف مثال قبلی، این sidebar بخش به @endsection جای @show . دستورالعمل @endsection فقط یک بخش را تعریف می کند در حالی که آن بخش @show را تعریف می کند و بلافاصله ارائه می دهد .

دستورالعمل @yield همچنین یک مقدار پیش فرض را به عنوان پارامتر دوم خود می پذیرد. این مقدار در صورتی نمایش داده می‌شود که بخش ارائه‌شده تعریف نشده باشد: 

@yield('content', 'Default content')

تشکیل می دهد

فیلد CSRF

هر زمان که یک فرم HTML را در برنامه خود تعریف می کنید، باید یک فیلد رمز پنهان CSRF را در فرم قرار دهید تا میان افزار حفاظت CSRF بتواند درخواست را تأیید کند. می توانید از @csrf دستورالعمل Blade برای تولید فیلد نشانه استفاده کنید: 

<form method="POST" action="/profile">
    @csrf
 
    ...
</form>

فیلد روش

از آنجایی که فرم‌های HTML نمی‌توانند، یا درخواست ایجاد PUT کنند PATCH ، DELETE باید یک _method فیلد مخفی برای جعل این افعال HTTP اضافه کنید. دستورالعمل @method Blade می تواند این فیلد را برای شما ایجاد کند: 

<form action="/foo/bar" method="POST">
    @method('PUT')
 
    ...
</form>

خطاهای اعتبارسنجی

این @error دستورالعمل ممکن است برای بررسی سریع وجود پیام های خطای اعتبارسنجی برای یک ویژگی خاص استفاده شود. در یک @error دستورالعمل، می توانید $message متغیر را برای نمایش پیام خطا تکرار کنید: 

<!-- /resources/views/post/create.blade.php -->
 
<label for="title">Post Title</label>
 
<input id="title"
    type="text"
    class="@error('title') is-invalid @enderror">
 
@error('title')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

از آنجایی که @error دستورالعمل به یک عبارت "if" کامپایل می شود، می توانید از @else دستورالعمل برای ارائه محتوا در زمانی که خطایی برای یک ویژگی وجود ندارد استفاده کنید: 

<!-- /resources/views/auth.blade.php -->
 
<label for="email">Email address</label>
 
<input id="email"
    type="email"
    class="@error('email') is-invalid @else is-valid @enderror">

می‌توانید نام یک کیسه خطای خاص را به‌عنوان پارامتر دوم @error برای بازیابی پیام‌های خطای اعتبارسنجی در صفحات حاوی چندین فرم به دستورالعمل ارسال کنید: 

<!-- /resources/views/auth.blade.php -->
 
<label for="email">Email address</label>
 
<input id="email"
    type="email"
    class="@error('email', 'login') is-invalid @enderror">
 
@error('email', 'login')
    <div class="alert alert-danger">{{ $message }}</div>
@enderror

پشته ها

Blade به شما امکان می دهد تا به پشته های نامگذاری شده فشار دهید که می توانند در جای دیگری در نمای یا طرح بندی دیگر ارائه شوند. این می تواند به ویژه برای تعیین هر گونه کتابخانه جاوا اسکریپت مورد نیاز برای بازدیدهای فرزند شما مفید باشد: 

@push('scripts')
    <script src="/example.js"></script>
@endpush

اگر می‌خواهید @push در صورتی که یک عبارت بولی داده شده را به ‌ارزیابی می‌کند محتوا کنید true ، می‌توانید از @pushIf دستورالعمل استفاده کنید: 

@pushIf($shouldPush, 'scripts')
    <script src="/example.js"></script>
@endPushIf

می توانید هر چند بار که لازم است به پشته فشار دهید. برای رندر کردن محتویات کامل پشته، نام پشته را به @stack دستورالعمل ارسال کنید: 

<head>
    <!-- Head Contents -->
 
    @stack('scripts')
</head>

اگر می خواهید محتوا را در ابتدای یک پشته قرار دهید، باید از @prepend دستورالعمل استفاده کنید: 

@push('scripts')
    This will be second...
@endpush
 
// Later...
 
@prepend('scripts')
    This will be first...
@endprepend

تزریق خدمات

این دستورالعمل ممکن است برای بازیابی یک سرویس از ظرف سرویس @inject لاراول استفاده شود . اولین آرگومان ارسال شده به نام متغیری است که سرویس در آن قرار می گیرد، در حالی که آرگومان دوم کلاس یا نام رابط سرویسی است که می خواهید آن را حل کنید: @inject 

@inject('metrics', 'App\Services\MetricsService')
 
<div>
    Monthly Revenue: {{ $metrics->monthlyRevenue() }}.
</div>

رندر کردن قالب های تیغه درون خطی

گاهی اوقات ممکن است لازم باشد یک رشته قالب خام Blade را به HTML معتبر تبدیل کنید. شما می توانید این کار را با استفاده از render روش ارائه شده توسط Blade نما انجام دهید. این render روش رشته الگوی Blade و یک آرایه اختیاری از داده ها را برای ارائه به الگو می پذیرد: 

use Illuminate\Support\Facades\Blade;
 
return Blade::render('Hello, {{ $name }}', ['name' => 'Julian Bashir']);

لاراول قالب های Blade درون خطی را با نوشتن آنها در storage/framework/views دایرکتوری رندر می کند. اگر می خواهید لاراول این فایل های موقت را پس از رندر کردن قالب Blade حذف کند، می توانید آرگومان deleteCachedView متد را ارائه دهید: 

return Blade::render(
    'Hello, {{ $name }}',
    ['name' => 'Julian Bashir'],
    deleteCachedView: true
);

رندر قطعات تیغه

هنگام استفاده از فریم‌ورک‌های فرانت‌اند مانند Turbo و htmx ، ممکن است گاهی لازم باشد فقط بخشی از قالب Blade را در پاسخ HTTP خود برگردانید. "قطعات" تیغه به شما این امکان را می دهد که این کار را انجام دهید. برای شروع، بخشی از قالب Blade خود را در داخل @fragment و @endfragment دستورالعمل ها قرار دهید: 

@fragment('user-list')
    <ul>
        @foreach ($users as $user)
            <li>{{ $user->name }}</li>
        @endforeach
    </ul>
@endfragment

سپس، هنگام رندر کردن نمایی که از این الگو استفاده می کند، می توانید از fragment روش استفاده کنید تا مشخص کنید که فقط قطعه مشخص شده باید در پاسخ HTTP خروجی گنجانده شود: 

return view('dashboard', ['users' => $users])->fragment('user-list');

این fragmentIf روش به شما اجازه می دهد تا به صورت مشروط یک قطعه از یک view را بر اساس یک شرایط داده شده برگردانید. در غیر این صورت، کل نمای برگردانده می شود: 

return view('dashboard', ['users' => $users])
    ->fragmentIf($request->hasHeader('HX-Request'), 'user-list');

متدهای fragments و fragmentsIf به شما این امکان را می دهند که چند قطعه نمایش را در پاسخ برگردانید. قطعات به هم متصل خواهند شد: 

view('dashboard', ['users' => $users])
    ->fragments(['user-list', 'comment-list']);
 
view('dashboard', ['users' => $users])
    ->fragmentsIf(
        $request->hasHeader('HX-Request'),
        ['user-list', 'comment-list']
    );

تیغه گسترش دهنده

Blade به شما اجازه می دهد تا دستورالعمل های سفارشی خود را با استفاده از این directive روش تعریف کنید. هنگامی که کامپایلر Blade با دستور سفارشی روبرو می شود، callback ارائه شده را با عبارتی که دستور دارد فراخوانی می کند.

مثال زیر @datetime($var) دستورالعملی را ایجاد می کند که یک داده را فرمت می کند $var ، که باید نمونه ای از آن باشد DateTime : 

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Blade::directive('datetime', function (string $expression) {
            return "<?php echo ($expression)->format('m/d/Y H:i'); ?>";
        });
    }
}

همانطور که می بینید، ما format متد را به هر عبارتی که به دستورالعمل منتقل می شود زنجیره می کنیم. بنابراین، در این مثال، PHP نهایی تولید شده توسط این دستورالعمل به صورت زیر خواهد بود: 

<?php echo ($var)->format('m/d/Y H:i'); ?>

پس از به‌روزرسانی منطق یک دستورالعمل Blade، باید تمام نماهای کش شده Blade را حذف کنید. نماهای کش شده Blade ممکن است با استفاده از view:clear دستور Artisan حذف شوند.

اکو هندلرهای سفارشی

اگر سعی کنید یک شی را با استفاده از Blade "اکو" کنید، روش شیء __toString فراخوانی می شود. این __toString متد یکی از «روش‌های جادویی» داخلی PHP است. با این حال، گاهی اوقات ممکن است روی روش یک کلاس خاص کنترل نداشته باشید __toString ، مانند زمانی که کلاسی که با آن در تعامل هستید متعلق به یک کتابخانه شخص ثالث است.

در این موارد، Blade به شما این امکان را می دهد که یک کنترل کننده پژواک سفارشی برای آن نوع شی خاص ثبت کنید. برای انجام این کار، باید از روش Blade استفاده کنید stringable . روش stringable بسته شدن را می پذیرد. این بسته باید نوع شیئی را که مسئول رندر کردن آن است نشان دهد. به طور معمول، متد باید در متد کلاس برنامه شما stringable فراخوانی شود : boot AppServiceProvider 

use Illuminate\Support\Facades\Blade;
use Money\Money;
 
/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Blade::stringable(function (Money $money) {
        return $money->formatTo('en_GB');
    });
}

هنگامی که کنترل کننده اکو سفارشی شما تعریف شد، می توانید به سادگی شی را در قالب Blade خود بازتاب دهید: 

Cost: {{ $money }}

بیانیه های سفارشی If

برنامه نویسی یک دستور العمل سفارشی گاهی اوقات پیچیده تر از آنچه لازم است در هنگام تعریف دستورات شرطی ساده و سفارشی است. به همین دلیل، Blade Blade::if روشی را ارائه می دهد که به شما امکان می دهد به سرعت دستورالعمل های شرطی سفارشی را با استفاده از بسته شدن تعریف کنید. به عنوان مثال، اجازه دهید یک شرطی سفارشی تعریف کنیم که "دیسک" پیش فرض پیکربندی شده را برای برنامه بررسی می کند. ما ممکن است این کار را در boot روش خود انجام دهیم AppServiceProvider : 

use Illuminate\Support\Facades\Blade;
 
/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Blade::if('disk', function (string $value) {
        return config('filesystems.default') === $value;
    });
}

هنگامی که شرطی سفارشی تعریف شد، می توانید از آن در قالب های خود استفاده کنید: 

@disk('local')
    <!-- The application is using the local disk... -->
@elsedisk('s3')
    <!-- The application is using the s3 disk... -->
@else
    <!-- The application is using some other disk... -->
@enddisk
 
@unlessdisk('local')
    <!-- The application is not using the local disk... -->
@enddisk