Tarif: Jamoa
5 kişigaça, çeksiz loyiha. Kartani bosing — tölqin standart rejimda ham çiqadi.
Harakat · primitive
Ripple (tölqin)
Bosilgan nuqtadan tarqaluvçi yumşoq tölqin (M3, HeroUI Ripple). Bezak harakati, şuning uçun faqat expressive rejimda işlaydi (data-fx-motion="expressive" ota yoki tugmaning özida); data-fx-ripple="always" — standart rejimda ham. Klaviaturada (Enter/Space) tölqin markazdan çiqadi. Rang — matn rangi: asosiy tugmada oq, ikkilamçi tugmada qora — har mavzuda özi töğri. data-fx-ripple="soft" — xiraroq. Harakat kamaytirilsa, calm yoki none rejimda tölqin yöq.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-fx-ripple | expressive faqat expressive rejimda (atribut qiymatsiz)always standart rejimda hamsoft xiraroq tölqin | expressive |
Anatomiya
- host
[data-fx-ripple]şart - wave
.fx-ripple__waveixtiyoriy
Holatlar
releasing
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter / Space | Tugma amali + markazdan tölqin |
Tölqin faqat bezak (aria-hidden, pointer-events yöq), tugmaning nomi va fokusi özgarmaydi. Klaviatura foydalanuvçisi ham bir xil javobni köradi (markazdan). prefers-reduced-motion, data-fx-motion="calm" va "none"da yöq; forced-colors'da yaşirin.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Landing va onboarding CTA tugmalari — bosiliş «tirik» sezilsin.
- Bosiladigan katta kartalar (tarif tanlaş).
Işlatmang
- Oddiy ilova tugmasi (bosiliş şkalasi yetarli) →
button - Holat qatlami kerak bölsa (hover/fokus/bosiş foni) →
focus - Ilova içidagi ziç tugmalarga (jadval, vositalar paneli) qöymang — bu ifodali ekranlar uçun.
- Tölqinni bosiş natijasi örniga işlatmang — amal natijasi alohida körsatilsin (toast, holat).
- Havola matniga qöymang — faqat tugma va bosiladigan kartaga.
npx foxui add ripple
<div data-fx-motion="expressive" style="display:flex;flex-wrap:wrap;gap:var(--fx-space-3)"> <button type="button" class="fx-btn" data-variant="primary" data-size="lg" data-fx-ripple>Bepul boşlaş</button> <button type="button" class="fx-btn" data-size="lg" data-fx-ripple>Demo köriş</button> <button type="button" class="fx-btn" data-variant="ghost" data-size="lg" data-fx-ripple="soft">Narxlar</button> </div> <article class="fx-card" data-fx-ripple="always" tabindex="0" style="margin-block-start:var(--fx-space-4);max-inline-size:22rem;cursor:pointer"> <h3 class="fx-card__title">Tarif: Jamoa</h3> <p class="fx-card__text">5 kişigaça, çeksiz loyiha. Kartani bosing — tölqin standart rejimda ham çiqadi.</p> </article>
Tokenlar: --fx-ease-enter --fx-ease-exit --fx-motion-slow --fx-motion-slower --fx-radius-circle
Şu toifadan
Ommaviy panelTanlov bölsa pastda markazda suzib çiqadigan panel: son, summa (ixtiyoriy), amallar, ×.TugmaAmal tugmasi.AI checkpointAI suhbati yoki agent lentasidagi «şu nuqtaga qaytiş» belgisi (4.204, Vercel AI Elements «Checkpoint»; Cursor va Claude Code'dagi rewind).Yopiş tugmasiDialog, sheet, alert va chip uçun bir xil ✕ tugmasi.Nusxa tugmasiBir bosişda matn clipboard'ga yoziladi: nusxa ikoni ✓ ga yumşoq almaşadi (2 soniya), natija e'lon qilinadi.Prujinali sudraşElementni barmoq yoki siçqonça bilan suriş: sudralayotganda körsatkiçga yopişadi va biroz kötariladi, qöyib yuborilganda tezligi bilan biroz davom etadi (inersiya) va prujina bilan joyiga qaytadi (HIG, M3 Expressive, Vaul).