【Laravel-AdminLTE】コンポーネント集 【input章 - テキストボックス編】

はじめに

Laravel-AdminLTEパッケージに付属しているBladeComponentの解説、input章のテキストボックス編

どういうBladeComponentなん

Laravel-AdminLTEのコンポーネントで書いたタグが実際どんな感じに生成されるか

サンプル

コンポーネント

<x-adminlte-input name="iUser" label="User"/>

生成されるHTML

<div class="form-group"> <!-- fgroup-class -->
    <label for="iUser"><!-- label-class -->
        User
    </label>

    <div class="input-group"><!-- igroup-class --><!-- igroup-size -->
        <input id="iUser" name="iUser" value="" class="form-control"> 
    </div>
</div>

タグにつけられる属性

属性	説明	タイプ	デフォルト	必須
disable-feedback	入力グループに対する無効なフィードバックの通知を無効にする	any	null	no
error-key	エラー検証の際のnameを指定。指定しない場合nameが自動挿入される	string	null	no
fgroup-class	<div class="form-group"> に追加させるクラス名を書く	string	null	no
id	フォームのid属性	string	null	no
igroup-class	<div class="input-group"> に追加させるクラス名を書く	string	null	no
igroup-size	入力エリアのサイズ（smまたはlgの値のみ指定可能）	string("sm","lg")	null	no
label	ラベル名	string	null	no
label-class	<label> へ付けたいクラス名を入力	string	null	no
name	フォームのname属性。 idを指定していない場合このnameがidに自動挿入される	string	null	yes

igroup-sizeのサイズ変動

• sm
• 指定無し
• lg

<div class="col-3">
    <x-adminlte-input name="iUser" label="User" igroup-size="sm"/>
    <x-adminlte-input name="iUser" label="User"/>
    <x-adminlte-input name="iUser" label="User" igroup-size="lg"/>
</div>

横並びのフォームを作るには

コンポーネント記述

<x-adminlte-input name="name" label="名前" fgroup-class="row col-3"
                  label-class="col-4 col-form-label" igroup-class="col-8"/>

生成されるHTML

<div class="form-group row col-3">
    <label for="name" class="col-4 col-form-label">
        名前
    </label>

    <div class="input-group col-8">
        <input id="name" name="name" value="" class="form-control">
    </div>
</div>

タグの子要素に書けるタグ

prependSlot

テキストボックスの先頭にアイコンとかボタンとか入れたい時に書く

<x-adminlte-input name="iUser" label="User" placeholder="username" label-class="text-lightblue">
    <x-slot name="prependSlot">
        <div class="input-group-text">
            <i class="fas fa-user text-lightblue"></i>
        </div>
    </x-slot>
</x-adminlte-input>

appendSlot

テキストボックスの後尾にアイコンとかボタンとか入れたい時に書く

<x-adminlte-input name="iUser" label="User" placeholder="username" label-class="text-lightblue">
    <x-slot name="appendSlot">
        <div class="input-group-text">
            <i class="fas fa-user text-lightblue"></i>
        </div>
    </x-slot>
</x-adminlte-input>