Holat va javob · primitive
Portlaş va konfetti
Yoqtiriş va muvaffaqiyat uçun qisqa, bir martalik quvonç effektlari (Magic UI Confetti, Twitter «yoqdi»). data-fx-burst — tugma yoqilganda (aria-pressed="true") ikon atrofida halqa va 8 ta rangli nuqta tarqaladi, ikon prujina bilan sakraydi; öçirilganda — jim. data-toggle — tugma holatni özi almaştiradi va içidagi [data-count] ni ±1 qiladi; reactbar kabi guruhga qöyilsa — guruh xulqi holatni almaştiradi, portlaş natijaga qaraydi. data-fx-burst="confetti" — bosilganda tugmadan konfetti otiladi. Global: fxConfetti({ origin, count }) — masalan tölov muvaffaqiyatli bölganda. Ranglar — toifa ranglaridan. Harakat kamaytirilsa, calm yoki none rejimda heç narsa uçmaydi — holat baribir aria-pressed'da.
Birinçi loyihangiz tayyor!
«Samarqand Grand» sayti e'lon qilindi. Jamoangizga xabar bering.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-fx-burst | like yoqilganda portlaş (atribut qiymatsiz)confetti bosilganda konfetti | like |
Anatomiya
- host
[data-fx-burst]şart - burst
.fx-burstixtiyoriy - ring
.fx-burst__ringixtiyoriy - dot
.fx-burst__dotixtiyoriy - icon
.fx-burst__iconixtiyoriy - confetti layer
.fx-confettiixtiyoriy - confetti piece
.fx-confetti__pieceixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter / Space | Yoqadi/öçiradi (yoki konfetti) |
Hamma zarraçalar aria-hidden va bosilmaydi (pointer-events yöq) — fokus va öqiş tartibi özgarmaydi. Holat aria-pressed orqali aytiladi, son matnda. Klaviaturada (Enter/Space) xuddi bosiş kabi işlaydi. prefers-reduced-motion, data-fx-motion="calm" va "none"da vizual effekt yöq; forced-colors'da yaşirin.
Naqş: WAI-ARIA APG button
Kod
AI uçun: qaçon işlatiladi
- «Yoqdi», «Saqlab qöyiş» kabi yoqiladigan tugmalar (ijtimoiy, kontent).
- Onboarding yakuni, birinçi sotuv, tölov muvaffaqiyati — konfetti.
- Oddiy amal natijasi haqida xabar →
toast - Reaksiyalar paneli (portlaşsiz) →
reactbar - Konfettini tez-tez takrorlanadigan amalga qöymang (saqlaş, yuboriş) — faqat haqiqiy yutuq: birinçi loyiha, tölov, maqsadga yetiş.
- Portlaşni yagona javob qilmang — holat (aria-pressed, son) ham özgarsin.
- Bir ekranda bir neçta konfetti tugmasi qöymang.
npx foxui add burst
<div style="display:flex;flex-wrap:wrap;align-items:center;gap:var(--fx-space-3)">
<button type="button" class="fx-btn" data-fx-burst data-toggle aria-pressed="false" aria-label="Yoqdi"><span class="fx-burst__icon"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10Z"/></svg></span><span data-count>128</span></button>
<div class="fx-reactbar" role="group" aria-label="Reaksiyalar" data-fx-reactbar data-fx-burst>
<button class="fx-reactbar__item" type="button" aria-pressed="false" data-label="Yoqdi"><span class="fx-reactbar__emoji" aria-hidden="true">👍</span><span class="fx-reactbar__count">12</span></button>
<button class="fx-reactbar__item" type="button" aria-pressed="false" data-label="Tabriklayman"><span class="fx-reactbar__emoji" aria-hidden="true">🎉</span><span class="fx-reactbar__count">4</span></button>
</div>
</div>
<div class="fx-card" style="margin-block-start:var(--fx-space-4);max-inline-size:24rem">
<h3 class="fx-card__title">Birinçi loyihangiz tayyor!</h3>
<p class="fx-card__text">«Samarqand Grand» sayti e'lon qilindi. Jamoangizga xabar bering.</p>
<button type="button" class="fx-btn" data-variant="primary" data-fx-burst="confetti" style="justify-self:start">Nişonlaş</button>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-category-blue --fx-bg-category-green --fx-bg-category-pink --fx-bg-category-purple --fx-bg-category-yellow --fx-border-width-focus --fx-ease-bounce --fx-ease-enter --fx-ease-exit --fx-ease-standard --fx-motion-fast --fx-motion-slow --fx-motion-slower --fx-radius-badge --fx-radius-circle --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-text-primary --fx-text-secondary --fx-z-toast