FoxUI v0.99.3

Uslub va mavzu

Bitta tugma — butun tizim: «Uslub», «Çegara», «Mavzu», «Sarlavha» va «Matn» — ölçamlar özgarmaydi.

Tölangan

Blok darajasida ham işlaydi:

Qattiq

Microsoft Fluent kabi

Örta

gibrid, Untitled / PDP kabi

Momiq

yoysimon, HeroUI kabi

Aylana

tugma va maydon — töliq aylana

Kod

FoxUI şakl va tizim beradi, rang — tanlanadigan kutubxona. Tepadagi «Uslub» bitta tugma bilan butun tizim şaklini almaştiradi (ölçam hamma uslubda bir xil, ixçamlik — «Ziçlik» öqida): Qattiq (Microsoft Fluent kabi — yoy 4, tiniq soya), Örta (Untitled/PDP kabi gibrid — yoy 8–12), Momiq (HeroUI kabi — yoy 12–14, çegarasiz karta, töldirilgan maydon, keng yumşoq soya). «Mavzu» — rang kutubxonasi: brendingizga eng yaqinini tanlang, qolgan mos ranglar (neytral, pastel, fonlar) mavzu bilan birga keladi.

<html data-fx-personality="soft" data-fx-theme="ocean" data-fx-font="inter" data-fx-scheme="dark">

Rang kutubxonasi — 10 mavzu

Brendingizga eng yaqinini tanlang — qolgan mos ranglar u bilan birga keladi.

Kod

Mavzu sahifa darajasida qöyiladi: <html data-fx-theme="…">. Har mavzu yoruğ va qoronği rejimda kontrast qöriqçisidan ötgan (WCAG AA). CLI: npx foxui themes, npx foxui init --theme ….

  • Grafit — graphite
  • Kahrabo — amber
  • Ametist — amethyst
  • Zumrad — emerald
  • Hilos — hilos
  • Okean — ocean
  • PDP — pdp
  • Atirgul — rose
  • Siyoh — siyoh
  • Şafaq — sunset

Rang tokenlari

Mavzu va rejim almaşganda ranglar özi moslaşadi.

Kod

Komponentlar faqat ma'noli tokenlardan oladi. Rejim almaşganda qiymat özgaradi, nom özgarmaydi.

  • --fx-text-primary
  • --fx-text-secondary
  • --fx-text-tertiary
  • --fx-text-disabled
  • --fx-text-on-brand
  • --fx-text-error
  • --fx-text-on-category
  • --fx-text-brand
  • --fx-text-on-error
  • --fx-text-on-rail
  • --fx-text-on-rail-strong
  • --fx-text-on-rail-selected
  • --fx-text-on-rail-current
  • --fx-text-on-static-light
  • --fx-bg-page
  • --fx-bg-surface
  • --fx-bg-subtle
  • --fx-bg-muted
  • --fx-bg-muted-hover
  • --fx-bg-pressed
  • --fx-bg-brand-solid
  • --fx-bg-brand-solid-hover
  • --fx-bg-brand-solid-active
  • --fx-bg-error-subtle
  • --fx-bg-error-subtle-active
  • --fx-bg-success-subtle
  • --fx-bg-warning-subtle
  • --fx-bg-overlay
  • --fx-bg-category-yellow
  • --fx-bg-category-yellow-subtle
  • --fx-bg-category-pink
  • --fx-bg-category-pink-subtle
  • --fx-bg-category-blue
  • --fx-bg-category-blue-subtle
  • --fx-bg-category-coral
  • --fx-bg-category-coral-subtle
  • --fx-bg-category-green
  • --fx-bg-category-green-subtle
  • --fx-bg-category-purple
  • --fx-bg-category-purple-subtle
  • --fx-bg-brand-subtle
  • --fx-bg-brand-subtle-hover
  • --fx-bg-brand-subtle-active
  • --fx-bg-error-solid
  • --fx-bg-error-solid-hover
  • --fx-bg-error-solid-active
  • --fx-bg-info-subtle
  • --fx-bg-rail
  • --fx-bg-rail-selected
  • --fx-bg-static-light
  • --fx-bg-surface-container-lowest
  • --fx-bg-surface-container-low
  • --fx-bg-surface-container
  • --fx-bg-surface-container-high
  • --fx-bg-surface-container-highest
  • --fx-fg-success
  • --fx-fg-warning
  • --fx-fg-error
  • --fx-fg-info
  • --fx-border-color-default
  • --fx-border-color-strong
  • --fx-border-color-focus
  • --fx-border-color-error

Şakl tokenlari

Uslub almaştirilsa, yoylar silliq özgaradi.

Kod

Pill — balandlikning yarmi, komponent içida hisoblanadi.

  • --fx-radius-control
  • --fx-radius-nav
  • --fx-radius-field-multiline
  • --fx-radius-surface
  • --fx-radius-overlay
  • --fx-radius-badge
  • --fx-radius-tag
  • --fx-radius-circle
  • --fx-radius-pill

Komponentlar — 288 ta

Har kartada jonli namuna. Bosing — komponent sahifasi: variantlar, anatomiya, klaviatura va kod.

Harakat 17

Ommaviy panel

Tanlov bölsa pastda markazda suzib çiqadigan panel: son, summa (ixtiyoriy), amallar, ×.

AI checkpoint

AI suhbati yoki agent lentasidagi «şu nuqtaga qaytiş» belgisi (4.204, Vercel AI Elements «Checkpoint»; Cursor va Claude Code'dagi rewind).

Nusxa tugmasi

Bir bosişda matn clipboard'ga yoziladi: nusxa ikoni ✓ ga yumşoq almaşadi (2 soniya), natija e'lon qilinadi.

Prujinali sudraş

Elementni barmoq yoki siçqonça bilan suriş: sudralayotganda körsatkiçga yopişadi va biroz kötariladi, qöyib yuborilganda tezligi bilan biroz davom etadi (inersiya) va prujina bilan joyiga qaytadi (HIG, M3 Expressive, Vaul).

FAB va speed dial

Ekran burçagidagi bitta asosiy amal (4.150, M3 FAB): telefonda «Yangi bitim», «Ariza qöşiş».

Magnit tugma

Kursor yaqinlaşganda tugma unga biroz tortiladi (Aceternity Magnetic Button): tugmaning özi kuç uluşida, içidagi yozuv (.fx-magnet__label) yana biroz köproq siljiydi — qatlamli «tirik» his.

Şakl morfi

Tugma bosilganda va tanlanganda yoyi prujina bilan özgaradi (M3 Expressive shape morph): standart — yumaloq tugma bosilganda yoki tanlanganda kvadratroq böladi; data-fx-morph="round" — aksinça.

Xabar amallari paneli

Javob ostidagi ikonli amallar: nusxa (✓ bilan tasdiqlanadi), qayta yaratiş, yoqdi/yoqmadi, tahrir, variantlar tarmoği ‹ 2/3 ›.

Pin tugmasi (☆)

Sahifa yoki körinişni çap relsga pin qiliş tugmasi (Ustoz 21.10, PDP rels naqşi): ☆ — pin qilinmagan, ★ — pin qilingan (ogohlantiriş rangida).

Tez çiqiş

Xavfli vaziyatdagi foydalanuvçi uçun «Saytdan tez çiqiş» tugmasi (4.165, GOV.UK «Exit this page»): bir bosiş yoki Shift'ni 3 marta bosiş bilan sahifa darhol neytral saytga almaşadi (location.replace — «Orqaga» bu sahifaga qaytarmaydi), ötiş paytida mazmun parda bilan yopiladi.

Reaksiyalar paneli

Emoji + son tugmalari: bosilsa aria-pressed almaşadi va son ±1; bosilgani brend tusi, qalin yozuv va çegara bilan.

Ripple (tölqin)

Bosilgan nuqtadan tarqaluvçi yumşoq tölqin (M3, HeroUI Ripple).

Vositalar paneli

Bir qatordagi amallar guruhi (tahrir paneli, jadval amallari): butun panel — bitta Tab nuqtasi, içida ← → Home End bilan yuriladi.

Kiritiş 40

Kalendar

Oy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi.

Captcha ramkasi

«Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / !

Checkout

Tölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş».

Rang tanlagiç

Erkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa).

Combobox

Yozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot).

Yoziş paneli (composer)

AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş».

Promo-kod

Promo-kod yoki kupon: kod kiritiladi → «Qöllaş» → tekşiruv (tugmada yuklaniş) → qöllangan chip (✓ kod, çegirma summasi, × olib taşlaş) yoki xato matni.

Pul maydoni

Söm miqdori: minglar böş joy bilan ajraladi (1 250 000), faqat raqam, tabular raqamlar; birlik («söm») input-group addon'ida.

Sana maydoni

Sanani yozib kiritiş: KK.OO.YYYY niqobi nuqtalarni özi qöyadi, töliq sana tekşiriladi (mavjudligi, eng erta/eng keç sana, öçirilgan kunlar).

Sana tanlagiç

Sana maydoni + kalendar tugmasi: yozib ham, kalendardan ham tanlanadi.

Sana oraliği

Boşlaniş–tugaş davri: bitta tugma-maydon, popover'da çapda tayyor oraliqlar (Bugun, Keça, Oxirgi 7 kun, Şu oy, Ötgan oy), öngda 2 oylik kalendar (birinçi bosiş — boşi, ikkinçisi — oxiri, orasi hoverda körinadi).

Kunlar tasmasi

Gorizontal 7 kunlik mini kalendar (4.104): bron, qabul, yetkazib beriş va jadval sahifalari tepasida — töliq oy törisiz tez kun tanlaş.

Fayl yuklaş

Fayl tanlaş yoki sudrab taşlaş maydoni: bosilsa oyna oçiladi, ustiga olib kelinganda brend tusi, tanlangan fayllar nomi körinadi.

Emoji tanlagiç

Emoji tanlaş paneli: qidiruv (özbekça va inglizça sözlar), 7 toifa tabi, “Oxirgilar” (brauzerda saqlanadi).

Faset filtr paneli

Röyxat yonidagi guruhlangan filtrlar (4.167, Algolia/Polaris uslubida): har guruh yiğiladi, har variantda natijalar soni, uzun röyxatda «Yana N ta» va guruh içida qidiruv, guruh sarlavhasida tanlanganlar soni, yuqorida «Tozalaş».

Fayl tugmasi

Oddiy «Fayl tanlaş» maydoni: native input type="file", maydon şaklida — tugma va tanlangan fayl nomi brauzerdan.

Filtr qatori

Röyxat sahifasining filtr qatori: qidiruv, 2–3 faset chip, «Filtrlar» varaq tugmasi (faol filtrlar soni bilan), öng çetda köriniş menyusi; ostida faol filtrlar teglari va «Hammasini tozalaş».

Gradient tanlagiç

Gradient yasaş (4.107): banner, kartoçka foni, prezentatsiya sarlavhasi uçun.

Rasm kesiş

Avatar yoki muqova uçun rasmni kesiş: rasm ramka içida suriladi (siçqonça, barmoq, strelkalar) va kattalaştiriladi (slider, ğildirak, ikki barmoq, + −).

Joyida tahrir

Matn oddiy körinadi; bosilsa yoki Enter bosilsa maydonga aylanadi.

JSON maydoni

JSON matni uçun maydon (4.90): webhook tanasi, integratsiya sozlamasi, API sörovi.

Burçak / knob

Dumaloq tutqiç (4.89): qiymat yoki burçakni aylantirib tanlaş.

Xat (asosçiga taklif)

Bitta odamga — asosçi, muallif, rahbarga — töğridan-töğri xat bloki: çapda kimga (sarlavha, bir gap, avatar va ism), öngda bitta yaxlit xat yuzasi — maydon, içidagi pastki qatorda yuboruvçi, belgilar sanoği va «Yuboriş».

Markdown muharrir

Markdown muharrir: «Yoziş / Köriş» tablari, formatlaş paneli (qalin, qiya, sarlavha, havola, kod, iqtibos, röyxatlar, vazifalar, @eslatish), Ctrl+B/I/K, röyxatni Enter bilan davom ettiriş, @ bilan odamni tanlaş (fx-mention), rasm/faylni taşlaş, joylaş yoki biriktiriş.

Maskali kiritiş

Şablon böyiça avtomatik formatlanadigan maydon: telefon +998 (__) ___-__-__, karta ____ ____ ____ ____.

Mention

Matn maydonida «@» yozilsa odamlar röyxati oçiladi: yozgan sari filtrlanadi; ↑ ↓ va Enter/Tab «@nom» ni joylaydi, Esc yopadi.

Köp tanlov

Bir neçta variant tanlanadigan maydon: tanlanganlar maydonda chip, ostida belgili (checkbox şaklli) röyxat.

Son maydoni

Butun yoki önli son: − / + tugmalari (çegarada öçadi) va qölda yoziş.

OTP / PIN kod

Bir martalik kod yoki PIN: har belgi alohida katakda.

Telefon raqam

Telefon maydoni mamlakat tanlagiçi bilan: çapda bayroq va kod (standart — Özbekiston +998), öngda raqam mamlakat niqobi bilan («90 123-45-67»).

AI savolnoma

AI agent vazifani aniqlaştiriş uçun variantli savollarni bittadan söraydi: raqamli variantlar (klaviaturada 1–9), köp tanlovli savol, «Boşqa» bilan erkin javob, «Ötkazib yuboriş», jarayon çiziği va «2 / 3».

Reyting

Yulduzli baho: bosiş yoki klaviatura (← → Home End), ixtiyoriy yarim qadam (data-step="0.5").

Boy matn tahrirlagiçi

Izoh, tavsif, maqola yoziş uçun kiçik tahrirlagiç: vositalar paneli (qalin, qiya, tagiga çiziq, röyxatlar, sarlavha, havola) va contenteditable maydon.

Qidiruv

Qidiruv maydoni: ikon, input type="search" va ixtiyoriy tugmalar maslahati (⌘K).

Imzo maydoni

Qöl imzosi (4.86): siçqonça, barmoq yoki stilus bilan canvas'da çiziladi (stilus bosimi çiziq qalinligiga ta'sir qiladi), «Orqaga» oxirgi çiziqni, «Tozalaş» hammasini öçiradi.

Slider

Diapazondan qiymat tanlaş: native input type="range", öz körinişi; tölgan qism brend rangida (foxui.js).

Teg kiritiş

Maydon içida chiplar: yozib Enter yoki vergul bosilsa teg qöşiladi, böş joyda Backspace oxirgisini olib taşlaydi, joylangan matn vergul va qator böyiça bölinadi.

Vaqt maydoni

Soat va daqiqa (24 soatli, ixtiyoriy soniya) segmentlari.

Tanlaş 13

Kaskad tanlov

Içma-iç tanlov (viloyat → tuman → mahalla): tugma bosilsa ustunlar ketma-ket yonma-yon oçiladi, oxirgi bandni tanlaş butun yölni (“Samarqand / Urgut”) yozadi.

Chip

Filtr çipi (bosiladi, tanlangani teskari rangda, içida son — alohida belgi) yoki teg (× bilan olib taşlanadi).

Til almaştirgiç

Sayt tilini tanlaş: pill tugma — globus, joriy til va strelka; bosilganda tillar menyusi (fx-menu) oçiladi.

Variantlar röyxati

Combobox va buyruqlar oynasining içki röyxati: guruh sarlavhasi, variant (ikonka yoki avatar, nom, izoh, öngda maslahat), faol variant, köp tanlovda ✓ (aria-multiselectable), «Yaratiş» varianti, böş holat.

Bildirişnoma sozlamalari

Bildirişnoma sozlamalari matritsasi (naqş): qatorlar — hodisalar (Savdo, Vazifalar, Xavfsizlik guruhlari), ustunlar — kanallar (Email, Telegram, Ilova).

Rang tanlagiç

Rang namunalaridan tanlaş: native radio (bitta) yoki checkbox (bir neçta), JS'siz.

Mavzu almaştirgiç

Yoruğ / Qoronği / Tizim tanlovi (#154): <html data-fx-scheme> ni örnatadi («Tizim» — atribut olib taşlanadi, qurilma sozlamasi işlaydi) va tanlovni eslab qoladi.

Vaqt slotlari

Bron va uçraşuv uçun böş vaqtlar töri: har vaqt — tugmasimon radio, band vaqt — çizilgan va «band» deb yozilgan, oz qolgani — «1 joy».

Toggle guruhi

Yonma-yon ikonka yoki matn tugmalari: bittasi (single) yoki bir neçtasi (multi) bosiq — aria-pressed.

Ötkazgiç

Ikki röyxat: “Mavjud” va “Tanlangan”.

Daraxtli tanlov

Çuqur ierarxiyadan bitta qiymat tanlaş: combobox maydoni + oçiladigan daraxt.

Yozuv tanlovi

Öquvçi uçun yozuv tanlovi (Qaror 22.10 #4): Yangi (davlat alifbosi: ş ç ö ğ) · Eski lotin · Кирилл.

Körsatiş 68

Biriktirma

Fayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.

Audio pleyer

Ixçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).

Avatar

Kvadrat 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).

Boğlovçi nur

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

Fon: naqş va effektlar

Hero, böş holat va CTA bloklari orqasidagi bezak fon (4.61): nuqtalar, katak yoki qiya çiziqlar — faqat CSS gradient va mask, rasm faylisiz.

Callout

Hujjat içidagi eslatma: alert'dan yengilroq — yengil tus, çap çiziq, sarlavha sözi + şakl.

AI artefakt paneli

Suhbat yonidagi AI yaratgan hujjat, kod yoki sahifa paneli (4.203, Vercel AI Elements «Artifact», Claude Artifacts, ChatGPT Canvas).

Kartalar dastasi

Ustma-ust turgan kartalar (4.80): oldingisi töliq, orqadagilari biroz yuqorida va kiçikroq — «yana bor» hissi.

Karusel

Slaydlar karuseli (APG carousel): scroll-snap — barmoq bilan suriş brauzerning özida; oldingi/keyingi tugmalar, nuqtalar (tab), ixtiyoriy avto-öynatiş (data-autoplay, siçqonça/fokus ustida pauza, «Pauza» tugmasi).

Changelog lentasi

«Nima yangi» sahifasi (4.179) — har mijoz saytiga: versiyalar lentasi.

Kod bloki

Monospace blok: fayl nomi va til sarlavhasi, nusxa tugmasi (fx-copy), qator raqamlari, ajratilgan va farq (+/−) qatorlari.

Ikki ustunli kod farqi

Eski va yangi kod yonma-yon (4.82): qatorlar tekislangan, har yon öz raqami bilan, öçirilgan qator − va qizil fon, qöşilgani + va yaşil fon (belgi matnda — rang yolğiz emas), qatordagi aniq özgariş <mark> bilan.

Oldin/keyin taqqoslaş

Ikki holatni ustma-ust qöyib, ajratgiçni sudrab soliştiriş (4.77): eski va yangi dizayn, «kulrang qolip» va tayyor libos, rasm tahriri.

Son belgisi

Ikon yoki tugma ustidagi kiçik son (öqilmagan xabarlar) yoki nuqta.

Maxsus kursor

Hudud içida kursorga belgi yoki yorliq ergaşadi (Magic UI Pointer va Smooth Cursor, Aceternity Following Pointer): portfolio kartalari ustida «Loyihani köriş →» pufagi yoki jamoaviy doskadagi kabi ismli strelka.

Jonli hamkorlik kursorlari

Umumiy iş maydonida boşqa foydalanuvçilar kursorlari (4.205, Figma, Liveblocks, Magic UI «Pointer»): rangli strelka va ism yorliği, matndagi tanlov (.fx-cursors__selection — yarim şaffof fon, karetka va ism), kursor-çat pufakçasi (.fx-cursors__chat) va tepada kimlar borligi röyxati (.fx-cursors__people).

Mamlakat bayroği

Sodda geometrik bayroqlar (4.145) — telefon kodi (+998), til va valyuta tanlagiçlari, mijoz mamlakati ustuni uçun.

Iş holati

Vazifa holati doirasi: backlog (punktir), qilinadi (çegara), jarayonda (yarmi), tekşiruvda (¾), bajarildi (töla + ✓), bekor (xira + ×).

Fokusli kartalar

Portfolio, loyiha yoki jamoa töri: bitta karta ustiga borilganda (yoki klaviatura bilan fokuslanganda) qolgan kartalar xiralaşadi va biroz kiçrayadi — köz bitta kartaga tuşadi (Aceternity Focus Cards).

Formatlaş (fxFormat)

Qiymatni özbekça körinişga keltiradigan yagona funksiya (4.23): son (1 250 000,5), pul («1 250 000 söm», USD/EUR/RUB), foiz («12 %»), bayt («1,2 MB»), birlik («3 dona»), ixçam son («1,3 mln», «12 ming»), sana («17 oktyabr 2026», «17.10.2026»), vaqt va nisbiy vaqt («5 daqiqa oldin», «keça»).

Rasmlar töri

Rasmlar töri: avto ustunlar yoki qotirilgan (data-cols 2–4), «mosaic» — birinçi rasm katta, oxirgisida «+N».

Sarlavha

Sarlavha uslubi: display, h1–h4 vizual darajalari.

Gologramma karta

A'zolik, sodiqlik va sovğa kartasi, çipta yoki kolleksiya uçun «jonli» karta: kursor ortidan 3D egiladi (mavjud xulq data-fx-tilt), yuzasida kamalak folga (pastel tokenlardan) va kursor ortidagi nur, ingiçka içki çegara va naqş (panjara, çiziq, nuqta).

Ikon

Sprite ikoni uçun öram: ölçam (sm/md/lg/xl/em), ohang va töldirilgan holat.

Rasm

Nisbati belgilangan rasm: yuklangunça xira joy (blur yoki kulrang), yuklanmasa zaxira holat («Rasm yuklanmadi»), ixtiyoriy imzo.

Indikator

Istalgan element (ikon-tugma, avatar) burçagiga nuqta yoki son boğlaydi.

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.

Tugma belgisi (kbd)

Klaviatura tugmasi yoki birikmasi: çiziqsiz kulrang plitka, matn şriftida (mono emas; Ustoz 21.10, PDP namunasi).

Linza

Rasm ustida kursor atrofidagi doira kattalaştirib körsatiladi (Magic UI va Aceternity Lens) — mahsulot tafsiloti, xarita, çizma yoki skrinşotdagi mayda yozuv uçun.

Logolar bulutiga işonç

Ijtimoiy isbot qatori (4.175): qisqa sarlavha («… jamoalar işonadi») va mijoz yoki hamkor logolari.

Xarita markeri

Xarita ustidagi marker (4.206, Base Web «Map Marker», Aceternity «3D Pin»): MapLibre, Leaflet yoki Yandex xaritasiga HTML marker sifatida qöyiladigan tugma.

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

Xabar (AI)

Suhbat xabari: AI agent yoki odam — avatar, ism, vaqt, matn; foydalanuvçi xabari öngda brend tusida.

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.

«Hozir» paneli

Jonli holat plitkalari (2–4 ta): ikon + katta qiymat (soat, quyoş, harorat, kurs, bayram) + izoh + manba.

Şar (orb)

AI yordamçining abstrakt «yuzi» — Siri şaridan ilhom: yuz, qöl, köz yöq, şuning uçun çizgi xatosi bölmaydi.

Orbita

Markaz (mahsulot logosi) atrofida bir yoki ikki halqada aylanuvçi ikonlar (4.78) — «qaysi xizmatlar bilan işlaydi» yoki modullar töplamini körsatiş uçun.

Overflow «+n»

Bitta qatorga siğmagan teglar, avatarlar yoki amallar yaşiriladi, oxirida «+n» tugmasi çiqadi (aria-label «yana 3 ta»).

Zarraçalar

Hero yoki CTA bloki ortidagi canvas qatlam (4.66): sekin suzuvçi nuqtalar, kursor yaqinida itariladi; data-links bilan yaqin nuqtalar ingiçka çiziq bilan boğlanadi («tarmoq», integratsiya mavzusi).

Odam qatori

Avatar + ism + ikkinçi qator (rol, poçta, holat) + ixtiyoriy öng tomonda amal.

Hozir kim bor

Hamkorlik belgilari: sahifada hozir kimlar borligini körsatuvçi ustma-ust avatarlar (hover/fokusda ism va holat), “yozmoqda” indikatori va jonli kursor yorliği.

Narx jadvali

Obuna narxlari bölimi (4.169, #56) — FoxUI obunasining özi uçun ham: sarlavha, oylik/yillik almaştirgiç (radio guruh, JS'siz — narxlar [data-period] böyiça almaşadi, plita prujina bilan sirpanadi), tarif kartalari (nom, izoh, narx, CTA, ✓/— imkoniyatlar), tavsiya tarif (data-featured: brend çegarasi, «Eng ommabop» belgisi, data-fx="beam" bilan çegara nuri), şartlar qatori (1 litsenziya = 1 kişi, 3 qurilma; lifetime yöq) va taqqoslaş jadvali (fx-table).

Ustuvorlik

Işning ustuvorligi: 3 ta ösib boruvçi ustunça — past, örta, yuqori; şoşilinç — xavf rangida; yöq — xira.

Uzun matn (prose)

CMS yoki Markdown'dan kelgan HTML'ga oraliq va uslub beradi: sarlavhalar, abzaslar, röyxatlar, iqtibos, kod, jadval, rasm, çiziq.

QR kod

Boğliqliksiz QR kod (4.143): matn yoki havola SVG içida çiziladi — öz kodlovçisi (bayt rejimi, UTF-8, xato tuzatiş M, 213 baytgaça), eng yaxşi niqob avtomatik.

Iqtibos

Iqtibos va muallifi: çap çiziqli (standart) yoki katta fikr-mulohaza körinişi.

Nisbiy vaqt

<time datetime> matni «5 daqiqa oldin», «keça», «3 soatdan keyin» körinişida özi yangilanib turadi; hoverda va fokusda töliq sana (title).

Manbalar va iqtibos

Matn içida [1] iqtibos pill'i — ustiga kelinsa yoki fokus tuşsa manba kartasi (sayt, sarlavha, parça) çiqadi; javob oxirida yiğiladigan manbalar röyxati.

Raqamlar bölimi

Landing va «Biz haqimizda» sahifasi uçun raqamlar bölimi (4.176): ixtiyoriy sarlavha bloki va 3–4 ta katta raqam — har birida izoh va qisqa tuşuntiriş.

Terminal oynasi

CLI va npm buyruqlarini «jonli» körsatiş oynasi (4.74): sarlavha qatori (uçta nuqta, fayl yoki papka nomi, ixtiyoriy nusxalaş tugmasi) va qatorlar — buyruq (cmd, oldida $), natija (out), muvaffaqiyat (ok, ✓), xato (err, ✕), ma'lumot (info).

Mijozlar fikri

Ijtimoiy isbot bölimi (4.172): sarlavha va iqtibos kartalari — ixtiyoriy yulduzli baho, fikr matni (muhim joyi <mark> bilan ajratiladi), avatar, ism va lavozim.

Matn

Matn uslubi: ölçam (lg/md/sm/caption), ohang, vazn, tabular raqam, balance/pretty, bir qatorga yoki N qatorga qisqartiriş.

Matn effektlari

Hero va bölim sarlavhalari uçun törtta matn effekti (data-effect): «type» — yozuv maşinkasi, harfma-harf yoziladi va kursor miltillaydi (data-words bilan bir neçta ibora navbat bilan yoziladi); «rotate» — sarlavhadagi bitta söz navbat bilan almaşadi (pastdan blur bilan çiqadi, eng uzun söz eni saqlanadi — matn sakramaydi); «split» — sözlar (data-by="çar" — harflar) körinişga kirganda poğonali blur-fade bilan çiqadi; «mark» — söz ostiga marker çizilib boradi (data-variant="underline" — pastki çiziq).

3D egiliş karta

Kursorga qarab karta perspektivada egiladi (Aceternity 3D Card Effect, Comet Card): kursor turgan tomon pastga botadi, içidagi [data-depth] qismlar (1, 2, 3) turli masofaga oldinga çiqadi — qatlamli çuqurlik hissi.

Vosita çaqiruvi kartasi

Agent çaqirgan bitta vosita: nomi (mono), vaqti, holati (şakl + söz) va oçilsa kiriş (JSON) hamda natija.

Qisqartiriş

Matn 1–4 qatordan keyin «…» bilan kesiladi.

Tipografiya rollari

Tipografiya rol şkalasi (4.1–4.5): display · headline · title · body · label, har biri lg/md/sm.

Video pleyer

Brauzer videosi ustida öz boşqaruvi: katta ijro tugmasi, progress (suriş), vaqt, ovoz, taglavha (CC) va töliq ekran.

Suv belgisi

Maxfiy hujjat, hisobot yoki demo ustida takrorlanuvçi xira yozuv (4.144, #49): kim körayotgani va qaçon — skrinşot tarqalsa manbasi bilinadi.

Ma'lumot 38

API kalitlari

API kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi.

Audit jurnali

Xavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan».

Ustunli röyxat

Har satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar.

Tarif va hisob-kitob

Tarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF).

Grafik

Grafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi.

Grafik kartasi

Grafikni örab turuvçi karta: sarlavha + izoh + amallar (davr segmenti, menyu), grafik, pastda legenda va manba.

Izohlar ipi

Izohlar ipi: avatar, muallif, vaqt, matn; amallar — javob, tahrirlaş (özining), hal qiliş.

Kontekst ölçagiçi

AI kontekst oynasi qança işlatilganini körsatuvçi kiçik halqa va «48 %» matni.

Ma'lumot töri

Jadvaldan köra ilovaga yaqin tör (APG grid): katakma-katak klaviatura (←↑→↓, Home/End, Ctrl+Home/End, PageUp/PageDown), katakni joyida tahrirlaş (Enter/F2/harf bosiş; Enter saqlaydi, Esc bekor qiladi), ustun kengligi (tutqiçni sudraş yoki sarlavhada Alt+←/→), qotgan sarlavha va birinçi ustun(lar), qator tanlaş (belgi ustuni, Shift+Böş joy, Ctrl+A) va saralaş.

Ta'rif röyxati

Nom — qiymat juftliklari: tafsilot varaği, profil, buyurtma ma'lumoti.

Gantt

Loyiha va yöl xaritasini vaqt öqida körsatadi: çapda nomlar ustuni, öngda oy va kun (yoki hafta) sarlavhasi — ikkalasi aylantirilganda qotadi; dam oliş kunlari soyasi, «bugun» çiziği, plaşkalar içida bajarilgan uluş, bosqiç (romb), guruh xulosasi, boğliqlik öqlari (data-after) va keçikkan plaşka («Keçikdi» yozuvi bilan).

Globus va nuqtali xarita

Nuqtalardan iborat globus yoki tekis xarita (4.79): şaharlar — marker, boğlanişlar — yoy (globusda katta aylana böylab), ustidan yönaliş bölagi yuguradi.

Haqiqiy globus

Haqiqiy Yer xaritasi globus körinişida: nuqtalar (şahar, bekat, filial) va ular orasidagi katta aylana yoylari — yöl, karvon, yetkaziş marşruti.

Graf kanvasi (oqim)

Tugun va çiziqlardan oqim diagrammasi (Make.com uslubi): har tugun — yumaloq karta, çapda xizmat belgisi pastel doirada, tur, nima va kim; çiziq — egri, strelkali, örtasida holat nuqtasi.

Kartalar töri

Kartalar töri (4.138, GridList): fayl menejeri, galereya, şablon tanlaş.

Faollik xaritasi

GitHub uslubidagi faollik xaritasi: har kun — bitta katak, ustunlar haftalar (Duşanbadan), 5 daraja (0–4) viz-brand soyalarida, tepada oy, çapda hafta kunlari, pastda Kam…Köp şkalasi.

CSV import

CSV import ustasi (naqş, fx-wizard ustiga): 1) fayl — taşlaş yoki tanlaş (vergul yoki nuqtali vergul özi aniqlanadi), 2) ustunlarni maydonlarga moslaş — nomi böyiça avtomatik taxmin, majburiy maydonlar ✓ bilan, 3) tekşiruv — tayyor / xatoli / takror soni va xatolar jadvali (qator, maydon, qiymat, muammo), keyin import va natija (xatolar hisobotini CSV qilib yuklab oliş).

Kiruvçilar

Kiruvçi xabarlar röyxati (inbox): kun böyiça guruhlangan qatorlar — öqilmagan nuqta, ijroçi avatari, matn, vaqt.

Integratsiyalar katalogi

Ilovaning «Integratsiyalar» sahifasi (4.189): sarlavha va «N ta ulangan» hisobi, qidiruv, toifa chip'lari (Hammasi, Ulanganlar, Tölov, Yetkaziş, Xabar, Buxgalteriya) va kartalar töri.

Legenda

Mustaqil legenda: rang belgisi + nom (+ qiymat).

Röyxat

Qatorlar röyxati: çapda avatar yoki belgi, örtada sarlavha va meta (bitta qator, «…» bilan), öngda qiymat yoki amal.

Jamoa a'zolari

Jamoa a'zolari va takliflar sahifasi (naqş): örinlar hisobi (5 / 10), email bilan taklif (rol tanlaş bilan), a'zolar jadvali — rol, holat (Faol / Kutilmoqda), oxirgi faollik, amallar.

Ölçagiç

Ma'lum diapazondagi qiymat: siğim, ball, mezon.

Taşkiliy tuzilma

Taşkiliy tuzilma (4.139): rahbar → bölimlar → xodimlar daraxti, tepadan pastga, boğlovçi çiziqlar bilan.

Javoblarni tekşiring

Yuborişdan oldingi xulosa sahifasi (naqş, GOV.UK «Check answers»): bölimlar böyiça «savol — javob — Özgartiriş» qatorlari; töldirilmagan majburiy javob «!

Konsentrik halqalar

2–3 maqsadning bajarilişi bitta içma-iç halqada (4.116) — Apple Activity halqalari kabi: menejerning kunlik rejasi, öquvçining haftalik maqsadi.

Iş qatori

Vazifa yoki murojaat qatori: boşida ustuvorlik — hover yoki fokusda örnida checkbox çiqadi (bitta katak, ikki rol); bittasi tanlansa — hamma qatorda checkbox.

Kalendar körinişi

Hodisalarni vaqt öqida körsatadi: Oy (kun katagida hodisa chiplari va «+N» — bosilsa hammasi oçiladi), Hafta va Kun (soatlar töri, kun böyi qatori, bugungi ustunda «hozir» çiziği vaqt yozuvi bilan, bir-biriga tuşgan hodisalar yonma-yon).

Tartiblanadigan röyxat

Qatorlarni qayta tartiblaş: uşlagiç tugmasi — siçqonça bilan sudraş yoki klaviatura (Space oladi, ↑ ↓ siljitadi, Space qöyadi, Esc bekor qiladi).

Davr çiziqlari

Bir neçta davr yoki umrni bitta vaqt öqida taqqoslaş: tepada yil belgilari, har qator — nom va boşlaniş–tugaş çiziği; asosiy qahramon (data-current) — töliq brend rangi; davomi noma'lum (data-open) — oçiq uç; fonda davr soyasi (.fx-span__era).

Xulosa tasmasi

Röyxat sarlavhasi ostidagi bir qatorli xulosa: joriy filtr böyiça 3–4 raqam (jami, muddati ötgan, tanlangan) va ixtiyoriy «eskiriş» çiziği (köp bölakli progress + legenda).

Jadval

Ma'lumot jadvali: qotgan sarlavha, raqam ustuni öngda, jami — tfoot.

Faoliyat lentasi

Vaqt böyiça hodisalar: vertikal çiziq, belgi (nuqta, ikon yoki avatar), kim/nima, vaqt, ilova (izoh, farq).

Tracker (uptime)

Kunlar böyiça holat çiziqçalari (4.129): har kun — bitta tor ustun; işladi, qisman uziliş, töxtadi va ma'lumot yöq — rang bilan birga şakl (yaxlit, kesik, qisqa-çiziqli, xira) bilan farqlanadi.

Daraxt jadvali

Içma-iç qatorli jadval (APG treegrid): loyiha → bosqiç → vazifa, smeta, fayllar tuzilmasi.

Virtual röyxat

Minglab bandli röyxat (4.137): 10 000 mijoz, mahsulot katalogi, mahallalar — DOMda faqat körinadigan qatorlar va kiçik zaxira çiziladi, aylantiriş silliq qoladi (hozirgaça faqat datagrid'da bor edi).

Navigatsiya 28

Sarlavha havolasi

Hujjat sarlavhasi yonida «#» havolasi: ustiga kelganda yoki fokusda çiqadi, bosilsa şu bölimga manzil.

Yuqoriga qaytiş

Uzun sahifa yoki panelda bir ekrandan köp aylantirilgaç pastki burçakda çiqadigan tugma (4.151).

Yöl satri

Breadcrumbs: ota bölimlar xira havola, joriy sahifa asosiy rangda (aria-current), ajratgiç «/».

Suhbatlar röyxati

Messenjer çap paneli: avatar (onlayn nuqta), nom, vaqt, oxirgi xabar va belgilar.

Dock

Ilovalar yoki bölimlar uçun ikonlar qatori (4.76): kursor ostidagi ikon kattalaşadi, qöşnilari ozroq (macOS Dock kabi), klaviatura fokusida ham.

Hududlar navigatsiyasi (F6)

Sahifa hududlari orasida klaviatura bilan sakraş (4.24): F6 — keyingi hudud (sarlavha → navigatsiya → asosiy mazmun → yon panel → pastki qism), Shift+F6 — oldingisi, oxiridan boşiga aylanadi.

Havola

Boşqa sahifa yoki manzilga ötadigan matn.

Menubar

Ilova menyu qatori (4.148, APG menubar): «Fayl · Tahrir · Köriniş · Yordam» — hisobot konstruktori, hujjat tahrirlovçi, jadval muharriri kabi köp buyruqli ilovalar uçun.

Yon menyu

Yon menyu (S1): band 40, ikonka + nom (bitta qator «…»), son — xira pill, tanlangan — brend tusi; guruh sarlavhasi, içki bandlar uzuq yöl çiziğida, pastki bandlar tagda.

Oldingi / keyingi

Hujjat va maqola oxiridagi ikki katta havola (#88): oldingi (çapda) va keyingi (öngda) sahifa nomi bilan.

Sahifalaş

Jadval ostida: «1–20 / 248» va oldingi/keyingi; kerak bölsa sahifa raqamlari (joriysi brend tusi), oraliq «…».

Bosqiç yöli

CRM bitimi yoki ariza bosqiçlari chevronlar qatorida (4.140, SLDS «Path»): ötilgan — ✓ belgisi, joriy — töldirilgan va qalin, keyingilari — xira, yöqotilgan — ✕.

Rels

Ilovaning eng yuqori bölimlari: çap çetdagi qoronği ustun (80), yuqorida belgi, papkalar — ikonka pill'da va yorliq (≤ 2 qator), tanlangani mavzu rangidagi pill va töldirilgan ikonka; pastda dumaloq tugmalar ustma-ust.

Qidiruv natijalari sahifasi

Sayt yoki ilova böyiça qidiruv natijalari sahifasi (4.196): katta qidiruv maydoni (sörov saqlangan), xulosa («narx» böyiça 48 ta natija), imlo taklifi («Balki … demoqçimisiz?»), qamrov yorliqlari (soni bilan, aria-current) va saralaş; çapda fx-facets, öngda natijalar.

Segment

Bir xil ma'lumotning 2–4 körinişi orasida tanlaş (Oylik / Yillik, Röyxat / Jadval).

Telefon menyusi

Burger tugma oçadigan çapdan çiquvçi menyu varaği (#86): sarlavha + yopiş, havolalar, oçiladigan guruhlar (details), pastda amallar.

Sayt pastki qismi

Footer (#97): tavsif + ijtimoiy havolalar, havola ustunlari, pastki qator (huquqiy matn) va til hamda mavzu almaştirgiç örinlari.

Sayt sarlavhasi

Marketing/hujjat sayti tepa paneli (#85): belgi, asosiy menyu, mega menyu paneli (ustunlar + tavsiya bloki), amallar; telefonda burger tugma (site-drawer'ni oçadi).

Qadamlar

Köp bosqiçli jarayon: bajarilganlar belgi bilan, joriysi halqa va qalin (aria-current="step"), keyingilar xira; orasida çiziq.

Almaştirgiç

Workspace, brend yoki korxona almaştirgiçi: yon panel tepasida brend örnida turadi — belgi, nom, ikkinçi qator va chevron; bosilsa menyu oçiladi, tanlangani ✓ bilan belgilanadi va tugmaga köçadi.

Tablar

Bir sahifa içidagi bölimlar, har tabning öz paneli.

Mundarija

Uzun sahifaning yon mundarijasi (#87): sarlavhalarga havolalar, hozir körinayotgan bölim aria-current="location" bilan belgilanadi (IntersectionObserver).

Daraxt

Içma-iç röyxat (papkalar, bilim bazasi, bölimlar): papka — <details>, chevron yopiqda −90°; çapda yöl çiziği; joriy band brend tusida.

Saqlangan körinişlar

Röyxat sahifasi tepasida tayyor filtrlar qatori: «Hammasi 248 · Muddati ötgan 12 · Mening 31» — bosilsa jadval şu körinişga ötadi.

Sahifa ötişlari (View Transitions)

View Transitions presetlari (4.28): <html data-fx-vt="fade|axis|slide"> — sahifalararo (MPA) ötiş: fade — öçib-yoniş (M3 fade-through), axis — gorizontal öq böyiça qisqa siljiş (shared axis), slide — mobil stek kabi suriliş; tarix böyiça orqaga ötişda yönaliş teskari, RTL'da közgulanadi.

Köp bosqiçli forma

Murakkab formani qadamlarga böladi: Qadamlar, joriy panel, Orqaga/Keyingi/Yuboriş.

Qatlamlar 20

AI yordamçi (widget)

Saytlar uçun AI yordamçi: öng pastda dumaloq tugma (çat ikonkasi yoki ixtiyoriy personaj) → suhbat oynasi.

Kontekst menyu

Maydon yoki qator ustida öng tugma, sensorda uzoq bosiş yoki klaviaturada Shift+F10 / ☰ bilan menyu kursor örnida oçiladi.

Kontekst menyu

Öng tugma, uzoq bosiş (telefon) yoki Shift+F10 / Menu tugmasi bilan kursor joyida oçiladigan menyu (4.147).

Dialog

Tasdiq va qisqa formalar uçun modal oyna.

Suzuvçi oyna

Sahifa ustida qoladigan, modal bölmagan panel (4.152): video qönğiroq, AI yordamçi, kalkulyator, tezkor eslatma — foydalanuvçi orqadagi sahifa bilan işlaşda davom etadi.

Hover karta

Ism, havola yoki avatar ustida keçikiş bilan çiqadigan kartoçka (4.149): mijoz profili, bitim qisqaçasi, havola oldindan körinişi.

Lightbox

Rasm körgiç: töliq ekran native <dialog> — katta rasm, yaqinlaştiriş (bosiş yoki ⊕; siçqonça siljitilsa rasm suriladi), oldingi/keyingi, sanagiç, imzo.

Havola oldindan köriş

Havola ustiga kursor olib borilganda (yoki fokusda) sahifaning kiçik rasmi, sarlavhasi, qisqa tavsifi va domeni çiqadi (4.81) — foydalanuvçi bosmasdan qayerga ketişini köradi.

Menyu

Tugma ostida oçiladigan amallar röyxati: bandlar, guruh sarlavhasi, ajratgiç, tugmalar maslahati, xavfli band, belgilanadigan bandlar.

Pastga qadalgan yoziş oynalari

Ekranning pastki öng burçagiga qadalgan kiçik oynalar (4.201, Gmail va Salesforce «Docked composer»): iş sahifasidan çiqmasdan bir neçta çat suhbati yoki yangi xat yonma-yon oçiq turadi.

Içkaridan köriş paneli

Röyxat qatori bosilsa tafsilot paneli röyxat ustidan öng çetdan çiqadi — röyxat joyida qoladi, kontekst yöqolmaydi.

Popover

Tugma yonida oçiladigan qatlam: qisqa ma'lumot, kiçik forma, amallar röyxati.

Sessiya tugaşi ogohlantirişi

Xavfsizlik uçun sessiya muddati tugaşidan oldingi ogohlantiriş (4.197, GOV.UK/HMRC «Timeout warning»): modal alertdialog (fx-dialog ustida) data-warn soniya (standart 120) qolganda özi oçiladi — soat belgisi, katta teskari sanoq, qolgan vaqt çiziği va ikki tugma: «Davom etiş» (asosiy, autofocus, Esc ham şu) va «Çiqiş».

Ulaşiş

Ulaşiş mazmuni (odatda .fx-dialog içida): havola + «Nusxalaş» (holat aria-live bilan), ruxsat berilgan odamlar va rol tanlovi («Olib taşlaş» qatorni öçiradi), umumiy kiriş darajasi (izohi tanlovga qarab özgaradi).

Yon varaq

Ekran çetidan çiqadigan panel: qator tafsiloti, filtrlar, telefonda menyu.

Klaviatura yorliqlari oynasi

«?» bosilganda oçiladigan yorliqlar röyxati: guruhlangan (umumiy, ötiş, röyxat), har qatorda amal va tugmalar (fx-kbd), «G keyin I» ketma-ketligi, qidiruv.

Tooltip

Ikon-tugma yoki qisqartma uçun qisqa nom: öram ustiga borilganda yoki fokusda çiqadi (JS'siz).

Tanişuv turi

Yangi foydalanuvçiga interfeysni qadam-baqadam körsatiş: sahifa xiralaşadi, nişon element yoruğ “teşik”da qoladi, yonida qadam kartasi (oldingi, keyingi, ötkazib yuboriş, nuqtalar).

Video dialog

Muqova rasm va öynatiş tugmasi (4.83): bosilganda video modal oynada (native dialog) oçiladi va özi boşlanadi, yopilganda töxtaydi.

Holat va javob 28

Ogohlantiriş

Bölim yoki sahifadagi muhim xabar: töla tusli yuza, holat belgisi (şakl), sarlavha, matn, bitta havola, ixtiyoriy yopiş.

Tasdiqlaş sörovi (ruxsat / rad)

Agent xavfli yoki qaytarib bölmaydigan amaldan oldin ruxsat söraydi: savol, nima özgarişi (tafsilot) va Ruxsat beriş / Rad etiş / Har doim ruxsat.

Banner

Butun kenglikdagi sayt e'loni (texnik işlar, obuna tugadi): holat belgisi (şakl), qisqa matn, bitta havola, yopiş.

Portlaş va konfetti

Yoqtiriş va muvaffaqiyat uçun qisqa, bir martalik quvonç effektlari (Magic UI Confetti, Twitter «yoqdi»).

Boşlaş röyxati

Yangi foydalanuvçi uçun onboarding kartasi: jarayon çiziği va «2 / 5», qadamlar röyxati.

Cookie roziligi

Cookie va kuzatuv roziligi naqşi (4.180, GOV.UK Cookie banner; GDPR 2-bosqiç uçun): pastki karta — nima uçun cookie kerakligi bir-ikki gapda, «Qabul qiliş», «Rad etiş» (bir xil vaznli — rad etiş yaşirilmaydi) va «Sozlaş».

Teskari sanoq

Qolgan vaqtni körsatadi: aksiya tugaşi (kun · soat · daqiqa · soniya), imtihon yoki test vaqti, SMS kodni qayta yuborişgaça («00:59»).

Böş holat

Röyxat yoki jadvalda hali heç narsa yöq, qidiruv topmadi yoki yuklaşda xato: belgi, sarlavha, bitta qator izoh va keyingi qadam.

Xatolar xulosasi

Forma tepasida: «Quyidagilarni tuzating» sarlavhasi va har xatoga havola.

Xato sahifalari töplami

Töliq xato sahifasi şabloni (4.183): tepada sayt belgisi va kiriş, markazda naqşli fon ustida ulkan kod (404, 500, 503 — tepadan pastga sönuvçi, holat rangida), ostida fx-result (sarlavha, izoh, tugmalar — 500/503/offline holatlari result'da), qidiruv maydoni va foydali havolalar kartalari, pastda ingiçka footer (xato kodi, «xato haqida xabar beriş»).

«Foydali böldimi?» vidjeti

Sahifa yoki javob sifatini biliş uçun kiçik fikr vidjeti (4.199): savol va «Ha / Yöq» tugmalari (aria-pressed, ikon + söz).

Interruption sahifasi

Davom etişdan oldin biliş ŞART bölgan bitta muhim xabar sahifasi (4.198, GOV.UK «Interruption pages»): butun ekran (yoki katta blok) rangli panel — sarlavha, qisqa matn yoki 2–4 bandli röyxat, ixtiyoriy «Tuşundim» belgisi (required — forma özi tekşiradi, JS kerak emas) va bitta asosiy harakat: «Davom etiş» + ikkinçi darajali havola («Ortga», «Keyinroq»).

Yuklaniş qoplamasi

Blok ustida xira qatlam + aylana: kontent joyida qoladi, ota aria-busy="true" bölsa körinadi.

Bildirişnomalar markazi

Qönğiroq tugmasi (öqilmaganlar soni bilan) bosilsa panel oçiladi: «Hammasi / Eslatmalar» tablari, «hammasini öqilgan deb belgilaş», kun böyiça guruhlangan kiruvçilar (fx-inbox).

Ulaniş / oflayn banneri

Internet uzilganini va qaytganini xotirjam bildiruvçi pastki tabletka (4.163, #74): «Internet yöq — özgarişlar qurilmada saqlanib turibdi» (+ «Qayta uriniş») va qaytganda qisqa «Internet qayta ulandi» (3 soniyadan keyin yaşirinadi).

Bosqiç banneri (Alfa / Beta)

Sayt yoki xizmat tepasidagi ingiçka qator (4.164, GOV.UK Phase banner): «BETA — Bu sayt oçiq quriladi, fikringizni yozing».

Progress

Çiziqli ölçagiç, balandligi 8.

Natija sahifasi

Jarayon yoki sahifa natijasi: muvaffaqiyat, xato, ogohlantiriş, 404, 403, server xatosi (500), texnik işlar (503) va internet yöq (offline).

Saqlaş paneli

Saqlanmagan özgarişlar qöriqçisi: forma özgarsa pastda «Saqlanmagan özgarişlar · 2 ta — Bekor qiliş / Saqlaş» paneli çiqadi, özgargan maydon yorliği oldida nuqta paydo böladi, qiymat qaytsa belgi yöqoladi.

Skelet (karkas)

Yuklanayotgan ma'lumot örnida kulrang şakllar (karkas): qator (standart), sarlavha, doira, blok, kvadrat, rasm, tugma; kompozitlar — .fx-skeleton-group (paragraf), .fx-skeleton-row (avatar+qatorlar; data-type=table, data-cols), .fx-skeleton-card.

Spinner

Neytral yuklaniş aylanasi, matn rangida (ota element rangini oladi).

Splash ekran

PWA yoki ilova birinçi oçilayotganda körinadigan ekran (4.200, HIG «Launch screen»): markazda belgi va ilova nomi (kirişda yumşoq paydo böladi, keyin sekin «nafas oladi»), ostida yuklaniş çiziği va holat matni («Ma'lumotlar sinxronlanmoqda…»), pastda versiya.

Holat

Holat belgisi: şakl + söz.

Öylayapti (shimmer) va oqim kursori

Javob hali boşlanmaganda «Öylayapti…» yozuvi (mavjud .fx-shimmer-text yaltiraşi) uçqun ikon bilan; oqim matni oxirida miltillovçi kursor ▍.

Toast

Qisqa xabar: teskari yuza, faqat sönadi.

Agent izi

AI agent bajargan qadamlar: holat belgisi (bajarildi — doira, işlayapti — pulsatsiyali halqa, kutyapti — halqa, xato — romb), nom, vaqt, oçiladigan tafsilot.

Upsell va qulflangan funksiya

Pullik funksiyani körsatiş va tarifni yangilaşga çaqiriş (naqş): «Pro» belgisi (qulf + söz), banner, foyda röyxatli karta (popover içida ham) va qulflangan köriniş — ostida xiralaşgan namuna, ustida qulf va taklif.

Karkas 36

Akkordeon

Yiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi.

Maqola sahifasi

Blog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi).

Kiriş sahifasi

Kiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split).

Bento tör

Landing xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense).

Bleed (manfiy çet)

Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi.

Blog röyxati

Blog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination).

Karta

Yuza: içki çet 20, içidagi oraliq 16.

Karyera sahifasi

Marketing saytining «Karyera / Vakansiyalar» sahifasi (4.177): sarlavha, afzalliklar töri (nega biz bilan işlaş), bölim filtri (fx-chip, aria-pressed — saralaşni ilova qiladi) va bölimlar böyiça guruhlangan vakansiyalar röyxati.

Aloqa bölimi

Marketing saytining «Aloqa» sahifasi (4.177): çapda sarlavha, aloqa kanallari (telefon, email, Telegram, manzil — ikon, nom, izoh va bosiladigan qiymat: tel:, mailto:, https://t.me) va iş vaqti jadvali; öngda ariza formasi.

Suhbat oqimi

Xabarlar lentasi (role="log"): pastda bölsangiz yangi xabar va oqim matni avtomatik pastga tuşadi; yuqoriga çiqsangiz joyingiz saqlanadi va «↓ Yangi xabar» tugmasi (yangi xabarlar soni bilan) çiqadi.

CTA va obuna bölimi

Sahifa oxiridagi çaqiriq bölimi (4.174): katta sarlavha, bir gaplik izoh va 1–2 tugma — standart holatda brend rangli panel (içida naqş va yoruğ doğ, tugmalar teskari rangda); data-tone="subtle" — yengil fon.

Dashboard qolipi

Körsatkiçlar sahifasi qolipi (4.185): tepada sarlavha, yangilangan vaqt va davr tanlaş; KPI qatori (≤ 4, bitta hero raqam); 12 ustunli grafik kartalar töri (data-span: 4, 6, 8 yoki 12 — konteyner kengligiga qarab 2 yoki 1 ustunga tuşadi); pastda sönggi faollik.

Ajratgiç

Kontentni ikkiga ajratuvçi nozik çiziq.

Email şablonlari

Tranzaksion xatlar uçun naqş (4.181): tasdiq kodi, parol tiklaş, hisob-faktura va xabarnoma.

FAQ bölimi

Köp beriladigan savollar bölimi (4.173): sarlavha bloki, accordion asosidagi savol-javoblar (bir vaqtda bittasi oçiq — details name) va oxirida «Javob topmadingizmi?» bloki.

Xususiyatlar bölimi

Landingdagi xususiyatlar bölimi (4.171): markazlaşgan sarlavha bloki (eyebrow, sarlavha, izoh) va ikonli tör — har bandda rangli ikon (toifa ranglari), nom va qisqa izoh; data-layout="cards" — har band karta içida.

Hero bölimi

Landingning birinçi ekrani (4.170): yangilik tabletkasi (eyebrow), katta sarlavha (urğu söz mavzu gradientida yoki aylanuvçi söz — textfx), bir-ikki gaplik izoh, ikki tugma, işonç qatori (✓ belgili qisqa da'volar) va katta media (skrinşot, terminal, jonli UI).

Joylaşuv primitivlari

Oraliq tokeni bilan joylaş: fx-stack (vertikal), fx-cluster (qatorga öraladigan guruh), fx-grid (auto-fit yoki aniq ustun), fx-container (markazlangan eni), fx-ratio (tomonlar nisbati).

Huquqiy sahifa

Maxfiylik siyosati, foydalaniş şartlari, ommaviy oferta va cookie siyosati uçun sahifa şabloni (4.177): sarlavha va meta (kuçga kirgan sana, oxirgi yangilaniş, versiya), çapda yopişqoq mundarija (fx-toc — öqilayotgan bölimni belgilaydi), öngda avtomatik raqamlangan bölimlar (1., 1.1.

Röyxat sahifasi

Röyxat sahifasi qolipi (PDP «Masdar»): sarlavha + son + asosiy amal → xulosa tasmasi → saqlangan körinişlar → filtr qatori → jadval → sahifalaş; ommaviy panel jadval ostida suzadi.

Masonry

Balandligi har xil kartalar (skrinşot, fikr, maqola) ustunlarga ziç joylanadi (4.73).

Onboarding oqimi

Yangi foydalanuvçini kutib oliş oqimi (4.182): Xuş kelibsiz (vazifa tanlaş kartalari) → Profil → Jamoa taklifi → Tayyor.

Sahifa sarlavhasi

Sahifa boşi: nom + soni, bitta qator izoh, öngda neytral amallar va bitta asosiy tugma.

Parallaks qatlamlar

Sahifa aylantirilganda qatlamlar turli tezlikda siljiydi (Aceternity Parallax Scroll va Hero Parallax): har [data-fx-parallax] element öz tezligida — slow, standart, fast yoki reverse (teskari).

Bosma qatlami

Çop etiş (Ctrl+P) uçun global qatlam (4.14): navigatsiya, tugmalar, toast va suzuvçi oynalar yaşirinadi, ilova karkasi bitta ustunga yoyiladi, soyalar öçadi, jadval sarlavhasi har betda takrorlanadi, qator va kartalar betda bölinmaydi.

Yozuv sahifasi

Bitta yozuv sahifasi qolipi (4.184, SLDS «Record home»): tepada belgi, tur va nom, amallar; asosiy maydonlar tasmasi (4–6 ta); bosqiç yöli; pastda ikki ustun — çapda tablar (tafsilot, boğliq röyxatlar, fayllar), öngda faoliyat va izohlar (yopişqoq).

Aylanuvçi maydon

Çegaralangan aylanuvçi maydon: kontent davom etayotgan çetda yumşoq söniş (data-fade-start/end xulq tomonidan qöyiladi) — «yana bor» işorasi.

Yopişqoq scroll hikoyasi

Mahsulot qanday işlaşini bosqiçma-bosqiç körsatadi (Aceternity Sticky Scroll Reveal): çapda matn qadamlari oddiy oqimda, öngda media yopişib turadi va köriniş markazidagi qadamga mos panel blur-fade bilan almaşadi.

Bölim sarlavhasi

Sahifa içidagi bölim: sarlavha, izoh, öngda amallar, ixtiyoriy pastki çiziq.

Sozlamalar sahifasi

Sozlamalar uçun tayyor qolip: çapda bölimlar menyusi (mobilda gorizontal), öngda bölimlar — sarlavha, izoh va karta içida «yorliq çapda, boşqaruv öngda» qatorlari; xavfli hudud varianti va yopişqoq saqlaş paneli.

Ilova karkasi

Ilova sahifasi qobiği: çapda yon menyu (256, yiğilganda 60), tepada panel (60) — yiğiş tugmasi, yöl satri, global amallar; iş maydoni.

Jamoa bölimi

Marketing saytining «Jamoa» sahifasi yoki bölimi (4.177): sarlavha bloki, a'zolar töri — rasm (yoki pastel fonda boş harflar), ism, lavozim, qisqa bio va ijtimoiy havolalar — hamda oxirida «Bizga qöşiling» kartasi (karyera sahifasiga).

Vidjet

Dashboard idişi: taşqi qobiq ikkinçi darajali fonda — sarlavha, izoh, amallar (davr, menyu) va legenda (data-role — grafik seriya rollari: brand, ink, accent; sarlavhada legenda bölsa grafikning öz legendasi yaşiriladi); içida kötarilgan yuza — grafik, jadval, KPI qatori (.fx-widget__kpis) yoki röyxat; pastda izoh va havola.

Qoidalar

14 ta qoida — build, CLI va AI bir xil tekşiradi.

Kod

Bu qoidalarni build, npx foxui check va MCP validate_snippet bir xil tekşiradi.

  • FX-TOKEN-01 — Faqat tokenlar. Komponent va loyiha CSS'ida HEX, rgb(), hsl() yozilmaydi — faqat var(--fx-*) tokenlari, transparent va currentColor.
  • FX-SHAPE-01 — Yoy faqat şakl tokenlaridan. border-radius qölda px bilan yozilmaydi — var(--fx-radius-*) yoki pill formulasi orqali.
  • FX-SHAPE-02 — Pill = balandlikning yarmi. Pill şakl 999px yoki 50% bilan emas, komponent qoidasida balandlik / 2 bilan hisoblanadi (--fx-knob-pill orqali).
  • FX-SHADOW-01 — Soya faqat tokendan. box-shadow qölda yozilmaydi — var(--fx-shadow-*).
  • FX-BP-01 — Ekran çegarasi faqat oyna sinflaridan. @media eni faqat uç rejim çegaralari bilan yoziladi: telefon < 600px ≤ planşet < 840px ≤ kompyuter (keng ekran — 1200px, 1600px). max-width uçun 599.98px / 839.98px. em, rem va boşqa sonlar — yöq. Komponent öz joyiga moslaşsa — @container.
  • FX-SPACE-01 — Oraliq şkalasi. padding, margin, gap — faqat var(--fx-space-*) (4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48) yoki 0.
  • FX-A11Y-01 — Ziçlik çegarasi. Ziçlik boşqaruv balandligini 24px dan (sensorli ekranda 44px dan) pastga tuşirmaydi; şrift ölçamini özgartirmaydi.
  • FX-MOTION-01 — Harakat tokendan, reduced-motion hurmat. Animatsiya davomiyligi va egri çiziği var(--fx-motion-*) (xarakterga boğliq) / var(--fx-ease-*) dan; prefers-reduced-motion doim hurmat qilinadi.
  • FX-UZ-01 — Ö va Ğ — yangi alifboda. Mahsulot matni yangi alifboda: ö va ğ. Eski yozuvdagi o va g dan keyin tutuq qöyilgan şakl (', ‘, ’) — qöriqçi xatosi. Qöşimça ajratgiçi (Landing'da, Bio'ni) bundan mustasno.
  • FX-THEME-01 — Rang — mavzudan, şakl — uslubdan. Loyiha öz brend ranglarini HEX bilan yozmaydi va komponent yoylarini qayta belgilamaydi: rang <html data-fx-theme> (rang kutubxonasi), şakl <html data-fx-personality> (hard | medium | soft) bilan tanlanadi.
  • FX-A11Y-02 — Kontrast — har mavzuda. Har rang mavzusi yoruğ va qoronği rejimda tokens/contrast-pairs.json dagi juftlar böyiça WCAG AA dan ötadi (matn 4,5, UI 3).
  • FX-SELECT-01 — Dropdown — faqat tizim uslubida. Har <select> fx-select klassi bilan (yoki fx-select-wrap içida) yoziladi: oçilganda tizim uslubidagi röyxat — sirt, yoy, soya, tanlangani brend tusida ✓ bilan. Brauzerning standart (kök fonli) röyxati heç qayerda qolmaydi.
  • FX-PROSE-01 — Matn içidagi komponent içida yana matn konteyneri yöq. fx-prose içidagi FoxUI komponenti (fx-card va h.k.) içiga yana fx-prose qöyilmaydi: taşqi matn uslubining çegarasi içki fx-prose'ni ham uşlaydi — içki matn oddiy körinadi. Ogohlantiriş, build'ni töxtatmaydi.
  • FX-SYNC-01 — FoxUI nusxasi qölda özgartirilmaydi. npx foxui sync olgan fayllar (foxui.lock'da xeşi bor) loyihada tahrirlanmaydi: özgariş FoxUI'ning özida qilinadi va keyingi reliz bilan hamma loyihaga birdan keladi.
Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)