laravel form componentsダウンロード-LARAVEL laravel form componentsソースコードダウンロード

時間を節約し、動的ですぐに使いやすく、完全にカスタマイズ可能なフォームコンポーネントのセットを利用してください。

コンポーネントはLivewire互換性があり、次のUIフレームワークで使用できます。

ブートストラップ5
ブートストラップ4
TailWindCSS 3（今後の機能）

このパッケージは役立ちましたか？私の仕事をサポートすることを検討してください！

互換性

ララヴェル	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

アップグレードガイド

Okipa/Laravel-BootstrapコンポーネントからOkipa/Laravel-Form-Componentsまで

使用例

ビューで必要なコンポーネントを呼び出して、このパッケージに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 >

これらのコンポーネントを表示します。

Laravelフォームコンポーネントスクリーンショット

インストール
構成
ビュー
コンポーネント
- 形状
- 入力
- Textarea
- 選択します
- チェックボックス
- スイッチ
- 無線
- ボタン
方法
- 属性とクラスに対処します
- IDを設定します
- ラベルとプレースホルダーを管理します
- フローティングラベルの表示を処理します
- アドオンを設定します
- データのバインド
- カスタム値を設定します
- 検証ステータスとエラーを処理します
- キャプションを追加します
- 多言語モードをアクティブにします
- Livewireでプラグ
テスト
Changelog
貢献
クレジット
ライセンス

インストール

Composer経由でパッケージをインストールできます。

composer require okipa/laravel-form-components

構成

構成ファイルを次のように公開できます。

php artisan vendor:publish --tag=form-components:config

その構成の中で、このパッケージを使用すると、どのUIフレームワークが使用されるかを選択できます。

このパッケージを使用する前に、使用するUIフレームワークをインストールして構成する必要があることに注意してください。

ビュー

必要に応じてパッケージビューを公開してカスタマイズできます。

php artisan vendor:publish --tag=form-components:views

コンポーネント

形状

コンポーネントは、フォームコンポーネントにラップできます。

カスタムメソッドが設定されていない場合、デフォルトでGETメソッドが設定されます。

定義されたフォーム方法に従って、必要に応じて、非表示のCSRFおよびスプーフィングメソッドフィールドは、必要に応じて自動的に生成されます。

@method()ディレクティブを定義する必要はありません。 action属性でアクションを直接PUT 、 PATCH 、またはDELETE必要はありません
@csrf()ディレクティブを定義する必要はありません。post POST PUT 、 PATCH 、 DELETEアクションで自動的に宣言されます

フォームは、デフォルトのnovalidate HTML属性で生成されます。これは、サーバー側の検証を支持してブラウザの検証を妨げています（これはセキュリティ問題の良い慣行です）。

< 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選択要素はネイティブにプレースホルダー属性を受け入れませんが、選択コンポーネントを使用すると、プレースホルダーのようなオプションが他のオプションに加えられます。このプレースホルダーは、他のコンポーネントのように動作します。

デフォルトでは、この選択したプレースホルダーオプションが選択され、無効化され、非表示になります。ただし、たとえば、 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 >

方法

属性とクラスに対処します

提供されたコンポーネントは、ブレードコンポーネントを使用して構築されています。

Bladeコンポーネントの仕組みに従って、HTML属性とクラスを設定できます。

属性はデフォルトのものを置き換えます
クラスは既存のものと融合されます

IDを設定します

任意のHTML要素に対して行うようにコンポーネントIDを定義します。

カスタムIDが設定されていない場合、Kebab Cased <type>-<name>値を使用してIDが生成されます。

< 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を定義し、入力およびTextareaコンポーネントにHTMLアドオンappendできます。

    < 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を直接使用できます。

データのバインド

バインドされたコンポーネント値を自動充填するために、雄弁なモデル、オブジェクト、コレクション、または配列をバインドできます。

フォームコンポーネント上のバインディングデータは、含まれているすべてのコンポーネントのバインディングをトリガーします。

コンポーネントにデータを直接バインドし、フォームバインディングをオーバーライドできます。

検証エラーの場合、コンポーネントは、バウンド値をオーバーライドする古い値によって再定義されます。

特定のユースケースについては、 @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コンポーネントで多言語モードをアクティブにして、次の機能から恩恵を受けます。

コンポーネントの複製：ロケールごとに1つのコンポーネントが表示されます
名前のローカリゼーション： 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でプラグ

フォームおよび入力コンポーネントは、Livewire互換です。

wire:model HTML属性は、この作業を行うためにwire="<optional-modifier>" HTML属性を定義する必要があります。

各有線入力コンポーネントは、独自のname属性を使用し、有効なwire:model="<name>" one。

< 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ブレードディレクティブを使用して、特定の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 >