Komponen Input
Parameter untuk penggunakan komponen input
berikut adalah opsi dan requirement untuk penggunaan komponen input
// Contoh penggunaan komponen input
<x-input
type="text"
label="Name"
id="textName"
width="3"
name="name"
placeholder="Max 200"
required
value="{{@$results->name}}"
/>
1. label
<x-input
label="Name"
...
/>
variable attribut label required, dan harus ada. Fungsinya untuk label sebuah input. jika tidak diperlukan sebuah label maka isi attribute tersebut "". contoh label="".
2. id
<x-input
...
id="textName"
...
/>
variable attribut id sifatnya opsional, tapi sangat berguna jika membutuhkan manipulasi dom dengan js/jquery. misalnya akan menggunakan type="date" yang akan menggunakan library datepicker, maka attribut komponen id ini sangat berguna
3. width
<x-input
...
width="3"
...
/>
width ini menentukan nilai grid dalam bootstrap untuk labelnya. misal width 3, maka untuk label = 3 grid dan untuk input otomatis = 9 grid (dari total 12 grid). namun jika width=12, maka label=12 dan input 12.
3. name
<x-input
...
name="namaInputan"
...
/>
name ini nantinya akan di parsing ke elemen input sebagai value dari attribute name dan juga sebagai value dari attribute id untuk elemen span
4. placeholder
<x-input
...
placeholder="Maksimal 200 karakter"
...
/>
digunakan sebagai teks placeholdernya
5. required
<x-input
...
required
...
/>
jika ditambahkan required, maka inputan tersebut akan di assign sebagai inputan required (penambahan icon asterisk pojok kiri atas di inputan). namun hanya di tampilan view saja.
6. type
<x-input
...
type="text"
...
/>
sifatnya opsional, kalau tidak ditambahkan maka akan otomatis jadi tipe text. type ini sama halnya sebagai isian attribute input biasanya. isinya bisa text, number atau date.
Berikut adalah pre-build componen input yang dipanggil dari kode diatas yang berada di folder components
<div class="form-group row {{$required ?? ''}}">
@if(isset($label))
<label class="col-md-{{$width}} control-label">{{$label}}</label>
@endif
<div class="col-md-{{(12-$width) > 0? 12-$width : 12}}">
<input id="{{$id ?? 'input-string'}}" name="{{$name}}" class="form-control" placeholder="{{$placeholder ?? ''}}" type="{{ @$type ? @$type : 'text'}}"
{{$required ?? ''}} value="{{$value ?? ''}}">
<span id="{{$name}}" class="text-danger" data-label="alert"></span>
</div>
</div>
Penting !!! jangan update komponen yang sudah ada, jika sangat diperlukan untuk menambah dynamic atribut pastikan pakai variable yang nullable / tambahkan pengecekan isset
Last updated