Karkas · primitive
Elevation va yuza qatlamlari
Yuza qatlamlari poydevori. Elevation 0–5 (4.7): har daraja soya (--fx-elevation-N) + yuza tusi (--fx-elevation-tint-N) juftligi — yoruğda soya, qoronğida yuza yoruğroq bölib ajraladi; soya uslub tugmalariga (blur, depth) va «Çegara» öqiga böysunadi. data-hover="raise" — hover'da bir daraja kötariladi. Şişa material (4.16): fx-material thin/regular/thick — şaffof yuza, orqa fon xiralaşuvi, nozik çegara; qöllanmasa yoki şaffoflik/kontrast sozlamasida tekis yuza. Viz palitralar (4.20): ketma-ket --fx-viz-seq-1…7 (kamdan köpga, brend) va ikki qutbli --fx-viz-div-1…7 (xavf ← kontekst → ösiş), mavzu bilan almaşadi; fx-viz-scale — legenda çiziği, data-viz-step — katakni böyaş.
| Filial | Du | Se | Ch |
|---|---|---|---|
| Çilonzor | 14 | 52 | 31 |
| Yunusobod | 33 | 6 | 48 |
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-level | 012345 | 1 |
data-hover | noneraise hover'da +1 daraja | none |
data-material | thinregularthick | regular |
data-scale | seq ketma-ketdiv ikki qutbli | seq |
Anatomiya
- elevation
.fx-elevationşart - material
.fx-materialixtiyoriy - viz-scale
.fx-viz-scaleixtiyoriy - viz-scale-min
.fx-viz-scale__minixtiyoriy - viz-scale-max
.fx-viz-scale__maxixtiyoriy - viz-step
[data-viz-step]ixtiyoriy
Holatlar
Klaviatura va kiriş
Elevation bezak — ma'no bermaydi. Şişa material prefers-reduced-transparency, prefers-contrast: more va data-fx-contrast="more"da tekis yuzaga tuşadi; forced-colors'da tizim çegarasi. Viz şkalasiga role="img" + aria-label (oraliq söz bilan).
Kod
AI uçun: qaçon işlatiladi
- Yuza darajasini belgilaş: karta (1), sudralayotgan element (2), menyu (3), dialog (4), toast (5).
- Yopişqoq header yoki varaq ostidan kontent ötayotgani sezilişi kerak bölganda — fx-material.
- Heatmap, choropleth, foiz özgarişi jadvali — viz-seq / viz-div.
- Kontent guruhi uçun yuza (çegarali) →
card - Kategoriya (toifa) ranglari →
badge - Soyani qölda yozmang (box-shadow: 0 4px …) — darajani tanlang: soya uslub va chegara oʻqiga boʻysunadi.
- Bir ekranda 3 tadan ortiq darajani yonma-yon işlatmang — ierarxiya yöqoladi.
- Şişa materialni matn köp bölgan katta yuzada işlatmang — orqa fon öqişni buzadi; header, varaq, toast uçun.
- Viz poğonani yagona ma'no belgisi qilmang: katak içida qiymat yoki legenda bölsin.
npx foxui add elevation
<div class="fx-grid" data-min="sm" data-gap="4"> <div class="fx-elevation" data-level="0" style="padding: var(--fx-space-4); border-radius: var(--fx-radius-surface)">0 · Tekis panel</div> <div class="fx-elevation" style="padding: var(--fx-space-4); border-radius: var(--fx-radius-surface)">1 · Mijoz kartasi</div> <div class="fx-elevation" data-level="2" style="padding: var(--fx-space-4); border-radius: var(--fx-radius-surface)">2 · Sudralayotgan bitim</div> <div class="fx-elevation" data-level="3" style="padding: var(--fx-space-4); border-radius: var(--fx-radius-surface)">3 · Menyu</div> <div class="fx-elevation" data-level="4" style="padding: var(--fx-space-4); border-radius: var(--fx-radius-surface)">4 · Dialog</div> <div class="fx-elevation" data-level="5" style="padding: var(--fx-space-4); border-radius: var(--fx-radius-surface)">5 · Bildirişnoma</div> <a class="fx-elevation" data-hover="raise" href="#" style="padding: var(--fx-space-4); border-radius: var(--fx-radius-surface); color: inherit; text-decoration: none">Hover'da kötariladi</a> </div> <div class="fx-material" data-material="regular" style="padding: var(--fx-space-4); border-radius: var(--fx-radius-overlay); margin-block-start: var(--fx-space-4)">Şişa panel: «Yangi buyurtma — Aziza Karimova, 340 000 söm»</div> <div class="fx-viz-scale" data-scale="seq" role="img" aria-label="Şkala: 0 dan 120 tagaça buyurtma" style="margin-block-start: var(--fx-space-4)"><span class="fx-viz-scale__min">0</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><span class="fx-viz-scale__max">120</span></div> <div class="fx-viz-scale" data-scale="div" role="img" aria-label="Şkala: −30 % dan +30 % gaça özgariş" style="margin-block-start: var(--fx-space-2)"><span class="fx-viz-scale__min">−30 %</span><i></i><i></i><i></i><i></i><i></i><i></i><i></i><span class="fx-viz-scale__max">+30 %</span></div> <table class="fx-table" style="margin-block-start: var(--fx-space-4)"><thead><tr><th>Filial</th><th>Du</th><th>Se</th><th>Ch</th></tr></thead><tbody><tr><td>Çilonzor</td><td data-viz-step="seq-2">14</td><td data-viz-step="seq-4">52</td><td data-viz-step="seq-3">31</td></tr><tr><td>Yunusobod</td><td data-viz-step="seq-3">33</td><td data-viz-step="seq-1">6</td><td data-viz-step="seq-4">48</td></tr></tbody></table>
Tokenlar: --fx-bg-surface --fx-border-color-default --fx-border-color-strong --fx-border-width-default --fx-ease-spring --fx-ease-standard --fx-elevation-0 --fx-elevation-1 --fx-elevation-2 --fx-elevation-3 --fx-elevation-4 --fx-elevation-5 --fx-elevation-tint-0 --fx-elevation-tint-1 --fx-elevation-tint-2 --fx-elevation-tint-3 --fx-elevation-tint-4 --fx-elevation-tint-5 --fx-font-size-xs --fx-knob-motion-lift --fx-motion-base --fx-motion-lift --fx-radius-badge --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-viz-brand --fx-viz-context --fx-viz-div-1 --fx-viz-div-2 --fx-viz-div-3 --fx-viz-div-4 --fx-viz-div-5 --fx-viz-div-6 --fx-viz-div-7 --fx-viz-risk --fx-viz-seq-1 --fx-viz-seq-2 --fx-viz-seq-3 --fx-viz-seq-4 --fx-viz-seq-5 --fx-viz-seq-6 --fx-viz-seq-7