Körsatiş · primitive
Ikon
Sprite ikoni uçun öram: ölçam (sm/md/lg/xl/em), ohang va töldirilgan holat. <svg class="fx-icon"><use href="#id"/></svg>; rang matndan olinadi. Optik sozlamalar (4.21): qalinlik data-weight light/regular/bold (yoki --fx-icon-stroke; ota blokda data-icon-weight) — çiziqli ikonlar uçun, viewBox'dan qat'i nazar bir xil; data-grade high/low — töldirilgan ikonni qalinlaştiradi/ingiçkalaştiradi; kontur/töldirilgan juftligi data-fill="auto" — tanlangan holatda (aria-pressed, aria-selected, aria-current, aria-checked) töldirilgani körinadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlgxlem Atrofdagi matn balandligiga moslaşadi. | md |
data-tone | mutedsecondarybrandinfosuccesswarningerror | inherit |
data-weight | none SVG atributidagi qalinliklightregularboldcustom --fx-icon-stroke bilan | none |
data-grade | normalhigh töldirilgan ikon qalinroqlow ingiçkaroq (faqat yuza fonida) | normal |
data-fill | offauto tanlanganda töldirilganon doim töldirilgan | off |
Anatomiya
- root
.fx-iconşart - line (kontur juftligi)
.fx-icon__lineixtiyoriy - fill (töldirilgan juftligi)
.fx-icon__fillixtiyoriy
Klaviatura va kiriş
Bezak ikon — aria-hidden="true"; yolğiz ma'no bersa — role="img" va aria-label.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Sprite (<symbol>/<use>) ikonini bir xil ölçam va rangda çiqariş.
Işlatmang
- Faqat ikonkali tugma →
button - Ma'noli ikonni nomsiz qoldirmang: yolğiz bölsa role="img" + aria-label.
- Ikonni rang bilan yolğiz ma'no qilmang — yoniga matn qöying.
- data-weight'ni töldirilgan (Phosphor) ikonga bermang — u çiziqli ikonlar uçun; töldirilganga data-grade.
npx foxui add icon
<svg class="fx-icon" data-size="sm" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16v.5" stroke-linecap="round"/></svg>
<svg class="fx-icon" data-tone="success" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l3 3 5-6" stroke-linecap="round" stroke-linejoin="round"/></svg>
<svg class="fx-icon" data-size="lg" data-tone="error" data-filled role="img" aria-label="Xato" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>
<!-- Optik sozlamalar (4.21): qalinlik, grade, kontur/toʻldirilgan juftligi -->
<div class="fx-cluster" data-gap="3" style="margin-block-start: var(--fx-space-4)">
<svg class="fx-icon" data-size="lg" data-weight="light" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" stroke-linecap="round"/></svg>
<svg class="fx-icon" data-size="lg" data-weight="regular" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" stroke-linecap="round"/></svg>
<svg class="fx-icon" data-size="lg" data-weight="bold" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" stroke-linecap="round"/></svg>
<svg class="fx-icon" data-size="lg" data-grade="high" aria-hidden="true" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" fill="currentColor"/></svg>
<button class="fx-btn" data-variant="ghost" type="button" aria-pressed="true" onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') !== 'true')">
<svg class="fx-icon" data-fill="auto" data-weight="regular" aria-hidden="true" viewBox="0 0 24 24"><g class="fx-icon__line"><path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z" stroke-linejoin="round"/></g><g class="fx-icon__fill"><path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8-4.3-4.1 5.9-.9z" fill="currentColor" stroke-linejoin="round"/></g></svg>
Sevimli mijoz
</button>
</div>Tokenlar: --fx-bg-surface --fx-fg-error --fx-fg-info --fx-fg-success --fx-fg-warning --fx-size-icon-lg --fx-size-icon-md --fx-size-icon-sm --fx-text-brand --fx-text-secondary --fx-text-tertiary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.