Körsatiş · molecule
Qurilma ramkasi
Skrinşot yoki jonli HTML'ni brauzer (manzil qatori va uçta nuqta) yoki telefon (yumaloq ramka, kesik) ramkasida körsatiş (4.75) — landing, hujjat va taqdimot uçun. Ramka faqat CSS: rasm faylisiz, ranglar mavzudan, yoruğ va qoronğida moslaşadi. Ekran içiga img, video yoki FoxUI bloklari qöyiladi; brauzer nisbati 16:10 (data-ratio="auto" — kontent balandligi), telefon 9:19,5.
48
17
9
4,2 mln söm
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-device | browserphone | browser |
data-ratio | auto kontent balandligi (faqat browser) | 16/10 |
data-notch | none | island |
data-shadow | none | lg |
Anatomiya
- root
.fx-mockupşart - frame
.fx-mockup__frameşart - bar
.fx-mockup__barixtiyoriy - dots
.fx-mockup__dotsixtiyoriy - url
.fx-mockup__urlixtiyoriy - screen
.fx-mockup__screenşart
Klaviatura va kiriş
figure + figcaption; ramka bezaklari (nuqtalar, manzil qatori) aria-hidden. Içidagi rasmga mazmunli alt; jonli HTML bölsa — undagi tugmalar haqiqiy bölmasa, inert yoki aria-hidden qöying.
Kod
AI uçun: qaçon işlatiladi
- Landing hero blokida mahsulot skrinşoti.
- Hujjatda «telefonda qanday körinadi» namunasi.
npx foxui add mockup
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:var(--fx-space-8);align-items:center">
<figure class="fx-mockup" data-device="browser">
<div class="fx-mockup__frame">
<div class="fx-mockup__bar" aria-hidden="true"><span class="fx-mockup__dots"><i></i></span><span class="fx-mockup__url">crm.savdo.uz/bitimlar</span><span></span></div>
<div class="fx-mockup__screen"><div style="display:grid;grid-template-columns:auto 1fr;block-size:100%;font-size:var(--fx-font-size-xs)"><div style="display:grid;align-content:start;gap:var(--fx-space-2);padding:var(--fx-space-3);background:var(--fx-bg-surface);border-inline-end:var(--fx-border-width-default) solid var(--fx-border-color-default)"><strong>Savdo CRM</strong><span>Boş sahifa</span><span style="color:var(--fx-text-brand);font-weight:var(--fx-font-weight-semibold)">Bitimlar</span><span>Mijozlar</span><span>Hisobotlar</span></div><div style="display:grid;align-content:start;gap:var(--fx-space-3);padding:var(--fx-space-4)"><strong style="font-size:var(--fx-font-size-md)">Bitimlar · oktyabr</strong><div style="display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fx-space-2)"><div class="fx-card" style="padding:var(--fx-space-3)">Yangi<br><b style="font-size:var(--fx-font-size-lg)">48</b></div><div class="fx-card" style="padding:var(--fx-space-3)">Muzokara<br><b style="font-size:var(--fx-font-size-lg)">17</b></div><div class="fx-card" style="padding:var(--fx-space-3)">Yutildi<br><b style="font-size:var(--fx-font-size-lg)">9</b></div></div><div class="fx-progress" style="--fx-progress-value:64%" role="progressbar" aria-valuenow="64" aria-label="Oylik reja"></div><span style="color:var(--fx-text-tertiary)">Oylik reja: 64 % · 312 mln söm</span></div></div></div>
</div>
<figcaption>CRM: bitimlar paneli</figcaption>
</figure>
<figure class="fx-mockup" data-device="phone">
<div class="fx-mockup__frame"><div class="fx-mockup__screen"><div style="display:grid;align-content:start;gap:var(--fx-space-3);padding:var(--fx-space-12) var(--fx-space-4) var(--fx-space-4);block-size:100%;font-size:var(--fx-font-size-xs)"><strong style="font-size:var(--fx-font-size-lg)">Salom, Dilnoza</strong><div class="fx-card" style="padding:var(--fx-space-3)">Bugungi tuşum<br><b style="font-size:var(--fx-font-size-xl)">4,2 mln söm</b></div><div class="fx-card" style="padding:var(--fx-space-3)">Yangi buyurtmalar: <b>12</b></div><div class="fx-card" style="padding:var(--fx-space-3)">Kuryerda: <b>5</b></div></div></div></div>
<figcaption>Dökon ilovasi</figcaption>
</figure>
</div>Tokenlar: --fx-bg-muted --fx-bg-page --fx-bg-surface --fx-border-color-default --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-font-size-xs --fx-radius-circle --fx-radius-control --fx-radius-overlay --fx-radius-pill --fx-radius-surface --fx-shadow-lg --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary