State Prefixes

Terapkan gaya pada keadaan tertentu

Sintaks

visual="hover:... focus:... active:..."

Nilai

Nilai	CSS Output	Huraian
hover:	:hover	Pada hover
focus:	:focus	Pada fokus
active:	:active	Pada aktif
disabled:	:disabled	Apabila dilumpuhkan
visited:	:visited	Apabila dilawati
first:	:first-child	Anak pertama
last:	:last-child	Anak terakhir
odd:	:nth-child(odd)	Anak ganjil
even:	:nth-child(even)	Anak genap

Contoh

<button visual="hover:bg:primary focus:outline:primary">Interactive button</button>

Pratonton

Awalan Keadaan

visual="hover:scale:110" - Terapkan gaya pada hover, fokus, dll.

Lihat Kod

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <button space="p:small" visual="bg:primary text:white rounded:small transition:all hover:scale:110">hover:scale:110</button>
  <button space="p:small" visual="bg:neutral-500 text:white rounded:small transition:all hover:bg:primary">hover:bg:primary</button>
</div>