Harakat · primitive
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). data-release="dismiss" — eni 40 %idan uzoq yoki tez surilsa, element şu tomonga uçib ketadi va yopiladi (swipe bilan yopiş: bildirişnoma, karta, varaq); çegaradan ötganda element xiralaşib ogohlantiradi. data-axis — x (standart), y yoki both. Hodisalar: fx-drag-dismiss (bekor qilsa böladi), fx-drag-dismissed, fx-drag-return. Qaytariladigan elementda rezina qarşilik bor. Harakat kamaytirilsa — inersiya va prujina yöq.
Çapga yoki öngga suring yoki Delete tugmasini bosing — bildirişnoma yopiladi.
-
Yangi buyurtma #1042
Dilnoza Karimova · 1 250 000 söm · 2 daqiqa oldin
-
Tölov qabul qilindi
Payme · 480 000 söm · 15 daqiqa oldin
-
Mijoz izoh qoldirdi
«Yetkazib beriş vaqtini özgartirsa böladimi?» · 1 soat oldin
Meni suring
Qöyib yuborsangiz — inersiya bilan davom etib, prujina bilan joyiga qaytadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-axis | xyboth | x |
data-release | return prujina bilan joyiga qaytadidismiss uzoq/tez surilsa yopiladi | return |
data-spring | bounce sezilarli sakraşsoft yumşoq prujina | bounce |
Anatomiya
- root
[data-fx-drag]şart - stack
.fx-drag-stackixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Elementni turtadi, prujina bilan qaytadi |
| Delete / Backspace | dismiss rejimida — yopadi |
Element tabindex="0" bilan fokuslanadi; strelkalar uni turtib qöyadi (prujina bilan qaytadi), dismiss rejimida Delete yoki Backspace — yopadi. Yopiş usuli aria-describedby orqali aytiladi va har kartada alohida tugma bor. Içidagi tugma va havoladan sudraş boşlanmaydi. Sudraşdan keyingi «click» bekor qilinadi (tasodifiy oçiliş yöq). prefers-reduced-motion va data-fx-motion="none"da inersiya yöq.
Kod
AI uçun: qaçon işlatiladi
- Swipe bilan yopiladigan bildirişnoma, taklif yoki karta (mobil).
- Landing sahifada «tirik» fizik karta — prujina his qilinsin.
- Röyxat tartibini özgartiriş →
sortable - Pastdan çiquvçi varaq (sheet) yopilişi →
sheet - Yopişni faqat swipe bilan qoldirmang — har kartada «Yopiş» tugmasi bölsin (klaviatura, ekran öquvçi, siçqonça).
- Saralaş uçun işlatmang — tartib özgarsa sortable.
- Sahifa vertikal aylanadigan joyda data-axis="y" qöymang — scroll bilan töqnaşadi.
npx foxui add drag
<p id="drag-hint" class="fx-sr-only">Çapga yoki öngga suring yoki Delete tugmasini bosing — bildirişnoma yopiladi.</p>
<ul class="fx-drag-stack" aria-label="Bildirişnomalar" style="max-inline-size:26rem">
<li class="fx-card" data-fx-drag data-axis="x" data-release="dismiss" tabindex="0" aria-describedby="drag-hint" style="display:flex;align-items:start;gap:var(--fx-space-3)">
<div style="flex:1;min-inline-size:0"><h3 class="fx-card__title">Yangi buyurtma #1042</h3><p class="fx-card__text">Dilnoza Karimova · 1 250 000 söm · 2 daqiqa oldin</p></div>
<button type="button" class="fx-btn" data-variant="ghost" data-shape="icon" data-size="sm" aria-label="Yopiş: Yangi buyurtma #1042">✕</button>
</li>
<li class="fx-card" data-fx-drag data-axis="x" data-release="dismiss" tabindex="0" aria-describedby="drag-hint" style="display:flex;align-items:start;gap:var(--fx-space-3)">
<div style="flex:1;min-inline-size:0"><h3 class="fx-card__title">Tölov qabul qilindi</h3><p class="fx-card__text">Payme · 480 000 söm · 15 daqiqa oldin</p></div>
<button type="button" class="fx-btn" data-variant="ghost" data-shape="icon" data-size="sm" aria-label="Yopiş: Tölov qabul qilindi">✕</button>
</li>
<li class="fx-card" data-fx-drag data-axis="x" data-release="dismiss" tabindex="0" aria-describedby="drag-hint" style="display:flex;align-items:start;gap:var(--fx-space-3)">
<div style="flex:1;min-inline-size:0"><h3 class="fx-card__title">Mijoz izoh qoldirdi</h3><p class="fx-card__text">«Yetkazib beriş vaqtini özgartirsa böladimi?» · 1 soat oldin</p></div>
<button type="button" class="fx-btn" data-variant="ghost" data-shape="icon" data-size="sm" aria-label="Yopiş: Mijoz izoh qoldirdi">✕</button>
</li>
</ul>
<div class="fx-card" data-fx-drag data-axis="both" tabindex="0" aria-label="Prujinali karta: suring va qöyib yuboring" style="margin-block-start:var(--fx-space-6);max-inline-size:16rem;text-align:center">
<p class="fx-card__title">Meni suring</p>
<p class="fx-card__text">Qöyib yuborsangiz — inersiya bilan davom etib, prujina bilan joyiga qaytadi.</p>
</div>Tokenlar: --fx-border-color-focus --fx-border-width-focus --fx-drag-x --fx-drag-y --fx-ease-bounce --fx-ease-enter --fx-ease-exit --fx-ease-spring --fx-ease-standard --fx-motion-base --fx-motion-fast --fx-motion-press --fx-motion-slow --fx-shadow-lg --fx-space-3