Etiket girişi
acun:tag-input serbest ya da listeden etiket girişi sağlar. Öneriler Türkçe harf kurallarına göre büyük/küçük harf ayırmadan aranır. Uzun bir listeden bir ya da birden çok değer seçtirmek için Combobox sayfasındaki acun:combobox'ı kullanın.
Etiket girişi
Metni yazıp Enter ya da virgül ile etikete çevirin; boş kutuda Backspace son etiketi siler. Aynı etiket iki kez eklenmez. Başlangıç etiketleri value ile dizi olarak verilir.
<acun:tag-input name="etiketler" label="Etiketler" :value="['öncelikli', 'toptan']" />| Prop | Değerler |
|---|---|
value | Başlangıç etiketleri (dizi) |
placeholder | Yazıp Enter'a basın |
Listeden seçim ve sınır
suggestions verildiğinde yalnızca bu listedeki değerler eklenebilir ve yazarken en fazla altı öneri gösterilir. max eklenebilecek etiket sayısını sınırlar.
<acun:tag-input name="kategoriler" label="Kategoriler" :suggestions="['Elektronik', 'Giyim', 'Kitap', 'Ev ve yaşam', 'Spor']" :value="['Elektronik']" :max="3" />| Prop | Değerler |
|---|---|
suggestions | İzin verilen değerler |
max | En fazla etiket sayısı |
Pasif
disabled bileşeni kilitler ve gri arka planla gösterir: kutuya yazılamaz ve etiketlerin silme düğmeleri gizlenir. Klasik formda gizli alanlar da devre dışı kalır, yani değer gönderilmez.
<acun:tag-input name="kapali_etiketler" label="Etiketler" :value="['öncelikli', 'toptan']" disabled />| Prop | Değerler |
|---|---|
disabled | true | false (varsayılan false) |
Alpine ile
Alpine sayfalarında bileşen x-model ile dışarıdaki bir diziye bağlanır; etiket eklendikçe dizi, dizi değiştikçe bileşen güncellenir. class, data-* gibi diğer nitelikler bileşenin dış kapsayıcısına eklenir.
<div x-data="{ etiketler: ['öncelikli'] }" class="space-y-2">
<acun:tag-input x-model="etiketler" label="Etiketler" />
<p class="text-sm text-gray-600 dark:text-zinc-400">Etiketler: <span x-text="etiketler.join(', ')"></span></p>
</div>| Prop | Değerler |
|---|---|
x-model | Dizi |
class | Dış kapsayıcıya eklenir |
Formda ve Livewire ile
Klasik formda her etiket name[] adlı gizli alanla gönderilir. wire:model verildiğinde dizi doğrudan Livewire özelliğine yazılır; gizli alanlar yine özelliğin adıyla eklenir, böylece acun:form dirty-check ve acun:form-actions etiket değişikliğini görür. Etiket eklenince ya da silinince bileşen change olayı yayınlar; kutuya yazılan metin değişiklik sayılmaz. Bileşen doğrulama hatasını kendisi göstermez; gerekirse @error ile ekleyin.
<acun:tag-input wire:model="etiketler" label="Etiketler" :suggestions="$etiketListesi" />
@error('etiketler')
<p class="text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
@enderror| Prop | Değerler |
|---|---|
wire:model | Dizi |
change | Etiket eklenince ya da silinince (kabarcıklanır) |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
label | null | Üstteki etiket |
value | [] | Başlangıç etiketleri |
placeholder | Yazıp Enter'a basın | Boş kutudaki metin |
suggestions | [] | Verilirse yalnızca bu listeden seçilebilir |
max | null | En fazla etiket sayısı |
disabled | false | Yazmayı ve silmeyi kapatır; gizli alanlar gönderilmez |
wire:model / x-model | — | Livewire ya da Alpine bağlaması (dizi) |