لارافيل, Blade / 2024-11-24

التوجية الجديد @class في لارافيل 8.51.0، ما هو وكيفية إستخدامة

التوجية الجديد @class في لارافيل 8.51.0، ما هو وكيفية إستخدامة

2024-11-24 وقت القراءه : 1 دقائق

في لارافيل  8.51.0 ظهر توجية directive جديد وهو @class ويستخدم لتطبيق كلاس css معين ضمن شروط معينة، حيث يقوم بإستقبال مصفوفة من الكلاسات بحيث يحتوي مفتاحة المصفوفة على الشرط.

لفرض أن لدينا ديف معين ونريد ان يكون باللون الأحمر اذا كانت القيمة isActive=true أما إذا كانت isDisabled=true ان يكون لون الدف باللون الأخضر.

قبل ظهور التوجيه directive الجديد كنا نقوم به بالشكل التالي:

public function index(){
    return view('/article',[
        'isActive'=> true,
        'isDisabled'=>true,
    ]);
}


<div class="alert {{ $isActive ? 'alert-danger' :'' }} {{ $isDisabled ? 'alert-danger' :'' }}">Dashboard</div>


أما بإستخدام التوجيه @class الجديد فيمكننا القيام بذلك بالطريقة التالية

<div @class([
    'alert',
    'alert-success' => $isActive,
    'alert-primary' =>  $isDisabled,
    ])>
</div>


بالتالي فإن الكود الخاص بنا سيكون أكثر قابلية للقراءة ومختصر بشكل أكثر.

مثال أخر

@php
    $isActive = false;
    $hasError = true;
@endphp


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

لكن هنا يجب الإنتباه إننا لا نستطيع إستخدام class مع @class

على سبيل المثال 

<span class="random" @class([
    'p-4',
    'font-bold' => $isActive,
])></span>

بل يمكن إضافة الكلاس random إلى @class كالتالي

<span @class([
    'p-4 random',
    'font-bold' => $isActive,
])></span>

التعليقات
maram as
منذ 11 شهر

شكرا لى المعلومة القيمة

maram as
منذ 11 شهر

شكرا uلى المعلومة القيمة

maram as
منذ 11 شهر

شكرا على المعلومة القيمة

maram as
منذ 11 شهر

شكرا على المعلومة القيمة

maram as
منذ 11 شهر

لو سمحت بنقدر نستخدم class@ ضمن تطوير نموذج امتحاني؟

إضافة تعليق
Loading...