Körsatiş · molecule
Element kartasi
Bitta qator-karta: çapda ikon plitkasi (yoki avatar), örtada sarlavha va izoh, öng çetda amal — tugma, almaştirgiç, tanlov, nişon, summa, menyu yoki strelka. Qurilmalar, ulangan hisoblar, sozlamalar, tölov usullari uçun. Bosiladigan bölsa — <a>/<button class="fx-item">, almaştirgiçli qator — <label class="fx-item">. Guruh (.fx-item-group): sarlavha + izoh + amal; data-layout="list" — bitta yuza, ajratgiçlar bilan (iOS sozlamalari kabi), data-layout="grid" — 2–3 ustunli tör. Variantlar: asosiy, secondary, tertiary, outline, ghost; ölçam sm/lg (heroui.pro Item Card'dan ilhom, kalibr — FoxUI).
Qurilmalar
Hisobingizga kirgan qurilmalar
- MacBook Pro · ChromeToşkent · hozir faolŞu qurilma
- iPhone 15Samarqand · 3 kun oldin
Sozlamalar
- XavfsizlikParol va 2 bosqiçli tasdiq
- BildirişnomalarQaysi kanal orqali
Ulangan hisoblar
Kiriş uçun işlatiladi
- Telegram@aziz_karimovUlangan
- GoogleUlanmagan
Uzcard ···· 4417AsosiyMuddati 09/281 250 000 söm
Ikkinçi darajalidata-variant="secondary"
Uçinçi darajalidata-variant="tertiary"
Çiziqlidata-variant="outline"
Şaffof, kiçik
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | secondarytertiaryoutlineghost | default |
data-size | smlg | md |
data-tone | brandsuccesswarningerror | neutral |
data-layout | listgrid | stack |
Anatomiya
- root
.fx-itemşart - icon
.fx-item__iconixtiyoriy - body
.fx-item__bodyşart - title
.fx-item__titleşart - desc
.fx-item__descixtiyoriy - end
.fx-item__endixtiyoriy - group
.fx-item-groupixtiyoriy - group-head
.fx-item-group__headixtiyoriy - group-title
.fx-item-group__titleixtiyoriy - group-desc
.fx-item-group__descixtiyoriy - group-list
.fx-item-group__listixtiyoriy
Holatlar
hoverpressedfocuscurrentdisabled
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Bosiladigan kartaga yoki içidagi amalga ötadi |
| Enter | Havola/tugma kartani oçadi |
| Space | Almaştirgiçli qatorda holatni almaştiradi |
Röyxat — <ul>/<li>; bosiladigan karta — <a>/<button> (butun yuza bosiladi, fokus halqasi körinadi); almaştirgiçli qator — <label> (sarlavha bosilsa ham almaşadi). Ikon — bezak (aria-hidden); ma'no matnda.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Sozlamalar, qurilmalar, ulangan hisoblar, tölov usullari, fayllar röyxati — har qatorda bitta asosiy amal.
- Dashboard'da qisqa röyxat-kartalar (oxirgi tölovlar, vazifalar).
Işlatmang
- Köp ustunli ma'lumot, saralaş va filtr →
table - Avatar + meta bilan uzun röyxat (xabarlar, mijozlar) →
list - Iş qatori (ustuvorlik, muddat, holat) →
row - Bitta qatorga ikkitadan ortiq amal qöymang — qolganini menyuga oling.
- Butun karta havola bölsa, içiga yana tugma yoki havola qöymang (içma-iç bosiladigan element).
- Izohni ikki qatorga çözmang — u bitta qatorda «…» bilan qisqaradi; batafsil — oçiladigan sahifada.
npx foxui add item
<div style="display:grid;inline-size:100%;gap:var(--fx-space-6);max-inline-size:34rem">
<div class="fx-item-group" data-layout="list">
<div class="fx-item-group__head"><div><h3 class="fx-item-group__title">Qurilmalar</h3><p class="fx-item-group__desc">Hisobingizga kirgan qurilmalar</p></div><button class="fx-btn" data-size="sm" type="button">Hammasidan çiqiş</button></div>
<ul class="fx-item-group__list">
<li class="fx-item"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M128,24h0A104,104,0,1,0,232,128,104.12,104.12,0,0,0,128,24Zm88,104a87.61,87.61,0,0,1-3.33,24H174.16a157.44,157.44,0,0,0,0-48h38.51A87.61,87.61,0,0,1,216,128ZM102,168H154a115.11,115.11,0,0,1-26,45A115.27,115.27,0,0,1,102,168Zm-3.9-16a140.84,140.84,0,0,1,0-48h59.88a140.84,140.84,0,0,1,0,48ZM40,128a87.61,87.61,0,0,1,3.33-24H81.84a157.44,157.44,0,0,0,0,48H43.33A87.61,87.61,0,0,1,40,128ZM154,88H102a115.11,115.11,0,0,1,26-45A115.27,115.27,0,0,1,154,88Zm52.33,0H170.71a135.28,135.28,0,0,0-22.3-45.6A88.29,88.29,0,0,1,206.37,88ZM107.59,42.4A135.28,135.28,0,0,0,85.29,88H49.63A88.29,88.29,0,0,1,107.59,42.4ZM49.63,168H85.29a135.28,135.28,0,0,0,22.3,45.6A88.29,88.29,0,0,1,49.63,168Zm98.78,45.6a135.28,135.28,0,0,0,22.3-45.6h35.66A88.29,88.29,0,0,1,148.41,213.6Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>MacBook Pro · Chrome</span></span><span class="fx-item__desc">Toşkent · hozir faol</span></span><span class="fx-item__end"><span class="fx-badge" data-tone="success" data-marker="dot">Şu qurilma</span></span></li>
<li class="fx-item"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>iPhone 15</span></span><span class="fx-item__desc">Samarqand · 3 kun oldin</span></span><span class="fx-item__end"><button class="fx-btn" data-size="sm" type="button">Çiqariş</button></span></li>
</ul>
</div>
<div class="fx-item-group" data-layout="list">
<div class="fx-item-group__head"><h3 class="fx-item-group__title">Sozlamalar</h3></div>
<ul class="fx-item-group__list">
<li><a class="fx-item" href="#"><span class="fx-item__icon" data-tone="brand"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M208,80H176V56a48,48,0,0,0-96,0V80H48A16,16,0,0,0,32,96V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V96A16,16,0,0,0,208,80ZM96,56a32,32,0,0,1,64,0V80H96ZM208,208H48V96H208V208Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Xavfsizlik</span></span><span class="fx-item__desc">Parol va 2 bosqiçli tasdiq</span></span><span class="fx-item__end"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z"/></svg></span></a></li>
<li><label class="fx-item"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Qoronği rejim</span></span><span class="fx-item__desc">Tizim rejimiga ergaşadi</span></span><span class="fx-item__end"><span class="fx-check" data-type="switch"><input type="checkbox" role="switch" checked><span class="fx-check__box"></span></span></span></label></li>
<li class="fx-item"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M168,224a8,8,0,0,1-8,8H96a8,8,0,1,1,0-16h64A8,8,0,0,1,168,224Zm53.85-32A15.8,15.8,0,0,1,208,200H48a16,16,0,0,1-13.8-24.06C39.75,166.38,48,139.34,48,104a80,80,0,1,1,160,0c0,35.33,8.26,62.38,13.81,71.94A15.89,15.89,0,0,1,221.84,192ZM208,184c-7.73-13.27-16-43.95-16-80a64,64,0,1,0-128,0c0,36.06-8.28,66.74-16,80Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Bildirişnomalar</span></span><span class="fx-item__desc">Qaysi kanal orqali</span></span><span class="fx-item__end"><span class="fx-select-wrap"><select class="fx-select" data-size="sm" aria-label="Kanal"><option>Telegram</option><option>Email</option><option>SMS</option></select></span></span></li>
</ul>
</div>
<div class="fx-item-group" data-layout="grid" data-columns="2">
<div class="fx-item-group__head"><div><h3 class="fx-item-group__title">Ulangan hisoblar</h3><p class="fx-item-group__desc">Kiriş uçun işlatiladi</p></div></div>
<ul class="fx-item-group__list">
<li class="fx-item" data-variant="secondary"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M228.88,26.19a9,9,0,0,0-9.16-1.57L17.06,103.93a14.22,14.22,0,0,0,2.43,27.21L72,141.45V200a15.92,15.92,0,0,0,10,14.83,15.91,15.91,0,0,0,17.51-3.73l25.32-26.26L165,220a15.88,15.88,0,0,0,10.51,4,16.3,16.3,0,0,0,5-.79,15.85,15.85,0,0,0,10.67-11.63L231.77,35A9,9,0,0,0,228.88,26.19Zm-61.14,36L78.15,126.35l-49.6-9.73ZM88,200V152.52l24.79,21.74Zm87.53,8L92.85,135.5l119-85.29Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Telegram</span></span><span class="fx-item__desc">@aziz_karimov</span></span><span class="fx-item__end"><span class="fx-badge" data-tone="success">Ulangan</span></span></li>
<li class="fx-item" data-variant="secondary"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM203.43,64,128,133.15,52.57,64ZM216,192H40V74.19l82.59,75.71a8,8,0,0,0,10.82,0L216,74.19V192Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Google</span></span><span class="fx-item__desc">Ulanmagan</span></span><span class="fx-item__end"><button class="fx-btn" data-size="sm" type="button">Ulaş</button></span></li>
</ul>
</div>
<div style="display:grid;gap:var(--fx-space-2)">
<div class="fx-item"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,16V88H32V64Zm0,128H32V104H224v88Zm-16-24a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h32A8,8,0,0,1,208,168Zm-64,0a8,8,0,0,1-8,8H120a8,8,0,0,1,0-16h16A8,8,0,0,1,144,168Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Uzcard ···· 4417</span><span class="fx-badge">Asosiy</span></span><span class="fx-item__desc">Muddati 09/28</span></span><span class="fx-item__end">1 250 000 söm</span></div>
<div class="fx-item" data-variant="secondary"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Ikkinçi darajali</span></span><span class="fx-item__desc">data-variant="secondary"</span></span></div>
<div class="fx-item" data-variant="tertiary"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Uçinçi darajali</span></span><span class="fx-item__desc">data-variant="tertiary"</span></span></div>
<div class="fx-item" data-variant="outline"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Çiziqli</span></span><span class="fx-item__desc">data-variant="outline"</span></span></div>
<div class="fx-item" data-variant="ghost" data-size="sm"><span class="fx-item__icon"><svg viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M244.8,150.4a8,8,0,0,1-11.2-1.6A51.6,51.6,0,0,0,192,128a8,8,0,0,1-7.37-4.89,8,8,0,0,1,0-6.22A8,8,0,0,1,192,112a24,24,0,1,0-23.24-30,8,8,0,1,1-15.5-4A40,40,0,1,1,219,117.51a67.94,67.94,0,0,1,27.43,21.68A8,8,0,0,1,244.8,150.4ZM190.92,212a8,8,0,1,1-13.84,8,57,57,0,0,0-98.16,0,8,8,0,1,1-13.84-8,72.06,72.06,0,0,1,33.74-29.92,48,48,0,1,1,58.36,0A72.06,72.06,0,0,1,190.92,212ZM128,176a32,32,0,1,0-32-32A32,32,0,0,0,128,176ZM72,120a8,8,0,0,0-8-8A24,24,0,1,1,87.24,82a8,8,0,1,0,15.5-4A40,40,0,1,0,37,117.51,67.94,67.94,0,0,0,9.6,139.19a8,8,0,1,0,12.8,9.61A51.6,51.6,0,0,1,64,128,8,8,0,0,0,72,120Z"/></svg></span><span class="fx-item__body"><span class="fx-item__title"><span>Şaffof, kiçik</span></span></span></div>
</div>
</div>Tokenlar: --fx-bg-brand-subtle --fx-bg-error-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-success-subtle --fx-bg-surface --fx-bg-warning-subtle --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-md --fx-control-h-sm --fx-ease-standard --fx-fg-error --fx-fg-success --fx-fg-warning --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-motion-press --fx-radius-control --fx-radius-surface --fx-shadow-sm --fx-size-icon-md --fx-size-icon-sm --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-brand --fx-text-primary --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.