Kiritiş · compound
Imzo maydoni
Qöl imzosi (4.86): siçqonça, barmoq yoki stilus bilan canvas'da çiziladi (stilus bosimi çiziq qalinligiga ta'sir qiladi), «Orqaga» oxirgi çiziqni, «Tozalaş» hammasini öçiradi. Klaviatura muqobili — «Yozib kiritiş»: ism yoziladi va imzo şriftida çiziladi. Qiymat formaga yaşirin inputda ketadi: SVG matni (standart, vektor, hujjatga sifatli tuşadi) yoki data-format="png" — PNG data URL. data-required — böş imzo bilan forma yuborilmaydi (qizil çegara + «Imzo majburiy» matni).
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-format | svg vektor (standart)png PNG data URL | svg |
data-required | | — |
Anatomiya
- root
.fx-signatureşart - pad
.fx-signature__padşart - canvas
.fx-signature__canvasşart - line
.fx-signature__lineixtiyoriy - hint
.fx-signature__hintixtiyoriy - typed
.fx-signature__typedixtiyoriy - bar
.fx-signature__barixtiyoriy - status
.fx-signature__statusixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Imzo maydoni → «Yozib kiritiş» → «Orqaga» → «Tozalaş» |
| Delete / Backspace | Maydonda: imzoni tozalaydi |
| Ctrl+Z | Maydonda: oxirgi çiziqni olib taşlaydi |
| Enter / Boʻshliq | «Yozib kiritiş» — matn maydonini oçadi (klaviatura muqobili) |
Canvas role="img" + aria-label holatni aytadi («böş» / «imzo qöyildi, 3 ta çiziq» / «yozib kiritilgan»); fokus oladi (Delete — tozalaş, Ctrl+Z — orqaga). Holat .fx-signature__status'da söz bilan (aria-live). «Yozib kiritiş» — aria-pressed tugma.
Kod
AI uçun: qaçon işlatiladi
- Yetkazib berişni qabul qiliş, xizmat dalolatnomasi, içki ariza.
- Planşetda mijoz imzosi (dökon, klinika).
- Şartnomaga rozilik belgisi →
check - Fayl (skanerlangan imzo) yuklaş →
dropzone - Imzoni faqat çiziş bilan qoldirmang — klaviatura va ekran öquvçi foydalanuvçisi uçun «Yozib kiritiş» tugmasi şart.
- Imzo maydonini juda kiçik qilmang — telefonda barmoq bilan kamida 140 px balandlik kerak.
- Imzo rasmini yuridik tasdiq deb hisoblamang — u faqat qabul qilinganini qayd etadi; yuridik imzo uçun E-IMZO kabi xizmat.
npx foxui add signature
<form class="fx-card" style="padding:var(--fx-space-6);display:grid;gap:var(--fx-space-4);max-inline-size:34rem" onsubmit="event.preventDefault()">
<div>
<h3 style="margin:0">Yetkazib berişni tasdiqlaş</h3>
<p style="margin:0;color:var(--fx-text-secondary)">Buyurtma №4512 · 3 ta mahsulot · 1 240 000 söm · Toşkent, Çilonzor 9-kvartal</p>
</div>
<div class="fx-field">
<span class="fx-label" id="sig1-l">Qabul qiluvçi imzosi</span>
<div class="fx-signature" data-fx-signature data-name="imzo" data-required aria-labelledby="sig1-l">
<div class="fx-signature__pad">
<canvas class="fx-signature__canvas"></canvas>
<span class="fx-signature__line" aria-hidden="true">×</span>
<span class="fx-signature__hint" aria-hidden="true">Şu yerga imzo qöying</span>
</div>
<input class="fx-input fx-signature__typed" hidden autocomplete="name" placeholder="Masalan: Aziz Karimov" aria-label="Ism va familiya (imzo örniga)">
<div class="fx-signature__bar">
<span class="fx-signature__status" aria-live="polite"></span>
<button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-sig="type" aria-pressed="false">Yozib kiritiş</button>
<button type="button" class="fx-btn" data-variant="ghost" data-size="sm" data-sig="undo">Orqaga</button>
<button type="button" class="fx-btn" data-variant="outline" data-size="sm" data-sig="clear">Tozalaş</button>
</div>
</div>
</div>
<button class="fx-btn" data-variant="primary" type="submit">Qabul qildim</button>
</form>Tokenlar: --fx-bg-field --fx-border-color-error --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-fg-success --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-motion-fast --fx-popover-width --fx-radius-control --fx-space-12 --fx-space-2 --fx-space-6 --fx-space-8 --fx-text-error --fx-text-primary --fx-text-tertiary