laravel form components
vel 10 support (#28)
ประหยัดเวลาและใช้ประโยชน์จากชุดของส่วนประกอบแบบฟอร์มแบบไดนามิกพร้อมใช้งานและปรับแต่งได้อย่างสมบูรณ์
ส่วนประกอบนั้นเข้ากันได้กับ LiveWire และสามารถใช้กับกรอบ UI ต่อไปนี้:
พบว่าแพ็คเกจนี้มีประโยชน์? โปรดพิจารณาสนับสนุนงานของฉัน!
| Laravel | 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คุณสามารถเผยแพร่ไฟล์ config ด้วย:
php artisan vendor:publish --tag=form-components:configในบรรดาการกำหนดค่าแพ็คเกจนี้ช่วยให้คุณเลือกเฟรมเวิร์ก UI ที่จะใช้
โปรดทราบว่าคุณจะต้องติดตั้งและกำหนดค่าเฟรมเวิร์ก UI ที่คุณต้องการใช้ก่อนใช้แพ็คเกจนี้
คุณสามารถเผยแพร่มุมมองแพ็คเกจเพื่อปรับแต่งหากจำเป็น:
php artisan vendor:publish --tag=form-components:viewsส่วนประกอบสามารถห่อเป็นส่วนประกอบของฟอร์ม
หากไม่มีการตั้งค่าวิธีการกำหนดเองเมธอด GET จะถูกตั้งค่าตามค่าเริ่มต้น
CSRF ที่ซ่อนอยู่และฟิลด์วิธีการปลอมแปลงจะถูกสร้างขึ้นโดยอัตโนมัติเมื่อจำเป็นตามวิธีการฟอร์มที่กำหนดไว้:
@method() ประกาศ PUT PATCH หรือ DELETE การกระทำของคุณโดยตรงในแอตทริบิวต์ action@csrf() มันจะมีการประกาศโดยอัตโนมัติด้วย POST PUT PATCH และ DELETE การกระทำโดยอัตโนมัติ แบบฟอร์มถูกสร้างขึ้นด้วยแอตทริบิวต์ HTML novalidate เริ่มต้นซึ่งเป็นการป้องกันการตรวจสอบความถูกต้องของเบราว์เซอร์ในความโปรดปรานของการตรวจสอบฝั่งเซิร์ฟเวอร์ (ซึ่งเป็นวิธีปฏิบัติที่ดีสำหรับเรื่องความปลอดภัย)
< x:form::form method = " PUT " >
< x:form::input name = " first_name " />
...
</ x:form::form >เพิ่มอินพุตและ textarea ลงในแบบฟอร์มของคุณ
หากคุณไม่ได้ตั้งค่าประเภทที่กำหนดเองเป็นอินพุตจะต้องใช้ประเภท 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 " />ตั้งค่าส่วนประกอบในแบบฟอร์มของคุณ
Auto สร้างตัวเลือกโดยการจัดหาอาร์เรย์ค่าเชื่อมโยง/เลเบล
องค์ประกอบ HTML SELECT โดยธรรมชาติไม่ยอมรับแอตทริบิวต์ตัวยึดตำแหน่งอย่างไรก็ตามองค์ประกอบที่เลือกช่วยให้คุณสามารถจัดการกับตัวเลือกที่เหมือนตัวยึดได้จะถูกเตรียมไว้ให้กับคนอื่น ๆ ตัวยึดตำแหน่งนี้จะทำตัวเป็นส่วนประกอบอื่น ๆ
โดยค่าเริ่มต้นตัวเลือกตัวเลือกตัวเลือกตัวเลือกนี้จะถูกเลือกปิดใช้งานและซ่อนเร้น อย่างไรก็ตามคุณจะสามารถอนุญาตให้เลือกได้ในกรณีที่คุณต้องการตั้งค่าฟิลด์ 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 ใด ๆ
หากไม่มีการตั้งค่า ID ที่กำหนดเอง ID จะถูกสร้างขึ้นโดยใช้เคบับ 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 (เลือกรวม) จะให้ตัวยึดตำแหน่งเริ่มต้นที่จะใช้ค่า 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') config
คุณจะสามารถแทนที่พฤติกรรมระดับโลกนี้ในระดับฟอร์มสำหรับส่วนประกอบที่มีอยู่ทั้งหมด
< 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 HTML addons บนส่วนประกอบอินพุตและ textarea
< 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 ที่ซับซ้อน
คุณสามารถผูกโมเดลที่มีคารมคมคายวัตถุคอลเลกชันหรืออาร์เรย์เพื่อเพิ่มค่าส่วนประกอบที่ถูกผูกไว้อัตโนมัติ
ข้อมูลที่มีผลผูกพันในส่วนประกอบของฟอร์มจะกระตุ้นการเชื่อมโยงของส่วนประกอบที่มีอยู่ทั้งหมด
คุณสามารถผูกข้อมูลโดยตรงกับส่วนประกอบและแทนที่การผูกแบบฟอร์ม
ในกรณีของข้อผิดพลาดการตรวจสอบส่วนประกอบจะถูก repopulated โดยค่าเก่าที่จะแทนที่ค่าที่ถูกผูกไว้
สำหรับกรณีการใช้งานที่เฉพาะเจาะจงคุณยังสามารถใช้ @bind($boundDataBatch) และคำสั่ง @endbind Blade เพื่อผูกกลุ่มของส่วนประกอบ
@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 (MIT) โปรดดูไฟล์ใบอนุญาตสำหรับข้อมูลเพิ่มเติม
