Ma'lumot · molecule
Konsentrik halqalar
2–3 maqsadning bajarilişi bitta içma-iç halqada (4.116) — Apple Activity halqalari kabi: menejerning kunlik rejasi, öquvçining haftalik maqsadi. Har halqa — bitta körsatkiç (style="--fx-rings-value: 72%"), taşqisi birinçi; raqam, maqsad va foiz legendada doim matn bilan. Ranglar grafik rollaridan (brand · ink · accent). Faqat CSS, JS yöq. WDS qoidasi: bitta foiz uçun halqa emas, çiziqli ölçagiç — halqa faqat bir neçta maqsadni bir qaraşda körsatiş uçun.
- Qönğiroqlar36 / 50 ta · 72 %
- Uçraşuvlar7 / 8 ta · 88 %
- Yopilgan bitimlar3 / 5 ta · 60 %
- Darslar18 / 20 soat · 90 %
- Uy vazifalari41 / 60 ta · 68 %
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-role | inkaccentriskcontext | brand |
data-size | smlg | md |
data-layout | stack legenda ostida | row |
Anatomiya
- root
.fx-ringsşart - plot
.fx-rings__plotşart - ring
.fx-rings__ringşart - center
.fx-rings__centerixtiyoriy - legend
.fx-rings__legendşart - name
.fx-rings__nameixtiyoriy - value
.fx-rings__valueixtiyoriy
Klaviatura va kiriş
figure role="group" + aria-label; halqalar aria-hidden — ma'lumot legendada matn (nom, qiymat / maqsad, foiz). Rang yolğiz emas. forced-colors'da tizim ranglari.
Kod
AI uçun: qaçon işlatiladi
- Kunlik yoki haftalik 2–3 maqsad: qönğiroq, uçraşuv, bitim.
- Profil yoki dashboard kartasida «bugungi faollik».
- Bitta jarayonning foizi (yuklaş, töldiriş) →
progress - Bir neçta körsatkiçni maqsad bilan soliştiriş →
chart - Bitta foiz uçun işlatmang — çiziqli ölçagiç (fx-progress, fx-chart gauge) aniqroq.
- 3 tadan köp halqa qöymang — içkilari juda kiçrayadi.
- Legendani olib taşlamang: raqam va nom faqat rangdan bilinmaydi.
- Aksent rolini içki ingiçka halqaga emas, taşqi yoki örtadagisiga bering.
npx foxui add rings
<figure class="fx-rings" role="group" aria-label="Bugungi reja: Aziz Karimov">
<div class="fx-rings__plot" aria-hidden="true">
<span class="fx-rings__ring" data-role="brand" style="--fx-rings-value: 72%"></span>
<span class="fx-rings__ring" data-role="ink" style="--fx-rings-value: 88%"></span>
<span class="fx-rings__ring" data-role="accent" style="--fx-rings-value: 60%"></span>
<span class="fx-rings__center">73 %<small>örtaça</small></span>
</div>
<ul class="fx-rings__legend">
<li data-role="brand"><span class="fx-rings__name">Qönğiroqlar</span><span class="fx-rings__value">36 <small>/ 50 ta · 72 %</small></span></li>
<li data-role="ink"><span class="fx-rings__name">Uçraşuvlar</span><span class="fx-rings__value">7 <small>/ 8 ta · 88 %</small></span></li>
<li data-role="accent"><span class="fx-rings__name">Yopilgan bitimlar</span><span class="fx-rings__value">3 <small>/ 5 ta · 60 %</small></span></li>
</ul>
</figure>
<figure style="margin-block-start:var(--fx-space-6)" class="fx-rings" data-size="sm" role="group" aria-label="Haftalik maqsad: 9-«A» sinf">
<div class="fx-rings__plot" aria-hidden="true">
<span class="fx-rings__ring" data-role="brand" style="--fx-rings-value: 90%"></span>
<span class="fx-rings__ring" data-role="ink" style="--fx-rings-value: 68%"></span>
<span class="fx-rings__center">79 %<small>örtaça</small></span>
</div>
<ul class="fx-rings__legend">
<li data-role="brand"><span class="fx-rings__name">Darslar</span><span class="fx-rings__value">18 <small>/ 20 soat · 90 %</small></span></li>
<li data-role="ink"><span class="fx-rings__name">Uy vazifalari</span><span class="fx-rings__value">41 <small>/ 60 ta · 68 %</small></span></li>
</ul>
</figure>Tokenlar: --fx-ease-emphasized --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-regular --fx-font-weight-semibold --fx-motion-slower --fx-radius-circle --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-secondary --fx-text-tertiary --fx-viz-accent --fx-viz-brand --fx-viz-context --fx-viz-ink --fx-viz-risk