Ma'lumot · molecule

Ölçagiç

Ma'lum diapazondagi qiymat: siğim, ball, mezon. Progress'dan farqi — jarayon emas, holat: maqsad belgisi (--fx-meter-target), zonalar (past/örta/yuqori, data-zones), şkala yorliqlari. Asosiy şakl — çiziqli (#54, WDS «Grafiklar»); bitta yirik körsatkiç kartasi uçun yarim doira (data-shape="gauge", 4.115): raqam markazda, maqsad çiziği, zonalar. Baholi şkala (data-variant="graded", Manbaa'dan otaga 19.10): 0–100 işonç yoki sifat bali — qizildan yaşilgaça gradient, har 10 ballda kesik, ▼ belgi, katta son va daraja sözi; <details> bölsa oçilganda qismlar röyxati, data-shape="tile" — kvadrat nişon.

beta0.23.0 danyangilandi 0.39.0.fx-meterFaqat CSS

Davomat82 % · maqsad 90 %

Server diski91 GB / 100 GB

Mijoz qoniqişi · maqsad 8074

IşonçlilikÖrta 43/100

Kiriş · Örta40/100
Hayoti · Past25/100
Manbalar · Juda yuqori88/100

Işonç43 Örta

Variantlar

Atribut	Qiymatlar	Standart
`data-tone`	`success` `warning` `error`	`ink`
`data-size`	`sm` `lg`	`md`
`data-zones`	`reverse` Teskari: past — yaxşi (disk, xato)	—
`data-shape`	`line` `gauge` Yarim doira; raqam markazda, .fx-meter__scale — min/max `tile` Kvadrat nişon: yorliq, katta son, kiçik şkala, daraja; <a> bölsa — batafsilga olib boradi	`line`
`data-variant`	`graded` Baholi şkala 0–100: qizil→yaşil gradient, har 10 da kesik, .fx-meter__mark — ▼ belgi (Manbaa'dan, 19.10)	`solid`

Anatomiya

root.fx-meterşart
head.fx-meter__headixtiyoriy
label.fx-meter__labelixtiyoriy
value.fx-meter__valueixtiyoriy
track.fx-meter__trackşart
fill.fx-meter__fillşart
target.fx-meter__targetixtiyoriy
scale.fx-meter__scaleixtiyoriy
mark.fx-meter__markixtiyoriy
level.fx-meter__levelixtiyoriy
score.fx-meter__scoreixtiyoriy
parts.fx-meter__partsixtiyoriy

Klaviatura va kiriş

role="meter" + aria-valuenow/min/max + aria-labelledby; aria-valuetext'da maqsadni ham yozing; maqsad belgisi va şkala aria-hidden.

Naqş: WAI-ARIA APG meter · rol meter

Kod

AI uçun: qaçon işlatiladi

Işlating

Qiymatning diapazondagi örni, maqsad yoki xavfli zona bilan.

Işlatmang

Jarayon foizi → progress
Taqqoslaş (bir neçta toifa) → barlist
Jarayon (yuklaniş) uçun işlatmang — progress.
Dashboard grafiklarida yarim doira işlatmang — çiziqli; gauge faqat bitta yirik körsatkiç kartasida (siğim, NPS) va raqami bilan.
Zonalar rangiga yolğiz tayanmang — qiymat matni (82 %) yonida yoziladi.
Diapazoni yöq qiymat uçun işlatmang.
Baholi şkalani jarayon foizi uçun işlatmang — progress. Daraja rangiga yolğiz tayanmang: söz (Past · Örta · Yuqori) yonida turadi.
Ballni «sovğa» qilmang: qiymat faqat hisobdan; qism max = 0 bölsa (jarima) — çiziqsiz, faqat matn.

npx foxui add meter

<div class="fx-meter" data-tone="success" data-zones style="--fx-meter-value: 82%; --fx-meter-target: 90%">
  <div class="fx-meter__head"><span class="fx-meter__label" id="mt1">Davomat</span><span class="fx-meter__value">82 % · maqsad 90 %</span></div>
  <div class="fx-meter__track" role="meter" aria-labelledby="mt1" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" aria-valuetext="82 foiz, maqsad 90 foiz">
    <div class="fx-meter__fill"></div><div class="fx-meter__target" aria-hidden="true"></div>
  </div>
  <div class="fx-meter__scale" aria-hidden="true"><span>0</span><span>50</span><span>100</span></div>
</div>
<div class="fx-meter" data-tone="warning" data-size="sm" style="--fx-meter-value: 91%">
  <div class="fx-meter__head"><span class="fx-meter__label" id="mt2">Server diski</span><span class="fx-meter__value">91 GB / 100 GB</span></div>
  <div class="fx-meter__track" role="meter" aria-labelledby="mt2" aria-valuenow="91" aria-valuemin="0" aria-valuemax="100"><div class="fx-meter__fill"></div></div>
</div>
<!-- Yarim doira (4.115) -->
<div class="fx-meter" data-shape="gauge" data-zones style="--fx-meter-value: 74%; --fx-meter-target: 80%">
  <div class="fx-meter__head"><span class="fx-meter__label" id="mtg1">Mijoz qoniqişi · maqsad 80</span><span class="fx-meter__value">74</span></div>
  <div class="fx-meter__track" role="meter" aria-labelledby="mtg1" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" aria-valuetext="74 ball, maqsad 80">
    <div class="fx-meter__fill"></div><div class="fx-meter__target" aria-hidden="true"></div>
  </div>
  <div class="fx-meter__scale" aria-hidden="true"><span>0</span><span>100</span></div>
</div>
<!-- Baholi shkala (data-variant="graded") — ochiladigan tarkib bilan -->
<details class="fx-meter" data-variant="graded" data-size="lg" data-tone="warning" style="--fx-meter-value: 43%">
  <summary>
    <span class="fx-meter__head"><span class="fx-meter__label" id="mgr1">Işonçlilik</span><span class="fx-meter__level">Örta</span></span>
    <span class="fx-meter__score"><b>43</b>/100</span>
    <span class="fx-meter__track" role="meter" aria-labelledby="mgr1" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" aria-valuetext="43 ball, örta"><span class="fx-meter__fill"></span><span class="fx-meter__mark" aria-hidden="true"></span></span>
  </summary>
  <ul class="fx-meter__parts">
    <li class="fx-meter" data-variant="graded" data-size="sm" data-tone="warning" style="--fx-meter-value: 40%"><span class="fx-meter__head"><span class="fx-meter__label" id="mgr2">Kiriş · Örta</span><span class="fx-meter__value">40/100</span></span><span class="fx-meter__track" role="meter" aria-labelledby="mgr2" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"><span class="fx-meter__fill"></span></span></li>
    <li class="fx-meter" data-variant="graded" data-size="sm" data-tone="error" style="--fx-meter-value: 25%"><span class="fx-meter__head"><span class="fx-meter__label" id="mgr3">Hayoti · Past</span><span class="fx-meter__value">25/100</span></span><span class="fx-meter__track" role="meter" aria-labelledby="mgr3" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><span class="fx-meter__fill"></span></span></li>
    <li class="fx-meter" data-variant="graded" data-size="sm" data-tone="success" style="--fx-meter-value: 88%"><span class="fx-meter__head"><span class="fx-meter__label" id="mgr4">Manbalar · Juda yuqori</span><span class="fx-meter__value">88/100</span></span><span class="fx-meter__track" role="meter" aria-labelledby="mgr4" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"><span class="fx-meter__fill"></span></span></li>
  </ul>
</details>
<!-- Kvadrat nishon -->
<a class="fx-meter" href="#mgr1" data-variant="graded" data-shape="tile" data-tone="warning" style="--fx-meter-value: 43%">
  <span class="fx-meter__label" id="mgr5">Işonç</span><span class="fx-meter__score"><b>43</b></span>
  <span class="fx-meter__track" role="meter" aria-labelledby="mgr5" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" aria-valuetext="43 ball, örta"><span class="fx-meter__fill"></span></span>
  <span class="fx-meter__level">Örta</span>
</a>

Tokenlar: --fx-bg-error-subtle --fx-bg-success-subtle --fx-bg-surface --fx-bg-warning-subtle --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-color-amber-300 --fx-color-amber-600 --fx-color-black --fx-color-green-600 --fx-color-red-300 --fx-color-red-600 --fx-control-h-lg --fx-control-h-md --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-adjust-display --fx-font-adjust-numeric --fx-font-family-display --fx-font-family-numeric --fx-font-size-display-sm --fx-font-size-sm --fx-font-size-xs --fx-font-weight-bold --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-base --fx-motion-fast --fx-motion-slow --fx-radius-badge --fx-radius-surface --fx-shadow-sm --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-text-error --fx-text-primary --fx-text-secondary --fx-text-tertiary --fx-viz-ink --fx-viz-track

Şu toifadan

API kalitlariAPI kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.Audit jurnaliXavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».Ustunli röyxatHar satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.Tarif va hisob-kitobTarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).Doska (kanban)Holat ustunlari va kartalar.GrafikGrafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.

Ölçagiç

Variantlar

Anatomiya

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik