Körsatiş · primitive

Tipografiya rollari

Tipografiya rol şkalasi (4.1–4.5): display · headline · title · body · label, har biri lg/md/sm. Rol ölçam, qator balandligi (--fx-line-height-*), vazn va harf oraliğini (--fx-tracking-*) birga beradi — komponent alohida font-size tanlamaydi, rolni tanlaydi. Display va headline sarlavha şriftida (data-fx-font) va moslaşuv bilan; data-fluid="on" — ekran eniga silliq moslaşuvçi ölçam (clamp: 20→24, 24→36, 30→48, 36→72 px). Katta display ölçamlari: display-lg 48, display-xl 60, display-2xl 72.

beta0.28.0 dan.fx-typeFaqat CSS

Yangi imkoniyat

Mijozlar bilan işlaş endi bitta oynada

Buyurtmalar, qönğiroqlar va tölovlar — hammasi bir joyda. Jamoangiz har bir mijozning tarixini köradi.

Oktabr hisoboti

Toşkent filiali

Ötgan oyga nisbatan sotuvlar 12 % oşdi, qaytarilgan buyurtmalar kamaydi.

48 750 000 söm

Yangilandi: bugun, 14:20

Variantlar

Atribut	Qiymatlar	Standart
`data-role`	`display-lg` 60 px, hero `display-md` 48 px `display-sm` 36 px `headline-lg` 30 px, sahifa sarlavhasi `headline-md` 24 px `headline-sm` 20 px, bölim `title-lg` 18 px, dialog/panel `title-md` 16 px, karta `title-sm` 14 px `body-lg` 16 px `body-md` 14 px, standart `body-sm` 12 px `label-lg` 14 px, tugma `label-md` 12 px, ustun boşi `label-sm` 12 px, keng oraliq — eyebrow	`body-md`
`data-fluid`	`off` `on` faqat display va headline rollarida	`off`
`data-case`	`none` `upper` eyebrow	`none`
`data-tone`	`primary` `secondary` `tertiary` `brand`	`primary`
`data-leading`	`tight` `snug` `normal` `relaxed`	`rol`
`data-tracking`	`tight` `normal` `wide` `wider`	`rol`

Anatomiya

root.fx-typeşart

Klaviatura va kiriş

Rol faqat köriniş: sarlavha darajasi h1–h6 bilan beriladi. Fluid ölçamda rem qismi bor — brauzer kattalaştirişi (200 %) işlaydi.

Kod

AI uçun: qaçon işlatiladi

Işlating

Yangi komponent yoki sahifa matni — ölçam, qator balandligi va vaznni bitta rol bilan beriş.
Hero va landing sarlavhasi (display, data-fluid="on").

Işlatmang

Mavjud h1–h4 sarlavha uslubi yetarli bölsa → heading
Uzun maqola matni → prose
Rol içida font-size yoki line-height'ni qölda yozmang — kerak bölsa data-leading / data-tracking bilan almaştiring.
Vizual rolni semantik daraja örniga işlatmang: sahifada h1 bitta, rol esa istalgan bölişi mumkin.
Display rolini oddiy ilova ekranida (CRM, jadval) işlatmang — u landing va hero uçun.

npx foxui add type

<p class="fx-type" data-role="label-sm" data-case="upper" data-tone="brand">Yangi imkoniyat</p>
<h1 class="fx-type" data-role="display-md" data-fluid="on">Mijozlar bilan işlaş endi bitta oynada</h1>
<p class="fx-type" data-role="body-lg" data-tone="secondary">Buyurtmalar, qönğiroqlar va tölovlar — hammasi bir joyda. Jamoangiz har bir mijozning tarixini köradi.</p>
<h2 class="fx-type" data-role="headline-sm">Oktabr hisoboti</h2>
<h3 class="fx-type" data-role="title-md">Toşkent filiali</h3>
<p class="fx-type" data-role="body-md">Ötgan oyga nisbatan sotuvlar 12 % oşdi, qaytarilgan buyurtmalar kamaydi.</p>
<p class="fx-type" data-role="display-sm" data-numeric>48 750 000 söm</p>
<span class="fx-type" data-role="label-md" data-tone="tertiary">Yangilandi: bugun, 14:20</span>

Tokenlar: --fx-font-adjust-display --fx-font-adjust-numeric --fx-font-family-display --fx-font-family-numeric --fx-font-size-fluid-lg --fx-font-size-fluid-md --fx-font-size-fluid-sm --fx-font-size-fluid-xl --fx-line-height-normal --fx-line-height-relaxed --fx-line-height-snug --fx-line-height-tight --fx-text-brand --fx-text-secondary --fx-text-tertiary --fx-tracking-normal --fx-tracking-tight --fx-tracking-wide --fx-tracking-wider --fx-type-body-lg-line-height --fx-type-body-lg-size --fx-type-body-lg-tracking --fx-type-body-lg-weight --fx-type-body-md-line-height --fx-type-body-md-size --fx-type-body-md-tracking --fx-type-body-md-weight --fx-type-body-sm-line-height --fx-type-body-sm-size --fx-type-body-sm-tracking --fx-type-body-sm-weight --fx-type-display-lg-line-height --fx-type-display-lg-size --fx-type-display-lg-tracking --fx-type-display-lg-weight --fx-type-display-md-line-height --fx-type-display-md-size --fx-type-display-md-tracking --fx-type-display-md-weight --fx-type-display-sm-line-height --fx-type-display-sm-size --fx-type-display-sm-tracking --fx-type-display-sm-weight --fx-type-headline-lg-line-height --fx-type-headline-lg-size --fx-type-headline-lg-tracking --fx-type-headline-lg-weight --fx-type-headline-md-line-height --fx-type-headline-md-size --fx-type-headline-md-tracking --fx-type-headline-md-weight --fx-type-headline-sm-line-height --fx-type-headline-sm-size --fx-type-headline-sm-tracking --fx-type-headline-sm-weight --fx-type-label-lg-line-height --fx-type-label-lg-size --fx-type-label-lg-tracking --fx-type-label-lg-weight --fx-type-label-md-line-height --fx-type-label-md-size --fx-type-label-md-tracking --fx-type-label-md-weight --fx-type-label-sm-line-height --fx-type-label-sm-size --fx-type-label-sm-tracking --fx-type-label-sm-weight --fx-type-title-lg-line-height --fx-type-title-lg-size --fx-type-title-lg-tracking --fx-type-title-lg-weight --fx-type-title-md-line-height --fx-type-title-md-size --fx-type-title-md-tracking --fx-type-title-md-weight --fx-type-title-sm-line-height --fx-type-title-sm-size --fx-type-title-sm-tracking --fx-type-title-sm-weight

Ş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.

Tipografiya rollari

Mijozlar bilan işlaş endi bitta oynada

Oktabr hisoboti

Toşkent filiali

Variantlar

Anatomiya

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik