Kiritiş · molecule
Son maydoni
Butun yoki önli son: − / + tugmalari (çegarada öçadi) va qölda yoziş. Native input type="number", min/max/step brauzerda; tugmalar foxui.js'da. Kengaytma: data-size=sm|lg, .fx-number__affix (valyuta/foiz/birlik), data-align=end. Formatlaş (4.96): data-format="number|percent|compact" — yozilayotganda minglik ajratgiç (1 200 000), kasr vergul bilan, foiz va qisqa köriniş («1,2 mln»); formaga xom son yaşirin inputda ketadi. Sudrab qiymat va ğildirak (4.97): data-scrub — .fx-number__scrub yorliğini çapga-öngga sudraş qiymatni özgartiradi (data-scrub="4" — bir qadam neça pikselda; Shift ×10, Alt ×0,1), data-wheel — maydon fokusda bölganda siçqonça ğildiragi (fokussiz sahifa odatdagidek aylanadi). Maket, rasm va grafik muharrirlari uçun.
söm
E
B
↻
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smlg | — |
data-format | number Minglik ajratgiç, kasr — data-decimalspercent Foiz (0–100), standart 1 kasr xonacompact Fokusdan çiqqanda «1,2 mln», yozişda töliq | — |
data-width | full Formatli maydon butun eniga | — |
data-scrub | | — |
data-wheel | | — |
Anatomiya
- root
.fx-numberşart - input
.fx-number__inputşart - step
.fx-number__stepşart - affix
.fx-number__affixixtiyoriy - scrub
.fx-number__scrubixtiyoriy - row
.fx-number-rowixtiyoriy
Holatlar
focuslimitscrubbing
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ↑ ↓ | Bir qadam oşiradi/kamaytiradi |
| PgUp / PgDn | 10 qadam (formatli maydonda) |
| Home / End | Eng kam / eng köp qiymat (formatli maydonda, çegara berilsa) |
| Gʻildirak (fokusda) | data-wheel: bir qadam (Shift — 10) |
Native spinbutton: ↑ ↓ brauzerda; tugmalarda aria-label.
Naqş: WAI-ARIA APG spinbutton · rol spinbutton
Kod
AI uçun: qaçon işlatiladi
Işlating
- Kiçik butun son: miqdor, soni, kun.
Işlatmang
- Taxminiy diapazon →
slider - Raqamli identifikator →
input - Telefon, karta, PINFL uçun type="number" qilmang — matn maydoni + inputmode="numeric".
- Katta summani formatsiz («12500000») körsatmang — data-format="number" guruhlab yozadi.
- Sudrab qiymatni yagona yöl qilmang — maydonga yoziş va ↑ ↓ doim işlaydi (sudraş — tezlatgiç).
- Ğildirakni fokussiz maydonga ulamang — sahifani aylantirayotgan odam qiymatni bilmasdan özgartiradi.
npx foxui add number
<label class="fx-field">
<span class="fx-label">Qurilmalar soni</span>
<span class="fx-number" data-fx-number>
<button class="fx-number__step" type="button" data-step="-1" aria-label="Kamaytiriş">−</button>
<input class="fx-number__input" type="number" min="1" max="3" value="1" inputmode="numeric">
<button class="fx-number__step" type="button" data-step="1" aria-label="Köpaytiriş">+</button>
</span>
</label>
<span class="fx-number" data-fx-number data-size="sm"><button type="button" class="fx-number__step" data-step="-1" aria-label="Kamaytiriş">−</button><span class="fx-number__affix">söm</span><input class="fx-number__input" type="number" value="50" min="0" aria-label="Narx"><button type="button" class="fx-number__step" data-step="1" aria-label="Köpaytiriş">+</button></span>
<label class="fx-field" for="nf1"><span class="fx-label">Bitim summasi</span>
<span class="fx-number" data-fx-number data-format="number" data-width="full"><button class="fx-number__step" type="button" data-step="-1" aria-label="Kamaytiriş">−</button><input class="fx-number__input" id="nf1" name="summa" value="12500000" data-min="0" data-step="500000"><span class="fx-number__affix">söm</span><button class="fx-number__step" type="button" data-step="1" aria-label="Köpaytiriş">+</button></span></label>
<label class="fx-field" for="nf2"><span class="fx-label">Çegirma</span>
<span class="fx-number" data-fx-number data-format="percent" data-decimals="1"><input class="fx-number__input" id="nf2" name="chegirma" value="12,5" data-min="0" data-max="100" data-step="0.5"><span class="fx-number__affix">%</span></span></label>
<label class="fx-field" for="nf3"><span class="fx-label">Yillik tuşum rejasi</span>
<span class="fx-number" data-fx-number data-format="compact"><input class="fx-number__input" id="nf3" name="reja" value="1850000000" data-min="0" data-step="10000000"><span class="fx-number__affix">söm</span></span></label>
<!-- Sudrab qiymat va gʻildirak (4.97) — rasm muharriri / maket paneli -->
<div class="fx-number-row" role="group" aria-label="Blok ölçami">
<span class="fx-number" data-fx-number data-scrub data-wheel data-size="sm"><span class="fx-number__scrub" title="Çapga-öngga sudrang">E</span><input class="fx-number__input" type="number" min="0" max="1920" step="1" value="320" aria-label="Eni, px"></span>
<span class="fx-number" data-fx-number data-scrub data-wheel data-size="sm"><span class="fx-number__scrub" title="Çapga-öngga sudrang">B</span><input class="fx-number__input" type="number" min="0" max="1080" step="1" value="180" aria-label="Böyi, px"></span>
<span class="fx-number" data-fx-number data-scrub="2" data-wheel data-size="sm"><span class="fx-number__scrub" title="Çapga-öngga sudrang">↻</span><input class="fx-number__input" type="number" min="-180" max="180" step="1" value="0" aria-label="Buriş, gradus"></span>
</div>
<label class="fx-field" for="nf-sc"><span class="fx-label">Çegirma summasi</span>
<span class="fx-number" data-fx-number data-format="number" data-scrub data-wheel><span class="fx-number__scrub">Sudrang</span><input class="fx-number__input" id="nf-sc" name="chegirma_summa" value="150000" data-min="0" data-max="5000000" data-step="10000"><span class="fx-number__affix">söm</span></span></label>Tokenlar: --fx-bg-field --fx-bg-muted --fx-bg-pressed --fx-border-color-field --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-weight-medium --fx-knob-pill --fx-motion-fast --fx-radius-control --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-disabled --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
KalendarOy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.Captcha ramkasi«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !CheckoutTölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş».Rang tanlagiçErkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).ComboboxYozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot).Yoziş paneli (composer)AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş».