Körsatiş · molecule
QR kod
Boğliqliksiz QR kod (4.143): matn yoki havola SVG içida çiziladi — öz kodlovçisi (bayt rejimi, UTF-8, xato tuzatiş M, 213 baytgaça), eng yaxşi niqob avtomatik. Doim yoruğ fonda qoronği modullar; markazda ixtiyoriy logo; holatlar: eskirgan (xira + «Yangilaş»), yuklanmoqda, xato. Tölov havolasi, Telegram bot, ilovaga kiriş uçun.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
data-state | expired xira + .fx-qr__overlayloadingerror matn juda uzun | — |
Anatomiya
- root
.fx-qrşart - code
.fx-qr__codeşart - modules
.fx-qr__modulesixtiyoriy - logo
.fx-qr__logoixtiyoriy - overlay
.fx-qr__overlayixtiyoriy - caption
.fx-qr__captionixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Enter | Eskirgan holatda «Yangilaş» tugmasi |
SVG role=img va aria-label (data-label yoki «QR kod: <qiymat>»); yonida figcaption matni. Eskirgan holatda «Yangilaş» oddiy tugma.
Kod
AI uçun: qaçon işlatiladi
- Telefon bilan skanerlanadigan havola: tölov, Telegram bot, ilovaga kiriş, Wi-Fi.
- Kompyuterda bosiladigan havola →
link - Nusxa olinadigan kod yoki kalit →
copy - Kodni qoronği fonda yoruğ modullar bilan bermang — skanerlar yomon öqiydi; komponent fonni özi yoruğ qiladi.
- Logoni 20 % endan katta qilmang — xato tuzatiş (M) kötara olmaydi.
- 213 baytdan uzun matn bermang — qisqa havola işlating.
- QRni yagona yöl qilmang — yonida havola yoki kodni matn bilan bering.
npx foxui add qr
<figure class="fx-qr" data-fx-qr data-value="https://foxui.dev/tolov/214" data-label="Tölov havolasi QR kodi: buyurtma №214"> <div class="fx-qr__code"><span class="fx-qr__logo" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="6" fill="currentColor"/></svg></span></div> <figcaption class="fx-qr__caption">Buyurtma №214 · 1 200 000 söm</figcaption> </figure> <figure class="fx-qr" data-fx-qr data-size="sm" data-state="expired" data-value="https://t.me/foxui_bot?start=kirish-8841"> <div class="fx-qr__code"><div class="fx-qr__overlay"><span>QR eskirdi</span><button class="fx-btn" data-size="sm" type="button" data-qr-refresh>Yangilaş</button></div></div> <figcaption class="fx-qr__caption">Telegram orqali kiriş</figcaption> </figure>
Tokenlar: --fx-bg-muted --fx-bg-static-light --fx-border-color-surface --fx-border-width-default --fx-control-h-lg --fx-duration-pulse --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-motion-base --fx-radius-badge --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-on-static-light --fx-text-secondary