Menu Items: Icons, Grouping, Ordering and Badges

Menu Items: Icons, Grouping, Ordering and Badges

2024-12-17 وقت القراءه : 2 دقائق

تتيح لنا filament التحكم في القائمة الجانبيه من حيث الإيقونات، عمل group ....

كيفية إنشاء Group في Filament

لفرض هنا نريد أن نعمل group بإسم shops يضم كل من User Resource, Product Resource, Voucher Resource.

هنا يجب علينا الذهاب لكل resource وإضافة خاصية navigationGroup ومن ثم إعطائها إسم معين هنا سوف نستخدم shop وهذا الإسم يجب ان يكون موحد في جميع resource التي سوف تندرج تحته.

class UserResource extends Resource
{
    protected static ?string $model = User::class;
    protected static ?string $recordTitleAttribute = 'name';
    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    protected static ?string $navigationGroup = 'shop';


 }


 class ProductResource extends Resource
{
    protected static ?string $model = Product::class;
    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    protected static ?string $navigationGroup = 'shop';
 }


 class VoucherResource extends Resource
{
    protected static ?string $model = Voucher::class;
    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';
    protected static ?string $recordTitleAttribute = 'code';

    protected static ?string $navigationGroup = 'shop';
}


تغيير الإيقونات في filament

لو نظرنا لإي resource  نرى أنه محضر بشكل مسبق بدالة navigationIcon

class UserResource extends Resource
{
    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';


 }

وهذه هي الإيقونة التي تظهر بشكل إفتراضي ـ وكما نلاحظ أن filament تستخدم heroicon ولتغييرها يجب الذهاب إلى موقع heroicon وإختيار الإيقونة المناسبة

class ProductResource extends Resource
{
    protected static ?string $navigationIcon = 'heroicon-o-queue-list';
}


class UserResource extends Resource
{
    protected static ?string $navigationIcon = 'heroicon-o-users';
}


class VoucherResource extends Resource
{
    protected static ?string $navigationIcon = 'heroicon-o-qr-code';
}


ترتيب القائمة الجانبية في Filament

يمكن لنا ترتيب العناصر من خلال إستخدام الدالة navigationSort ومن ثم تحديد القيمة

class ProductResource extends Resource
{
    protected static ?int $navigationSort = 1;
}


class UserResource extends Resource
{
    protected static ?int $navigationSort = 2;
}


class VoucherResource extends Resource
{
    protected static ?int $navigationSort = 3;
}


كيفية إضافة badge في Filament

نرى ببعض لوحات التحكم بالقائمه الجانبيه أنه يوجد عدد للمستخدمين ، عدد للمنتجات ....

للقيام بذلك، نذهب للـ Resource التي نريد إظهار badge بجانبها، ونضيف الدالة getNavigationBadge 

إظهار badge بجانب Products نذهب إلى Product Resource ونضيف الدالة getNavigationBadge

public static function getNavigationBadge(): ?string
{
    return self::getModel()::count();
}


إظهار badge بجانب Vouchers نذهب إلى VoucherResource ونضيف الدالة getNavigationBadge

public static function getNavigationBadge(): ?string
{
    return self::getModel()::count();
}

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