Körsatiş · primitive
Material (şişa)
Material öqi (tajriba, 20.10 — DS tadqiqoti: iOS 26, HyperOS 3, One UI 8.5, ColorOS 16, HarmonyOS 6, Telegram «şişa»ga ötdi): data-fx-material="glass-weak | glass | glass-strong" — uç daraja (HarmonyOS kabi). Faqat ustki qatlamlar şişaga aylanadi: popover, menyu, dialog, varaq, buyruqlar oynasi, hover karta, yopişqoq tepa panel va sayt sarlavhasi; kartalar va jadvallar tekis qoladi (öqiliş birinçi). Tizimda «kamroq şaffoflik» yoki Harakat «yöq» bölsa — töliq tekis. Berilmasa — heç narsa özgarmaydi. <html> yoki istalgan blokka qöyiladi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-fx-material | glass-weakglassglass-strong | solid |
Anatomiya
- root
[data-fx-material^="glass"]şart - demo
.fx-material-demoixtiyoriy - static
.fx-material-demo [data-static]ixtiyoriy
Holatlar
Klaviatura va kiriş
prefers-reduced-transparency: reduce va data-fx-motion="none" — töliq tekis (şaffoflik 100 %, xiralik 0). backdrop-filter qöllanmaydigan brauzerda — tekis fon. Matn rangi özgarmaydi — kontrast tekis yuzadagidek.
Kod
AI uçun: qaçon işlatiladi
- Rasm, xarita, video yoki rangli fon ustida oçiladigan menyu, popover, dialog.
- Kontent ostidan ötadigan yopişqoq tepa panel (aylantirişda kontent sezilib turadi).
- Zamonaviy, «2026» kayfiyatli libos (Apple, HyperOS, One UI uslubi).
- Ma'lumot ziç ilova (CRM jadvali, hisobot) →
elevation - Bitta yuzani kötariş (soya bilan) →
elevation - Kartalar, jadval va uzun matnli yuzalarga şişa bermang — öqilişi tuşadi; şişa — faqat ustki qatlam.
- Rangli, notekis fon ustida kuçli şişani kiçik matn bilan işlatmang — muvozanatli yoki kuçsiz darajani tanlang.
- Şaffoflikni qölda yozmang — daraja atributi yetarli; foydalanuvçining «kamroq şaffoflik» sozlamasi hurmat qilinadi.
npx foxui add material
<div style="display:grid;gap:var(--fx-space-5);inline-size:100%">
<div class="fx-material-demo" data-fx-material="glass">
<div class="fx-shell__top" style="position:relative;grid-area:auto;border-radius:var(--fx-radius-surface)"><b>Iş maydoni</b><span style="margin-inline-start:auto" class="fx-badge">Şişa</span></div>
<div style="display:flex;flex-wrap:wrap;gap:var(--fx-space-4);align-items:start">
<div class="fx-menu" role="menu" aria-label="Amallar" data-static style="min-inline-size:12rem"><button class="fx-menu__item" role="menuitem" type="button">Tahrirlaş</button><button class="fx-menu__item" role="menuitem" type="button">Nusxa oliş</button><button class="fx-menu__item" role="menuitem" type="button">Arxivlaş</button></div>
<div class="fx-popover" data-static style="gap:var(--fx-space-2);max-inline-size:18rem;padding:var(--fx-space-4)"><b>Buyurtma №4817</b><span style="color:var(--fx-text-secondary)">Ertaga 10:00–14:00 orasida yetkaziladi.</span><button class="fx-btn" data-variant="primary" data-size="sm" type="button">Tasdiqlaş</button></div>
</div>
</div>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:var(--fx-space-3)">
<div class="fx-material-demo" data-fx-material="glass-weak" style="padding:var(--fx-space-5)"><div class="fx-popover" data-static style="padding:var(--fx-space-3)">Kuçsiz — glass-weak</div></div>
<div class="fx-material-demo" data-fx-material="glass" style="padding:var(--fx-space-5)"><div class="fx-popover" data-static style="padding:var(--fx-space-3)">Muvozanatli — glass</div></div>
<div class="fx-material-demo" data-fx-material="glass-strong" style="padding:var(--fx-space-5)"><div class="fx-popover" data-static style="padding:var(--fx-space-3)">Kuçli — glass-strong</div></div>
</div>
</div>Tokenlar: --fx-bg-page --fx-bg-surface --fx-border-color-surface --fx-color-pastel-blue --fx-color-pastel-pink --fx-color-pastel-yellow --fx-color-white --fx-glass-alpha --fx-glass-blur --fx-glass-sat --fx-radius-overlay --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-8