Kiritiş · compound
Rasm kesiş
Avatar yoki muqova uçun rasmni kesiş: rasm ramka içida suriladi (siçqonça, barmoq, strelkalar) va kattalaştiriladi (slider, ğildirak, ikki barmoq, + −). Rasm ramkani doim töliq qoplaydi. Doira (avatar) yoki nisbat (1, 4/3, 3/4, 16/9); natija — canvas'dan JPEG Blob va kesiş törtburçagi.
Suring yoki strelkalar bilan joylang; + va − — kattalaştiriş, 0 — boşlanğiç holat.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-shape | rectcircle Avatar — doira ramka (natija kvadrat) | rect |
data-aspect | 14/33/416/9 | 1 |
Anatomiya
- root
.fx-imagecropşart - stage
.fx-imagecrop__stageşart - img
.fx-imagecrop__imgşart - frame
.fx-imagecrop__frameşart - help
.fx-imagecrop__helpixtiyoriy - controls
.fx-imagecrop__controlsixtiyoriy - btn
.fx-imagecrop__btnixtiyoriy - actions
.fx-imagecrop__actionsixtiyoriy - file
.fx-imagecrop__fileixtiyoriy - result
.fx-imagecrop__resultixtiyoriy
Holatlar
draggingfocus
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Rasmni suradi (Shift — katta qadam) |
| + / − | Kattalaştiradi / kiçraytiradi |
| 0 | Boşlanğiç holat |
| Tab | Slider va tugmalarga |
Maydon tabindex=0, role=group, aria-roledescription «rasm kesiş maydoni» va yordam matni aria-describedby bilan. Strelkalar suradi (Shift — katta qadam), + − kattalaştiradi, 0 — boşlanğiç. Kattalaştiriş slider'i aria-valuetext «150 %». Natija aria-live bilan aytiladi.
Naqş: WAI-ARIA APG slider · rol group
Kod
AI uçun: qaçon işlatiladi
Işlating
- Profil rasmi (doira), kurs/mahsulot muqovasi (16/9, 4/3) yuklaşda.
- Rasm aniq nisbatda bölişi şart bölgan joy (kartoçka, banner).
Işlatmang
- Rasmni faqat yuklaş, kesmasdan →
dropzone - Rasmni kattalaştirib köriş →
lightbox - Rasmni ramkadan çiqib böş joy qoldiradigan qilib surişga ruxsat bermang — xulq çegaralaydi.
- Kesişni faqat siçqonça bilan qilmang — strelkalar va + − ham işlaydi, yordam matni bilan.
- Boşqa domendagi (CORS'siz) rasmni kesmang — canvas ifloslanadi; avval yuklab, blob'dan oçing.
npx foxui add imagecrop
<div class="fx-imagecrop" data-fx-imagecrop data-shape="circle" data-output="400">
<div class="fx-imagecrop__stage" tabindex="0" role="group" aria-roledescription="rasm kesiş maydoni" aria-label="Profil rasmi" aria-describedby="ic-h">
<img class="fx-imagecrop__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='lightsteelblue'/%3E%3Cstop offset='1' stop-color='lavender'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url%28%23s%29'/%3E%3Ccircle cx='930' cy='190' r='90' fill='gold'/%3E%3Cpath d='M0 560 Q300 420 600 540 T1200 500 V800 H0z' fill='darkseagreen'/%3E%3Cpath d='M0 650 Q400 560 800 660 T1200 640 V800 H0z' fill='seagreen'/%3E%3Ccircle cx='560' cy='380' r='95' fill='peru'/%3E%3Cpath d='M410 800 Q420 520 560 500 Q700 520 710 800z' fill='steelblue'/%3E%3C/svg%3E" alt="">
<div class="fx-imagecrop__frame" aria-hidden="true"></div>
</div>
<p class="fx-imagecrop__help" id="ic-h">Suring yoki strelkalar bilan joylang; + va − — kattalaştiriş, 0 — boşlanğiç holat.</p>
<div class="fx-imagecrop__controls">
<button class="fx-imagecrop__btn" type="button" data-crop="out" aria-label="Kiçraytiriş">−</button>
<input class="fx-slider" type="range" value="1" aria-label="Kattalaştiriş" data-fx-slider>
<button class="fx-imagecrop__btn" type="button" data-crop="in" aria-label="Kattalaştiriş">+</button>
<button class="fx-imagecrop__btn" type="button" data-crop="reset" aria-label="Boşlanğiç holat"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M4 10a6 6 0 1 0 2-4.5M4 3v3h3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
</div>
<div class="fx-imagecrop__actions">
<label class="fx-btn fx-imagecrop__file" data-variant="ghost">Boşqa rasm<input type="file" accept="image/*"></label>
<button class="fx-btn" type="button" data-variant="primary" data-crop="apply">Saqlaş</button>
</div>
<div class="fx-imagecrop__result" hidden aria-live="polite"><img alt="Kesilgan profil rasmi">Yangi rasm tayyor</div>
</div>
<div class="fx-imagecrop" data-fx-imagecrop data-aspect="16/9" data-output="1280">
<div class="fx-imagecrop__stage" tabindex="0" role="group" aria-roledescription="rasm kesiş maydoni" aria-label="Kurs muqovasi"><img class="fx-imagecrop__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='lightsteelblue'/%3E%3Cstop offset='1' stop-color='lavender'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='800' fill='url%28%23s%29'/%3E%3Ccircle cx='930' cy='190' r='90' fill='gold'/%3E%3Cpath d='M0 560 Q300 420 600 540 T1200 500 V800 H0z' fill='darkseagreen'/%3E%3Cpath d='M0 650 Q400 560 800 660 T1200 640 V800 H0z' fill='seagreen'/%3E%3Ccircle cx='560' cy='380' r='95' fill='peru'/%3E%3Cpath d='M410 800 Q420 520 560 500 Q700 520 710 800z' fill='steelblue'/%3E%3C/svg%3E" alt=""><div class="fx-imagecrop__frame" aria-hidden="true"></div></div>
<div class="fx-imagecrop__controls"><button class="fx-imagecrop__btn" type="button" data-crop="out" aria-label="Kiçraytiriş">−</button><input class="fx-slider" type="range" value="1" aria-label="Kattalaştiriş" data-fx-slider><button class="fx-imagecrop__btn" type="button" data-crop="in" aria-label="Kattalaştiriş">+</button></div>
</div>Tokenlar: --fx-bg-muted --fx-bg-overlay --fx-bg-static-light --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-size-avatar-lg --fx-size-icon-sm --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --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ş».