Kiritiş · molecule
JSON maydoni
JSON matni uçun maydon (4.90): webhook tanasi, integratsiya sozlamasi, API sörovi. Çapda qator raqamlari, monoşrift; fokusdan çiqqanda (yoki Ctrl+Shift+F, «Formatlaş» tugmasi) tekşiradi va 2 böşliq bilan formatlaydi. Xato bölsa — xato qatori raqami «!» bilan belgilanadi, qator orqasi ajratiladi, pastda «4-qator, 1-ustun: xususiyat nomi qöştirnoqda bölişi kerak» kabi özbekça matn; textarea aria-invalid va setCustomValidity oladi (forma yuborilmaydi).
Fokusdan çiqqanda formatlanadi · Ctrl+Shift+F
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-required | | — |
data-indent | 4 çekiniş böşliqlari soni | 2 |
Anatomiya
- root
.fx-jsonfieldşart - box
.fx-jsonfield__boxşart - gutter
.fx-jsonfield__gutterixtiyoriy - input
.fx-jsonfield__inputşart - error
.fx-jsonfield__errorixtiyoriy - hint
.fx-jsonfield__hintixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Ctrl+Shift+F | Tekşiradi va formatlaydi |
| Tab | Keyingi maydonga (tuzoq yöq) |
Oddiy <textarea> (label bilan), qator raqamlari aria-hidden. Xato: aria-invalid="true", aria-describedby → .fx-jsonfield__error (aria-live) — qator, ustun va sabab söz bilan.
Kod
AI uçun: qaçon işlatiladi
- Admin panelda webhook, integratsiya yoki ruxsatlar sozlamasi (JSON).
- API sinov sahifasida sörov tanasi.
- Köp qatorli oddiy matn →
input - Faqat körsatiladigan kod →
code - Formatlangan matn (qalin, röyxat) →
markdown - Oddiy foydalanuvçiga JSON maydonini bermang — sozlamani forma maydonlariga ajrating; JSON — dasturçi va admin uçun.
- Tab tugmasini tutib qolmang (fokus tuzoği) — çekiniş formatlaş bilan qöyiladi.
- Xatoni faqat qizil çegara bilan körsatmang — qator raqami va matn şart.
npx foxui add jsonfield
<div class="fx-field">
<label class="fx-label" for="js1">Webhook tanasi</label>
<div class="fx-jsonfield" data-fx-jsonfield>
<div class="fx-jsonfield__box"><ol class="fx-jsonfield__gutter" aria-hidden="true"></ol><textarea class="fx-jsonfield__input" id="js1" name="webhook" rows="8">{"hodisa":"bitim.yopildi","mijoz":{"ism":"Aziz Karimov","telefon":"+998901234567","shahar":"Toshkent"},"summa":12500000,"valyuta":"UZS","teglar":["vip","ulgurji"]}</textarea></div>
<p class="fx-jsonfield__error" aria-live="polite"></p>
<p class="fx-jsonfield__hint">Fokusdan çiqqanda formatlanadi · Ctrl+Shift+F</p>
</div>
</div>
<div class="fx-field">
<label class="fx-label" for="js2">Integratsiya sozlamasi</label>
<div class="fx-jsonfield" data-fx-jsonfield data-required>
<div class="fx-jsonfield__box"><ol class="fx-jsonfield__gutter" aria-hidden="true"></ol><textarea class="fx-jsonfield__input" id="js2" name="sozlama" rows="6">{
"bot": "@savdo_bot",
"kanal": -1001234567890,
"jim_soat": ["22:00", "08:00"],
}</textarea></div>
<p class="fx-jsonfield__error" aria-live="polite"></p>
<button type="button" class="fx-btn" data-size="sm" data-variant="outline" data-json="format">Formatlaş</button>
</div>
</div>Tokenlar: --fx-bg-field --fx-bg-muted --fx-bg-subtle --fx-border-color-default --fx-border-color-error --fx-border-color-field --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-fg-error --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-radius-field-multiline --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-text-disabled --fx-text-error --fx-text-primary --fx-text-tertiary