Diğer
Küçük yardımcı bileşenler: acun:copy-button bir metni tek tıkla panoya kopyalar, acun:kbd klavye tuşlarını ve kısayolları metin içinde tuş görünümünde gösterir.
Metni kopyalama
text panoya yazılacak metindir. Tıklayınca düğme iki saniye boyunca onay simgesini ve "Kopyalandı" yazısını gösterir; sonuç ekran okuyucuya da duyurulur. Pano API'si kullanılamıyorsa (düz http, izin verilmeyen bir iframe) eski yöntemle yeniden denenir, o da olmazsa düğme "Kopyalanamadı" der. Görünümü variant ve size belirler; yazıyı label değiştirir.
<div class="flex flex-wrap items-center gap-3">
<span class="font-mono text-sm text-gray-900 dark:text-zinc-100">SİP-2026-004817</span>
<acun:copy-button text="SİP-2026-004817" size="sm" />
<acun:copy-button text="SİP-2026-004817" variant="soft" size="sm" label="Sipariş numarasını kopyala" />
</div>| Prop | Değerler |
|---|---|
text | Kopyalanacak metin |
label | Düğme yazısı; varsayılan "Kopyala" |
variant | acun:button varyantları; varsayılan white |
size | sm | md | lg | icon |
Bir öğeden kopyalama
target bir CSS seçicisi alır. Hedef bir form alanıysa (input, textarea, select) değeri, değilse baştaki ve sondaki boşluklar atılmış metni kopyalanır. Değer tıklama anında okunur; alanda yapılan değişiklikler ya da Livewire güncellemeleri de kopyaya yansır.
<div class="space-y-2">
<p id="teslimat-adresi" class="rounded-sm bg-gray-50 p-3 text-sm dark:bg-zinc-800/60">Caferağa Mah. Moda Cad. No: 7, Kadıköy / İstanbul</p>
<acun:copy-button target="#teslimat-adresi" size="sm" label="Adresi kopyala" />
</div>
<div class="space-y-2">
<acun:textarea id="siparis-notu" label="Sipariş notu" rows="2">Hediye paketi yapılsın; fatura ayrıca e-postayla gönderilsin.</acun:textarea>
<acun:copy-button target="#siparis-notu" size="sm" label="Notu kopyala" />
</div>| Prop | Değerler |
|---|---|
target | CSS seçicisi, ör. #teslimat-adresi |
Giriş grubu içinde
size="icon" yalnızca simgeyi gösterir; label bu durumda düğmenin ekran okuyucu adı ve fareyle üzerine gelince çıkan ipucu olur. Başarılı bir kopyalamadan sonra düğme copied olayını yayar ($event.detail.text); örnekte bu olayla bir bildirim gösteriliyor. Diğer nitelikler (class, disabled, wire:click…) doğrudan düğmeye eklenir.
<acun:input-group id="davet-baglantisi" label="Davet bağlantısı" value="https://panel.ornek.test/davet/K7M2-Q9XA" readonly>
<acun:slot:after>
<acun:copy-button
target="#davet-baglantisi"
variant="ghost"
size="icon"
label="Bağlantıyı kopyala"
class="-me-1.5"
x-on:copied="$dispatch('toast', { type: 'success', message: 'Davet bağlantısı panoya kopyalandı.' })"
/>
</acun:slot:after>
</acun:input-group>| Prop | Değerler |
|---|---|
size="icon" | Yalnızca simge; ad label'dan gelir |
x-on:copied | Başarılı kopyalamadan sonra çalışır |
Klavye tuşu
acun:kbd tek bir tuşu slot içeriğiyle gösterir. Metin içinde satırın akışını bozmadan durur; kısayolları ve yardım metinlerini anlatmak için kullanın. ⌘, ⇧, ↵ gibi simgeler ekran okuyucuya "Command", "Shift", "Enter" diye okunur.
<div class="space-y-3 text-sm text-gray-600 dark:text-zinc-400">
<p>Açık pencereyi kapatmak için <acun:kbd>Esc</acun:kbd> tuşuna basın.</p>
<p>Listede <acun:kbd>↑</acun:kbd> ve <acun:kbd>↓</acun:kbd> ile gezinin, seçmek için <acun:kbd>↵</acun:kbd> tuşunu kullanın.</p>
</div>| Prop | Değerler |
|---|---|
slot | Tuşun adı ya da simgesi |
Tuş birleşimleri
keys birlikte basılan tuşları dizi olarak alır ve her birini ayrı bir tuş olarak, aralarına separator koyarak çizer; varsayılan ayırıcı +, boş dize ayırıcıyı kaldırır. size="sm" menü satırları ve düğme ipuçları için daha küçük tuşlar çizer.
<div class="space-y-3 text-sm text-gray-600 dark:text-zinc-400">
<p>Aramayı açın: <acun:kbd :keys="['⌘', 'K']" /> ya da <acun:kbd :keys="['Ctrl', 'K']" /></p>
<p>Değişiklikleri kaydedin: <acun:kbd :keys="['Ctrl', 'Shift', 'S']" /></p>
<div class="flex flex-wrap items-center gap-4">
<acun:kbd :keys="['⌘', '⇧', 'P']" separator="" size="sm" />
<acun:kbd :keys="['Alt', 'F4']" size="sm" />
</div>
</div>| Prop | Değerler |
|---|---|
keys | Dizi, ör. ['⌘', 'K'] |
separator | Tuşlar arasındaki işaret; varsayılan '+' |
size | sm | md |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
copy-button: text | null | Panoya yazılacak metin |
copy-button: target | null | text yoksa kullanılan CSS seçicisi: form alanının değeri ya da öğenin metni kopyalanır |
copy-button: label | Kopyala | Düğme yazısı; size="icon" iken ekran okuyucu adı ve ipucu |
copy-button: variant | white | acun:button varyantlarından biri (primary, ghost, soft…) |
copy-button: size | md | sm · md · lg · icon (yalnızca simge) |
copy-button: timeout | 2000 | Onay ya da hata görünümünün kaç milisaniye kalacağı |
copy-button: copied | — | Başarılı kopyalamadan sonra düğmeden yayılan olay; detail: { text } |
kbd: keys | null | Birlikte basılan tuşlar dizisi; verilmezse slot tek bir tuştur |
kbd: separator | + | Birleşimde tuşlar arasındaki işaret; boş dize ayırıcıyı kaldırır |
kbd: size | md | sm · md |