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

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

https://github.com/jeroennoten/Laravel-AdminLTE


# どういうBladeComponentなん

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

### サンプル

```html:コンポーネント
<x-adminlte-input name="iUser" label="User"/>
```

```html:生成される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属性。<br>idを指定していない場合このnameがidに自動挿入される       | string | null       | yes  | 

### igroup-sizeのサイズ変動
- sm
- 指定無し
- lg

```html:
<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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/c6bd0d08-10ee-7c5f-cc23-22e67530fa0a.png)


### 横並びのフォームを作るには
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/63201a1b-65c1-0104-0888-13c856936ac8.png)



```html:コンポーネント記述
<x-adminlte-input name="name" label="名前" fgroup-class="row col-3"
                  label-class="col-4 col-form-label" igroup-class="col-8"/>
```

```html:生成される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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/ae1fbe72-d7e4-640b-434e-4289d03af417.png)


```html
<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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/34f597ca-81e1-1b86-82b2-a8c1edc87656.png)


```html
<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>

```