laravel form components
vel 10 support (#28)
وفر الوقت واستفد من مجموعة من مكونات النماذج الديناميكية الجاهزة للاستخدام والقابلة للتخصيص بالكامل.
المكونات متوافقة مع LiveWire ويمكن استخدامها مع أطر واجهة المستخدم التالية:
وجدت هذه الحزمة مفيدة؟ يرجى النظر في دعم عملي!
| لارافيل | LiveWire | PHP | طَرد |
|---|---|---|---|
| ^9.0 | ^10.0 | ^2.0 | 8.1.* | 8.2.* | ^1.2 |
| ^8.0 | ^9.0 | ^2.0 | ^8.1 | ^8.2 | ^1.1 |
| ^8.0 | ^9.0 | ^2.0 | ^8.0 | ^8.1 | ^1.0 |
ما عليك سوى الاتصال بالمكونات التي تحتاجها في وجهات نظركم واترك هذه الحزمة تعتني بالجزء الذي يستغرق وقتًا طويلاً في توليد HTML.
< x:form::form class = " row " method = " PUT " :action = " route('user.update', $user) " :bind = " $user " >
< div class = " col-md-6 " >
< x:form::input name = " name " />
< x:form::input type = " email " name = " email " />
< x:form::textarea name = " biography " :locales = " ['fr', 'en'] " />
</ div >
< div class = " col-md-6 " >
< x:form::select name = " hobbies " :options = " [1 => 'Sport', 2 => 'Cinema', 3 => 'Literature', 4 => 'Travel'] " caption = " Select your favorite hobbies. " multiple />
< x:form::checkbox name = " technologies " :group = " [1 => 'Laravel', 2 => 'Bootstrap', 3 => 'Tailwind', 4 => 'Livewire'] " inline />
< x:form::radio name = " gender " :group = " [1 => 'Male', 2 => 'Female', 3 => 'Other'] " inline />
< x:form::toggle-switch name = " active " />
</ div >
< div class = " col-12 mt-2 " >
< x:form::button .link class = " btn-secondary me-3 " > {{ __ ( ' Cancel ' ) } } </ x:form::button .link >
< x:form::button .submit />
</ div >
</ x:form:form >واحصل على هذه المكونات:
يمكنك تثبيت الحزمة عبر الملحن:
composer require okipa/laravel-form-componentsيمكنك نشر ملف التكوين بـ:
php artisan vendor:publish --tag=form-components:configمن بين تكويناتها ، تتيح لك هذه الحزمة اختيار إطار واجهة المستخدم التي سيتم استخدامها.
يرجى ملاحظة أنه سيتعين عليك تثبيت وتكوين إطار واجهة المستخدم التي تريد استخدامها قبل استخدام هذه الحزمة.
يمكنك نشر طرق عرض الحزمة لتخصيصها إذا لزم الأمر:
php artisan vendor:publish --tag=form-components:viewsيمكن لف المكونات في مكون النموذج.
إذا لم يتم تعيين طريقة مخصصة ، فسيتم تعيين طريقة GET افتراضيًا.
سيتم إنشاء حقول CSRF وخادعة خداع تلقائيًا عند الحاجة ، وفقًا لطريقة النموذج المحددة:
@method() أو إعلان PUT أو PATCH أو DELETE مباشرة في سمة action@csrf() ، سيتم الإعلان عنه تلقائيًا من خلال الإجراءات POST و PUT و PATCH و DELETE يتم إنشاء النماذج مع سمة novalidate HTML افتراضية ، والتي تمنع التحقق من صحة المتصفح لصالح التحقق من صحة من جانب الخادم (وهي ممارسة جيدة لأمور الأمان).
< x:form::form method = " PUT " >
< x:form::input name = " first_name " />
...
</ x:form::form >أضف المدخلات والنص في النماذج الخاصة بك.
إذا لم تقم بتعيين نوع مخصص على إدخال ، فسوف يستغرق نوع text افتراضي.
يجب استخدام إدخال الراديو ، مربع الاختيار والزر مع مكوناتها الخاصة بسبب سلوكها المختلف.
يمكن استخدام مكون TextArea بنفس طريقة مكون الإدخال ولكن دون إعلان نوع.
< x:form::input type = " file " name = " avatar " />
< x:form::input name = " first_name " />
< x:form::input type = " email " name = " email " />
...
< x:form::textarea name = " description " />تعيين مكونات حدد في النماذج الخاصة بك.
تلقائي إنشاء خيارات من خلال توفير صفيف قيمة/تسمية.
HTML Select Elements لا تقبل صناديق سمات العناصر النائمة ، ومع ذلك ، فإن المكون المحدد يسمح لك بالتعامل مع خيار يشبه العناصر النائبة مسبقًا للآخر. سوف يتصرف هذا العنصر النائب عن المكونات الأخرى.
بشكل افتراضي ، يتم تحديد خيار تحديد العنصر النائب هذا وتعطيله وإخفائه. ومع ذلك ، ستتمكن من السماح بتحديده في حالة حاجة إلى تعيين حقل nullable على سبيل المثال. للقيام بذلك ، ما عليك سوى إضافة السمة allowPlaceholderToBeSelected مكونك إلى المكون.
في وضع متعدد ، ستهتم هذه الحزمة بتحويل الاسم إلى اسم صفيف ، لذلك لا يتعين عليك إضافته يدويًا.
@php ( $options = [ 1 => ' Laravel ' , 2 => ' Bootstrap ' , 3 => ' Tailwind ' , 4 => ' Livewire ' ] )
< x:form::select name = " hobby " placeholder = " What is your hobby prefered hobby? " :options = " $options " selected = " 1 " />
< x:form::select name = " hobbies " :options = " $options " :selected = " [2, 3] " allowPlaceholderToBeSelected multiple /> {{-- You'll be able to selected the placeholder and the name will be converted to hobbies[] --}}مربع الاختيار ، مفتاح التبديل ومكونات الراديو متاحة لك لاستخدامها.
نظرًا لعدم استخدام مدخلات الراديو وحدها ، فسيتعين عليك إعلان سمة group المطلوبة عند استخدامها ، في انتظار صفيف ترابط القيمة/التسمية التي سيتم إنشاء حقول الراديو منها.
بخصوص مربع الاختيار وتبديل إدخال تبديل ، ستتمكن من استخدامها في وضع واحد أو في المجموعة. لاستخدامها في وضع المجموعة ، سيتعين عليك إعلان سمة group أيضًا.
في وضع المجموعة ، ستهتم هذه الحزمة بتحويل الاسم إلى اسم صفيف ، لذلك لا يتعين عليك إضافته يدويًا.
إذا كنت ترغب في عرض مكونات الإدخال هذه مضمنة ، فما عليك سوى تحديد سمة inline .
< x:form::checkbox name = " newsletter_subscription " :checked = " true " /> {{-- 1 generated checkbox --}}
< x:form::checkbox name = " technologies " :group = " ['laravel' => 'Laravel', 'bootstrap' => 'Bootstrap'] " :checked = " laravel " /> {{-- 2 generated checkboxes --}}
< x:form::toggle-switch name = " active " :checked = " false " inline /> {{-- 1 generated toggle switch with inline mode --}}
< x:form::toggle-switch name = " technologies " :group = " ['tailwind' => 'Tailwind', 'livewire " => 'Livewire']" :checked="livewire"/> {{-- 2 generated toggle switches --}}
< x:form::radio name = " gender " :group = " ['female' => 'Female', 'male' => 'Male'] " :checked = " male " inline /> {{-- 2 generated radios with inline mode --}}مكونات الإرسال وزراعة الرابط متوفرة.
يتيح لك زر الإرسال تشغيل نموذج وسيقدم جسمًا افتراضيًا __('Submit') إذا لم يتم تعريف أي منها.
يتيح لك زر الارتباط تعيين إجراءات مثل Back أو Cancel في النماذج الخاصة بك من خلال توفير رابط بعرض يشبه زر. نظرًا لأن هذا المكون عبارة عن رابط HTML ، فسيوفر عنوانًا افتراضيًا من خلال تحليل جسمه.
بشكل افتراضي ، سيقوم كلا المكونين بتعيين لون خلفية أساسي إذا لم يتم تعريف سمة فئة مخصصة.
< x:form::form >
...
< div class = " d-grid " >
< x:form::button .submit >Submit this form</ x:form::submit > {{-- Will provide `btn-primary` class with Bootstrap UI --}}
< x:form::button .link class = " btn-secondary " href = " {{ back () } } " > {{-- Will auto-generate `title="Back"` --}}
< i class = " fas fa-undo fa-fw " ></ i >
Back
</ x:form::submit >
</ div >
</ x:form::form >يتم إنشاء مكون متوفر باستخدام مكونات الشفرة.
بعد كيفية عمل مكونات الشفرة ، يمكنك تعيين أي سمات وفئات HTML:
حدد معرفات المكونات كما تفعل لأي عنصر HTML.
إذا لم يتم تعيين معرف مخصص ، فسيتم إنشاء معرف باستخدام قيم Kebab Cased <type>-<name> .
< x:form::input id = " custom-id " name = " first_name " /> {{-- Default id: `input-first-name` --}}
< x:form::textarea id = " custom-id " name = " first_name " /> {{-- Default id: `textarea-first-name` --}}بشكل افتراضي ، ستعلن جميع مكونات الإدخال عن الهامش السفلي من أجل وضع أنفسهم بشكل صحيح في شكل.
ستحتاج أحيانًا إلى تعطيل هذا الهامش السفلي الافتراضي: يمكنك القيام بذلك عن طريق تعيين سمة marginBottom على false .
< x:form::input name = " first_name " /> {{-- Will declare a bottom margin --}}
< x:form::textarea name = " first_name " :marginBottom = " false " /> {{-- Will not declare any bottom margin --}}يمكنك تحديد الملصقات على جميع مكونات الإدخال (باستثناء الراديو).
إذا لم يتم تحديد تسمية مخصصة ، فستأخذ الملصقات __('validation.attributes.<name>) القيمة الافتراضية.
باتباع نفس السلوك ، ستوفر جميع مكونات الإدخال التي تسمح باستخدام placeholder (SELECT SELECT) عنصرًا نائبًا افتراضيًا سيأخذ قيمة label .
يمكنك تجاوز هذه القيمة الافتراضية عن طريق إعداد عنصر نائب مخصص.
يمكنك أيضًا إخفاء الملصقات التي تم إنشاؤها تلقائيًا وعنًا نائبًا من قبلهم إلى false .
< x:form::input name = " first_name " label = " First Name " placeholder = " Please fill your first name... " /> {{-- Will display the custom label and placeholder --}}
< x:form::input name = " last_name " :label = " false " :placeholder = " false " /> {{-- Will hide the label and placeholder --}}
< x:form::input type = " tel " name = " phone_number " /> {{-- Will display default auto-generated label and placeholder --}}تتيح لك هذه الحزمة تمكين أو تعطيل العلامات العائمة.
يمكنك تعيين سلوك التسمية العائمة العالمية باستخدام config('form-components.floating_label') .
ستتمكن من تجاوز هذا السلوك العالمي على مستوى النموذج لجميع المكونات الموجودة.
< x:form::form :floatingLabel = " true " >
< x:form::input name = " first_name " /> {{-- Will display a floating label even if it has been disabled in config --}}
</ x:form::form >أخيرًا ، يمكنك أيضًا تجاوز جميع السلوكيات المحددة الأخرى على المكونات نفسها.
< x:form::input name = " first_name " :floatingLabel = " true " /> يمكنك تحديد prepend append Addons HTML على مكونات الإدخال والنص.
< x:form::input name = " " prepend = " <i class= " fas fa-code fa-fw " ></i> " />
< x:form::input name = " search " append = " <i class= " fas fa-search fa-fw " ></i> " />ملاحظة: يمكنك استخدام HTML مباشرة بدلاً من مكونات إدارة Addon المعقدة.
يمكنك ربط النماذج البليغة أو الكائنات أو المجموعات أو المصفوفات من أجل قيم المكونات المرتبطة بالسيارات التلقائية.
ستؤدي بيانات الربط على مكون النموذج إلى ربط جميع مكوناته المحتوية.
يمكنك ربط البيانات مباشرة على مكون وتجاوز ربط النموذج.
في حالة خطأ التحقق من الصحة ، سيتم إعادة تعبئة المكونات بالقيم القديمة التي ستتجاوز القيم المرتبطة.
للحصول على حالة استخدام محددة ، يمكنك أيضًا استخدام @bind($boundDataBatch) وتوجيهات Blade @endbind لربط مجموعة من المكونات.
@php
$dataBatch1 = [ ' description ' => ' A wonderful description ' ];
$dataBatch2 = [ ' first_name ' => ' John ' , ' last_name ' => ' Bonham ' ];
@endphp
< x:form::form :bind = " $user " >
< x:form::input type = " email " name = " email " /> {{-- Will set the value from `$user->email` --}}
< x:form::textarea name = " description " :bind = " $dataBatch1 " /> {{-- Will set the value from `$dataBatch1['description`] --}}
@bind ( $dataBatch2 )
< x:form::input name = " first_name " /> {{-- Will set the value from `$dataBatch2['first_name`] --}}
< x:form::input name = " last_name " /> {{-- Will set the value from `$dataBatch2['last_name`] --}}
@endbind
</ x:form::form >يمكن تجاوز ربط البيانات عن طريق تعيين قيم مخصصة على المكونات.
@php ( $data = [ ' description ' => ' A wonderful description ' ]; )
< x:form::form :bind = " $user " >
...
< x:form::textarea
name = " description "
:bind = " $user "
:value = " $data['description'] " /> {{-- Will set the value from `$data['description`] --}}
</ x:form::form >ستتمكن المكونات من عرض أو إخفاء حالات النجاح/الخطأ ورسالة الخطأ عند تشغيل خطأ التحقق من الصحة:
يمكنك التحكم في هذا السلوك على مستويات مختلفة:
config('form-components.display_validation_success') و config('form-components.display_validation_failure')< x:form::form displayValidationSuccess = " false " displayValidationFailure = " false " >
< x:form::input type = " email " name = " email " /> {{-- Disabled success/error statuses and error message --}}
< x:form::textarea
name = " description "
displayValidationSuccess = " true "
displayValidationFailure = " true " /> {{-- Enabled success/error statuses and error message --}}
</ x:form::form >يمكنك أيضًا تخصيص حقيبة الخطأ التي يجب استخدامها لتحديد حالات النجاح/الخطأ ورسائل الخطأ على مكونات النماذج.
< x:form::form errorBag = " form_error_bag " > {{-- Error bag for all components within the form --}}
@errorbag ( ' group_error_bag ' ) {{-- Error bag for a group of components --}}
< x:form::input name = " first_name " />
< x:form::input name = " last_name " />
@enderrorbag
< x:form::input type = " email " name = " email " errorBag = " component_error_bag " /> {{-- Error bag for a specific component --}}
...
</ x:form::form >ساعد المستخدمين وعرض إرشادات إضافية تحت مكوناتك عن طريق إضافة التسميات التوضيحية.
< x:form::input name = " name " caption = " Please fill this input with your full name. " /> تنشيط الوضع متعدد اللغات على مكونات input textarea للاستفادة من الميزات التالية:
name="description" سيتم تحويله إلى name="description[<locale>]"__(validation.attributes.name) الترجمة المستخدمة لإنشاء التسمية الافتراضية ورسالة الخطأ سيتم إلحاقها باستخدام (<LOCALE>) < x:form::input name = " name " :locales = " ['fr', 'en'] " />
< x:form::textarea name = " description " :locales = " ['fr', 'en'] " />مكونات النموذج والإدخال متوافقة مع LiveWire.
بدلاً من تحديد wire:model على كل مكون تريد توصيله كما تفعل بدون هذه الحزمة ، هنا سيتعين عليك فقط تحديد wire="<optional-modifier>" HTML لجعل هذا العمل.
سيستخدم كل مكون إدخال سلكي سمة name وتحويله إلى wire:model="<name>" واحد.
< x:form::form wire:submit.prevent = " submit " >
< x:form::input name = " name " /> {{-- Will not be wired --}}
< x:form::input type = " email " name = " email " wire /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
< x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
< x-form::submit />
</ x:form::form >باتباع نفس المنطق ، يمكنك أيضًا سلك مكونات الإدخال مباشرة من النموذج الموجود فيها.
< x-form::form wire:submit.prevent = " submit " wire >
< x-form::input type = " email " name = " email " /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
< x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
< x-form::submit />
</ x:form::form > للحصول على حالة استخدام محددة ، يمكنك أيضًا استخدام @wire($modifier) وتوجيهات @endwire Blade لتسليم مجموعة من المكونات باستخدام معدل محدد LiveWire.
< x-form::form wire:submit.prevent = " submit " wire = " lazy " >
< x-form::input name = " first_name " /> {{-- Will bind the value from the Livewire component `$first_name` property with the `lazy` Livewire modifier --}}
@wire ( ' debounce.150ms ' )
< x-form::input name = " last_name " /> {{-- Will bind the value from the Livewire component `$last_name` property with the `debounce.150ms` Livewire modifier --}}
@endbind
@wire ( null )
< x-form::input type = " email " name = " email " /> {{-- Will bind the value from the Livewire component `$email` property with no defined Livewire modifier --}}
< x-form::input name = " description " wire = " lazy " /> {{-- Will bind the value from the Livewire component `$description` property with the the `lazy` Livewire modifier --}}
@endbind
< x-form::submit />
</ x-form::form >composer test يرجى الاطلاع على Changelog لمزيد من المعلومات حول ما تغير مؤخرًا.
يرجى الاطلاع على المساهمة للحصول على التفاصيل.
يرجى مراجعة سياسة الأمان الخاصة بنا حول كيفية الإبلاغ عن نقاط الضعف الأمنية.
ترخيص معهد ماساتشوستس للتكنولوجيا (MIT). يرجى الاطلاع على ملف الترخيص لمزيد من المعلومات.
