Tema düğmesi
Açık ve koyu tema arasında geçiş yapan ikon düğmesi. Tercih tarayıcıda saklanır, düzende preference-url varsa hesaba da kaydedilir. İkon CSS ile seçildiği için sayfa ilk açıldığında da doğru görünür.
Temel kullanım
Açık temada ay, koyu temada güneş ikonu görünür; tıklayınca ekrandaki temanın tersine geçilir. Ekran okuyucular için düğme metni de temaya göre değişir ("Koyu temaya geç" / "Açık temaya geç").
<acun:theme-toggle />Düzende
acun:layout.sidebar ve acun:layout.horizontal düğmeyi üst çubukta kendileri gösterir. Başka bir yere taşımak için düzende :theme-toggle="false" verip düğmeyi istediğiniz slot'a koyun; class gibi öznitelikler düğmeye eklenir.
<acun:layout.sidebar :theme-toggle="false">
<acun:slot:drawerFooter>
<acun:theme-toggle class="ms-auto" />
</acun:slot:drawerFooter>
{{ $slot }}
</acun:layout.sidebar>| Prop | Değerler |
|---|---|
theme-toggle | true | false (düzen prop'u) |
Açık, koyu ve sistem
Düğme yalnızca açık ve koyu arasında geçiş yapar. Kullanıcıya işletim sistemini izleme seçeneği de sunmak için $store.appearance.set() ile kendi seçicinizi kurun.
<div x-data class="inline-flex gap-1 rounded-sm bg-gray-100 p-1 dark:bg-zinc-800">
<acun:button size="sm" variant="ghost" x-on:click="$store.appearance.set('light')">Açık</acun:button>
<acun:button size="sm" variant="ghost" x-on:click="$store.appearance.set('dark')">Koyu</acun:button>
<acun:button size="sm" variant="ghost" x-on:click="$store.appearance.set('system')">Sistem</acun:button>
</div>| Prop | Değerler |
|---|---|
$store.appearance.set() | light | dark | system |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
(öznitelikler) | — | Prop almaz; class, aria-* gibi öznitelikler düğmeye eklenir |