Kiritiş · molecule
Reyting
Yulduzli baho: bosiş yoki klaviatura (← → Home End), ixtiyoriy yarim qadam (data-step="0.5"). Faqat öqiş variantida (data-readonly) rasm va matnli baho. Yulduz — maska, rang tokendan. Yurak va emoji (4.108): data-shape="heart" — yulduz örniga yurak; data-shape="emoji" — kayfiyat bahosi 5 ta yuz bilan (jahldor → xursand): töldirilmaydi, bittasi tanlanadi (kattaroq va rangli, qolganlari xira); aria-valuetext «4 / 5 — Yaxşi», yonidagi [data-fx-rating-word] da söz.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
data-shape | starheart yurakemoji 5 ta yuz, bittasi tanlanadi | star |
Anatomiya
- root
.fx-ratingşart - stars
.fx-rating__starsşart - fill
.fx-rating__fillşart - text
.fx-rating-textixtiyoriy - face
.fx-rating__faceixtiyoriy - word
.fx-rating__wordixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → ↑ ↓ | Qadam (1 yoki 0,5) |
| Home, End | 0 / maksimum |
Özgaruvçan: role="slider", aria-valuenow/valuetext «3 / 5». Faqat öqiş: role="img" + aria-label «Baho: 4,5 / 5».
Naqş: WAI-ARIA APG slider · rol slider
Kod
AI uçun: qaçon işlatiladi
- Mahsulot yoki xizmatga qisqa baho.
- Şarhlar röyxatida örtaça baho (faqat öqiş).
npx foxui add rating
<div class="fx-field"><span class="fx-label" id="rt-l">Xizmatni baholang</span> <div class="fx-rating" data-fx-rating data-value="3" aria-labelledby="rt-l"><span class="fx-rating__stars"></span><span class="fx-rating__fill"></span></div></div> <div><div class="fx-rating" data-fx-rating data-readonly data-step="0.5" data-value="4.5" data-size="sm" aria-label="Örtaça baho"><span class="fx-rating__stars"></span><span class="fx-rating__fill"></span></div><span class="fx-rating-text">4,5 · 128 ta şarh</span></div> <div class="fx-rating" data-fx-rating data-step="0.5" data-value="2.5" aria-label="Yarim qadamli baho"><span class="fx-rating__stars"></span><span class="fx-rating__fill"></span></div> <!-- Yurak va emoji (4.108) --> <div class="fx-field"><span class="fx-label" id="rt-m">Qabul sizga qanday yoqdi?</span> <div style="display:flex;align-items:center;gap:var(--fx-space-3)"><div class="fx-rating" id="rt-mood" data-fx-rating data-shape="emoji" data-value="4" aria-labelledby="rt-m"></div><span class="fx-rating-text fx-rating__word" data-fx-rating-word="rt-mood" aria-hidden="true"></span></div></div> <div><div class="fx-rating" data-fx-rating data-shape="heart" data-value="3" data-size="sm" aria-label="Mahsulotga muhabbat"><span class="fx-rating__stars"></span><span class="fx-rating__fill"></span></div></div>
Tokenlar: --fx-bg-muted --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-spring --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-size-sm --fx-motion-fast --fx-radius-badge --fx-size-icon-lg --fx-size-icon-md --fx-space-1 --fx-space-2 --fx-text-secondary --fx-text-tertiary