Holat va javob · molecule
«Foydali böldimi?» vidjeti
Sahifa yoki javob sifatini biliş uçun kiçik fikr vidjeti (4.199): savol va «Ha / Yöq» tugmalari (aria-pressed, ikon + söz). Tanlovdan keyin forma oçiladi — «Yöq» uçun sabab chip'lari (Tuşunarsiz, Eskirgan, Kerakli narsa yöq, Xato bor) va izoh, «Ha» uçun ixtiyoriy izoh («Nima yoqdi?»); «Yuboriş» yoki «Ötkazib yuboriş»dan keyin rahmat holati va «Fikrni özgartiriş». Xulq (data-fx-helpful): hodisa «fx-helpful» {id, value, reasons, comment}; javob localStorage'da «fx-helpful:<data-id>» — qayta kirganda yana söralmaydi (data-demo — saqlamaydi); Esc formani yopib, fokusni tugmaga qaytaradi. data-variant: bar (standart), card, inline (AI javobi ostida ixçam).
Bu sahifa foydali böldimi?
Rahmat! Fikringiz hujjatni yaxşilaşga yordam beradi.
Javob foydali böldimi?
Rahmat, qayd etildi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | barcard öz yuzasi bilaninline ixçam, faqat ikonlar | bar |
Anatomiya
- root
.fx-helpfulşart - ask
.fx-helpful__askşart - question
.fx-helpful__questionşart - choices (group)
.fx-helpful__choicesşart - choice (Ha/Yöq)
.fx-helpful__choiceşart - form
.fx-helpful__formixtiyoriy - label
.fx-helpful__labelixtiyoriy - reasons (fieldset)
.fx-helpful__reasonsixtiyoriy - reason (checkbox chip)
.fx-helpful__reasonixtiyoriy - actions
.fx-helpful__actionsixtiyoriy - note
.fx-helpful__noteixtiyoriy - thanks (role=status)
.fx-helpful__thanksşart - again
.fx-helpful__againixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | «Ha» yoki «Yöq» — formani oçadi |
| Space (chip'da) | Sababni belgilaydi |
| Esc (formada) | Formani yopadi, fokus tugmaga qaytadi |
Tugmalar role="group" aria-labelledby (savol) içida, aria-pressed bilan; ikonli ixçam variantda aria-label («Ha, foydali»). Forma oçilganda fokus birinçi maydonga ötadi, Esc yopib fokusni tanlangan tugmaga qaytaradi. Sabablar — <fieldset>/<legend> içida haqiqiy checkbox'lar (chip körinişida, belgilanganda ✓ şakli ham). Rahmat — role="status", fokus unga ötadi.
Naqş: WAI-ARIA APG button · rol group
Kod
AI uçun: qaçon işlatiladi
- Hujjat, yordam markazi va bilim bazasi sahifalari oxirida.
- AI javobi ostida (inline) — sifatni baholaş.
- Batafsil sörovnoma →
questionnaire - Yulduzli baho (mahsulot, xizmat) →
rating - AI xabari amallari (nusxa, qayta yaratiş) →
msgactions - Har abzats ostiga qöymang — sahifa yoki javob oxirida bitta.
- «Yöq»dan keyin majburiy izoh söramang — sabab chip'lari yetadi, izoh ixtiyoriy.
- Rahmat holatisiz qoldirmang — bosilgani qabul qilinganini körsin.
- Izohdan şaxsiy ma'lumot yiğmang — buni oçiq ayting.
npx foxui add helpful
<section class="fx-helpful" data-fx-helpful data-id="hujjat/tokenlar" data-demo aria-labelledby="hp-q">
<div class="fx-helpful__ask">
<p class="fx-helpful__question" id="hp-q">Bu sahifa foydali böldimi?</p>
<div class="fx-helpful__choices" role="group" aria-labelledby="hp-q"><button class="fx-helpful__choice" type="button" data-helpful="yes" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 11v9H4v-9zM7 11l4-8a2 2 0 0 1 2 2v4h5.5a2 2 0 0 1 2 2.3l-1.3 7A2 2 0 0 1 17.2 20H7"/></svg>Ha</button><button class="fx-helpful__choice" type="button" data-helpful="no" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path transform="rotate(180 12 12)" d="M7 11v9H4v-9zM7 11l4-8a2 2 0 0 1 2 2v4h5.5a2 2 0 0 1 2 2.3l-1.3 7A2 2 0 0 1 17.2 20H7"/></svg>Yöq</button></div>
</div>
<form class="fx-helpful__form" aria-label="Fikringiz" hidden>
<fieldset class="fx-helpful__reasons" data-helpful-for="no"><legend>Nima yetişmadi?</legend><label class="fx-helpful__reason"><input type="checkbox" name="sabab" value="tushunarsiz">Tuşunarsiz</label><label class="fx-helpful__reason"><input type="checkbox" name="sabab" value="eskirgan">Eskirgan</label><label class="fx-helpful__reason"><input type="checkbox" name="sabab" value="yoq">Kerakli narsa yöq</label><label class="fx-helpful__reason"><input type="checkbox" name="sabab" value="xato">Xato bor</label></fieldset>
<label class="fx-field" data-helpful-for="no"><span class="fx-label">Qanday yaxşilasak böladi? (ixtiyoriy)</span><textarea class="fx-textarea" rows="3" maxlength="500" placeholder="Masalan: qorongʻi mavzu uchun misol qoʻshing"></textarea></label>
<label class="fx-field" data-helpful-for="yes"><span class="fx-label">Nima yoqdi? (ixtiyoriy)</span><textarea class="fx-textarea" rows="2" maxlength="500"></textarea></label>
<div class="fx-helpful__actions"><button class="fx-btn" data-variant="primary" data-size="sm" type="submit">Yuboriş</button><button class="fx-btn" data-variant="ghost" data-size="sm" type="button" data-helpful-skip>Ötkazib yuboriş</button><p class="fx-helpful__note">Şaxsiy ma'lumot yozmang — izoh anonim.</p></div>
</form>
<p class="fx-helpful__thanks" role="status" hidden><strong>Rahmat!</strong> Fikringiz hujjatni yaxşilaşga yordam beradi. <button class="fx-helpful__again" type="button" data-helpful-again>Fikrni özgartiriş</button></p>
</section>
<div class="fx-helpful" data-fx-helpful data-id="ai/javob-4821" data-demo data-variant="inline" style="margin-block-start: var(--fx-space-10)">
<div class="fx-helpful__ask"><p class="fx-helpful__question" id="hp-q2">Javob foydali böldimi?</p><div class="fx-helpful__choices" role="group" aria-labelledby="hp-q2"><button class="fx-helpful__choice" type="button" data-helpful="yes" aria-pressed="false" aria-label="Ha, foydali"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 11v9H4v-9zM7 11l4-8a2 2 0 0 1 2 2v4h5.5a2 2 0 0 1 2 2.3l-1.3 7A2 2 0 0 1 17.2 20H7"/></svg></button><button class="fx-helpful__choice" type="button" data-helpful="no" aria-pressed="false" aria-label="Yöq, foydali emas"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path transform="rotate(180 12 12)" d="M7 11v9H4v-9zM7 11l4-8a2 2 0 0 1 2 2v4h5.5a2 2 0 0 1 2 2.3l-1.3 7A2 2 0 0 1 17.2 20H7"/></svg></button></div></div>
<p class="fx-helpful__thanks" role="status" hidden>Rahmat, qayd etildi.</p>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-subtle --fx-bg-success-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-control-h-sm --fx-ease-enter --fx-ease-spring --fx-ease-standard --fx-fg-success --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-press --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-pill --fx-radius-surface --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary