Input grubu
Metin alanının soluna ya da sağına sabit bir ek koyar: ülke kodu, para birimi, birim, alan adı ya da ikon. Etiket, ipucu ve doğrulama hatası acun:input ile aynı çalışır.
Ön ek ve son ek
prefix alanın soluna, suffix sağına ince bir çizgiyle ayrılmış metin ekler; alan tıklanınca çerçeve ve çizgi ana renge döner; ikisi birlikte de kullanılabilir. Ek, gönderilen değere katılmaz, yalnızca görseldir.
<div class="space-y-4">
<acun:input-group name="telefon" label="Telefon" prefix="+90" placeholder="5xx xxx xx xx" />
<acun:input-group name="fiyat" label="Ürün fiyatı" suffix="₺" placeholder="0,00" inputmode="decimal" />
<acun:input-group name="site" label="Web adresi" prefix="https://" suffix=".com" />
</div>| Prop | Değerler |
|---|---|
prefix | Soldaki metin |
suffix | Sağdaki metin |
İkonlu
Metin yerine ikon ya da başka bir içerik koymak için before ve after slot'larını kullanın. Slot verildiğinde aynı taraftaki prefix / suffix yok sayılır.
<div class="space-y-4">
<acun:input-group name="eposta" type="email" label="E-posta" placeholder="[email protected]">
<acun:slot:before><acun:icon name="envelope" size="4" /></acun:slot:before>
</acun:input-group>
<acun:input-group name="arama" type="search" label="Müşteri ara" placeholder="Ad, e-posta ya da telefon">
<acun:slot:after><acun:icon name="magnifying-glass" size="4" /></acun:slot:after>
</acun:input-group>
</div>| Prop | Değerler |
|---|---|
before | Soldaki özel içerik (slot) |
after | Sağdaki özel içerik (slot) |
Etiket, ipucu ve zorunlu alan
label alanın üstünde, hint altında gösterilir. required niteliği etikete kırmızı bir yıldız ekler ve alanın kendisine de geçer. type, placeholder, value, disabled gibi diğer nitelikler doğrudan içteki input'a eklenir.
<acun:input-group name="ucret" label="Aylık abonelik ücreti" suffix="₺" required hint="KDV hariç, kullanıcı başına aylık ücret." />| Prop | Değerler |
|---|---|
label | Üstteki etiket |
hint | Alttaki yardım metni |
required | Etikete * ekler |
Doğrulama hatası
Alan adına (name ya da wire:model) ait bir doğrulama hatası varsa çerçeve kırmızıya döner ve mesaj, ipucunun yerine alanın altında gösterilir.
<acun:input-group name="agirlik" label="Paket ağırlığı" suffix="kg" value="-3" hint="Kargo ücreti bu ağırlığa göre hesaplanır." />| Prop | Değerler |
|---|---|
name | Hata bu adla aranır; yoksa wire:model kullanılır |
Livewire ile
wire:model verildiğinde alan adı bu özellikten alınır; name yazmanız gerekmez. .live, .live.blur gibi değiştiriciler de desteklenir. Alandan çıkınca sunucuda doğrulatmak için .live.blur yazın: Livewire 4'te tek başına .blur değeri yalnızca tarayıcıda günceller, istek göndermez.
<acun:input-group wire:model.live.blur="telefon" label="Telefon" prefix="+90" />| Prop | Değerler |
|---|---|
wire:model | Bağlanan Livewire özelliği |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
label | null | Alanın üstündeki etiket |
name | null | Alan adı; yoksa wire:model değeri kullanılır |
hint | null | Alttaki yardım metni; hata varken yerine hata gösterilir. İkisi de aria-describedby ile alana bağlanır; hatada aria-invalid eklenir |
prefix | null | Soldaki metin eki |
suffix | null | Sağdaki metin eki |
type | text | input türü; diğer nitelikler de input'a eklenir |
disabled · readonly | false | acun:input gibi soluk zemin; kutu dar sütunlara sığar |