فرعوني
جاري التحميل...

الشروع في العمل

1.x
Select2

الشروع في العمل

# لماذا Select2؟

Select2 هي حزمة تساعد على استخدام أضافة Select2 بطريقة سهله في مكونات Livewire.

# التنصيب

قم بتنصيب اخر اصدار بواسطة Composer.

1composer require pharaonic/livewire-select2

اختياري : نشر ملف JavaScript

1php artisan vendor:publish --tag=livewire-select2

# التضمين

هكذا يمكنك تضمين Select2 في blade الخاص بك.
يجب أن تقوم بتضمين Select2 بعد سكربت كلا من Livewire, jQuery and Select2, وهناك طريقين يمكنك استخدام المناسبة لك.

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        ...
 5        <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css">
 6        @livewireStyles
 7    </head>
 8    <body>
 9        ...
10        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
11        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
12        @livewireScripts
13 
14        <!-- Way 1 -->
15        <x:pharaonic-select2::scripts />
16 
17        <!-- Way 2 : Vendor Publishing REQURIED -->
18        <script src="{{ asset('vendor/pharaonic/pharaonic.select2.min.js') }}"></script>
19    </body>
20</html>

# طريقة الاستخدام

هذه طريقة استخدام Select2 في اي مكون livewire خاص بك.
فقط : wire:model, wire:model.defer مسموح بهم.

1<div wire:ignore>
2    <select data-pharaonic="select2" data-component-id="{{ $this->id }}" wire:model="country">
3        <option value="EG">Egypt</option>
4        <option value="TW">Taiwan</option>
5        ...
6    </select>
7</div>

# الصفات

قائمة من الصفات يمكنك استخدامها للتحكم في Select2.

الصفة الوصف
multiple
 السماح بالاختيار المتعدد.
data-clear
 تفعيل خاصية AllowClear.
data-tags
 السماح بالاختيار في شكل وسوم.
data-search-off
 إخفاء صندوق البحق.
data-placeholder="Select..."
 نص Placeholder.
data-language="ar"
 اختيار لغة محددة إذا كنت تستخدم ملفات Select2 i18n.
data-dir="rtl"
 تحديد اتجاه العنصر.
data-parent="#id_here"
 إذا كنت تواجه مشكلة مع Bootstrap Modal, يمكنك وضح id الخاص بـ Model وكل شئ سيعمل بشكل صحيح.

# الأحداث

يمكنك استخدام الأحداث لتفعيل Select2 على كل الصفحة من جديد أو على عنصر بعينه.

1// Init Event
2$this->dispatchBrowserEvent('pharaonic.select2.init');
3 
4// Load Event
5$this->dispatchBrowserEvent('pharaonic.select2.load', [
6    'component' => $this->id,
7    'target'    => '#input-here'
8]);

# المساهمين

MoamenEltouny
18 مساهمة