Arama formu
Arama kutusu: büyüteç ikonu, yazınca beliren temizle düğmesi, klavye kısayolu ve isteğe bağlı birleşik Ara düğmesi. Sayfayı yenileyen bir GET formu ya da Livewire ile canlı arama olarak kullanılır.
Temel arama
Alana yazınca sağda bir temizle (×) düğmesi çıkar; Esc de alanı temizler. class dıştaki kutuya gider (genişlik vermek için), diğer nitelikler (name, value, placeholder, autofocus…) alana eklenir. Görünür etiket yoksa placeholder ekran okuyucular için alanın adı olur.
<acun:search name="q" placeholder="Müşteri, sipariş no ya da e-posta ara" />| Prop | Değerler |
|---|---|
clearable | false: temizle düğmesi ve Esc kapanır |
Sayfayı yenileyen arama formu
action verildiğinde bileşen bir <form role="search"> olur: Enter ya da button ile eklenen Ara düğmesi aranan metni GET ile o adrese gönderir, metin adreste ?q= olarak kalır ve bağlantı paylaşılabilir. Diğer sorgu parametrelerini korumak için gizli alanları bileşenin içine yazın; formun içinde yer alırlar.
<acun:search name="q" :value="request('q')" :action="route('musteriler.index')" button="Ara" placeholder="Müşteri ara">
<input type="hidden" name="durum" value="{{ request('durum') }}">
</acun:search>| Prop | Değerler |
|---|---|
action | Formun gönderileceği adres |
method | GET (varsayılan) ya da POST; POST'ta @csrf eklenir |
button | Birleşik gönder düğmesinin metni |
Klavye kısayolu
shortcut verilen tuş, sayfanın herhangi bir yerinde basıldığında alana odaklanır; başka bir alana yazılırken ya da Ctrl/⌘ ile basıldığında devreye girmez. Alan boşken ve odakta değilken sağda tuşun ipucu görünür.
<acun:search name="q" shortcut="/" placeholder="Menüde ara" />| Prop | Değerler |
|---|---|
shortcut | Alana odaklanan tuş, örneğin "/" |
Büyük boy
size="lg" 48 piksel yüksekliğinde, bir sayfanın ana araması için (örneğin yardım merkezi) daha büyük bir alan verir.
<acun:search name="soru" size="lg" button="Ara" placeholder="Örn. iade süreci, fatura indirme" />| Prop | Değerler |
|---|---|
size | md (40 px, varsayılan) ya da lg (48 px) |
Livewire ile canlı arama
wire:model.live ile yazdıkça sonuçlar gelir; bir istek sürerken büyütecin yerinde dönen bir gösterge çıkar (yalnızca bu özelliğin istekleri için). Sunucu değeri değiştirirse (örneğin bir "Temizle" düğmesiyle) temizle düğmesi ve kısayol ipucu kendiliğinden doğru görünür.
<acun:search wire:model.live.debounce.300ms="arama" shortcut="/" placeholder="Müşteri ara" />| Prop | Değerler |
|---|---|
wire:model | Bağlanan Livewire özelliği; alanın kimliği de buradan gelir |
Filtreli arama formu
Diğer alanlarla bir formun içinde kullanırken action vermeyin (iç içe form olmaz) ve formun kendi gönder düğmesini kullanın. label alanın üstüne görünür bir etiket koyar.
<form wire:submit="ara" class="grid items-end gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_auto]">
<acun:search wire:model="aranan" label="Aranan" placeholder="Ad, telefon ya da adres" />
<acun:select wire:model="durum" label="Durum" :options="['' => 'Tüm durumlar', 'bekliyor' => 'Bekliyor', 'onaylandi' => 'Onaylandı']" />
<acun:button type="submit">Ara</acun:button>
</form>| Prop | Değerler |
|---|---|
label | Alanın üstündeki görünür etiket |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
name | null | Alan adı (GET formunda sorgu parametresi) |
placeholder | Ara | Yer tutucu; görünür etiket yoksa alanın erişilebilir adı |
label | null | Alanın üstündeki görünür etiket |
action | null | Verilirse bileşen <form role="search"> olur; yoksa <div role="search"> |
method | GET | GET ya da POST (POST'ta @csrf eklenir) |
button | null | Birleşik gönder düğmesinin metni |
shortcut | null | Alana odaklanan tuş, örneğin "/" |
clearable | true | Temizle (×) düğmesi ve Esc ile temizleme |
size | md | md (40 px) ya da lg (48 px) |
class | — | Dıştaki kutuya eklenir; diğer nitelikler alana |