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

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

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]);