Körsatiş · molecule
Nişon kartasi
Yutuq nişoni: belgi (emoji yoki ikon) + nom + sabab. Oçilgan — töliq rang, yaxlit çegara; yopiq (data-state="locked") — belgi kulrang, uzuq çegara, ostida progress çiziği va «3/5» hisob; yangi oçilgan (data-state="new") — brend halqasi va «Yangi» yorliği. Qoida: yopiq nişonlardan faqat eng yaqin 3 tasi körsatiladi — «uyum» emas. Röyxat — .fx-achievements töri. Manbaa'dan (③, Fox MB topşirdi, 20.10): köriniş — FoxUI, hisob va ma'lumot — loyihada.
- Birinçi qadamBirinçi hissa
- Faxriy uçlikFaxriylar reytingida 1-örinYangi
- Birinçi manbaYangi mavzu boşlang · 0/1
- Etalon muallifiIzohingiz etalon tanlansin · 3/5
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-state | lockednew | unlocked |
Anatomiya
- list
.fx-achievementsixtiyoriy - root
.fx-achievementşart - icon
.fx-achievement__iconşart - body
.fx-achievement__bodyşart - title
.fx-achievement__titleşart - desc
.fx-achievement__descixtiyoriy - bar
.fx-achievement__barixtiyoriy - new
.fx-achievement__newixtiyoriy
Holatlar
Klaviatura va kiriş
Röyxat — <ul>/<li>; progress — role="progressbar" + aria-valuenow/min/max va aria-label; belgi — bezak (aria-hidden), ma'no nom va sababda; title — qanday oliş mumkinligi.
Kod
AI uçun: qaçon işlatiladi
- Profil sahifasidagi yutuqlar, hissa nişonlari, öquv kursidagi bosqiçlar.
- Geymifikatsiya: keyingi nişongaça qança qolganini körsatiş.
- Holat yorliği →
badge - Vazifalar röyxati (bajarildi/yöq) →
checklist - Hamma yopiq nişonni birdan körsatmang — eng yaqin 3 tasi yetarli, qolgani «Hammasi» sahifasida.
- Yopiq nişonni faqat rang bilan ajratmang — uzuq çegara va «0/1» hisob ham bor.
- Sababni yozmasdan nişon bermang: odam nima uçun olganini bilsin.
npx foxui add achievement
<ul class="fx-achievements" aria-label="Nişonlar" style="inline-size:100%"> <li class="fx-achievement"><span class="fx-achievement__icon" aria-hidden="true">👣</span><span class="fx-achievement__body"><b class="fx-achievement__title">Birinçi qadam</b><span class="fx-achievement__desc">Birinçi hissa</span></span></li> <li class="fx-achievement" data-state="new"><span class="fx-achievement__icon" aria-hidden="true">👑</span><span class="fx-achievement__body"><b class="fx-achievement__title">Faxriy uçlik</b><span class="fx-achievement__desc">Faxriylar reytingida 1-örin</span></span><span class="fx-achievement__new">Yangi</span></li> <li class="fx-achievement" data-state="locked" title="Yangi mavzu boşlang"><span class="fx-achievement__icon" aria-hidden="true">⭐</span><span class="fx-achievement__body"><b class="fx-achievement__title">Birinçi manba</b><span class="fx-achievement__desc">Yangi mavzu boşlang · 0/1</span><span class="fx-achievement__bar" role="progressbar" aria-label="Birinçi manba" aria-valuenow="0" aria-valuemin="0" aria-valuemax="1" style="--fx-achievement-value: 0%"></span></span></li> <li class="fx-achievement" data-state="locked" title="5 ta izoh etalon tanlansin"><span class="fx-achievement__icon" aria-hidden="true">✍️</span><span class="fx-achievement__body"><b class="fx-achievement__title">Etalon muallifi</b><span class="fx-achievement__desc">Izohingiz etalon tanlansin · 3/5</span><span class="fx-achievement__bar" role="progressbar" aria-label="Etalon muallifi" aria-valuenow="3" aria-valuemin="0" aria-valuemax="5" style="--fx-achievement-value: 60%"></span></span></li> </ul>
Tokenlar: --fx-achievement-value --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-muted --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-control-h-md --fx-font-size-2xl --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-radius-pill --fx-radius-surface --fx-radius-tag --fx-size-icon-md --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-text-brand --fx-text-on-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary