Kiritiş · molecule
Qidiruv
Qidiruv maydoni: ikon, input type="search" va ixtiyoriy tugmalar maslahati (⌘K). Fokusda maslahat yaşiriladi. Kengaytma: aria-busy (yuklaniş spinneri), .fx-search__scope (qamrov select). Doira tanlagiçi va mobil töliq ekran (4.111): maydon ostida «Hammasi · Mijozlar · Bitimlar» (son bilan); data-mode="fullscreen" — telefonda fokusda qidiruv tepaga yopişib, natijalar paneli butun ekranni egallaydi, «←» va Esc yopadi. Tepa panel uçun tugma varianti (data-variant="trigger", 21.10): maydon emas, tugma — bosilsa buyruqlar oynasi oçiladi; kengda ~288 px, qisqaradi, tor ekranda özi ikon-tugmaga aylanadi.
Masalan:
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-size | smmdlg | md |
data-mode | inlinefullscreen Tor ekranda fokusda butun ekran (xulq: data-fx-search) | inline |
data-variant | field oddiy maydon (form role=search)trigger tepa panel tugmasi: kengda maydon körinişi, tor ekranda ikon-tugma; bosilsa buyruqlar oynasi (data-fx-command-open)hero boş sahifa qidiruvi: katta, soyasiz, içida «Qidiriş →» (.fx-search__go), fokusda brend halqa; ostida misollar .fx-search__hints (data-fx-searchhint) | field |
Anatomiya
- root
.fx-searchşart - input
.fx-search__inputşart - kbd
.fx-search__kbdixtiyoriy - scope
.fx-search__scopeixtiyoriy - back
.fx-search__backixtiyoriy - scopes
.fx-search__scopesixtiyoriy - scopes-item
.fx-search__scopes-itemixtiyoriy - scopes-count
.fx-search__scopes-countixtiyoriy - panel
.fx-search__panelixtiyoriy - panel-title
.fx-search__panel-titleixtiyoriy - label
.fx-search__labelixtiyoriy - go
.fx-search__goixtiyoriy - hints
.fx-search__hintsixtiyoriy
Holatlar
focusopen
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter | Qidiradi |
| Esc | Tozalaydi (brauzer) |
| ← → (doirada) | Qidiruv doirasini almaştiradi (native radio) |
| Esc (toʻliq ekran) | Matn bölsa tozalaydi, böş bölsa panelni yopadi |
role="search" va aria-label; ikon aria-hidden.
Kod
AI uçun: qaçon işlatiladi
Işlating
- Röyxat, jadval yoki butun ilova böyiça qidiriş.
Işlatmang
- Bir neçta maydonli filtr →
input - Qidiruv tugmasini alohida qöymang — Enter yetadi.
- Doira tanlagiçida 5 tadan köp bandni qöymang — köpi filtr paneliga (filterbar) ötsin.
npx foxui add search
<form role="search" class="fx-search"> <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="5.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="m13 13 4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> <input class="fx-search__input" type="search" placeholder="Qidiriş" aria-label="Qidiriş"> <kbd class="fx-search__kbd">⌘K</kbd> </form> <div class="fx-search" role="search" aria-busy="true"><select class="fx-search__scope" aria-label="Qamrov"><option>Hammasi</option><option>Loyihalar</option></select><input class="fx-search__input" type="search" placeholder="Qidiriş" aria-label="Qidiriş"></div> <form role="search" class="fx-search" data-mode="fullscreen" data-fx-search> <button class="fx-search__back" type="button" aria-label="Qidiruvni yopiş"><svg viewBox="0 0 20 20" aria-hidden="true"><path d="M12 5l-5 5 5 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg></button> <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="5.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="m13 13 4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> <input class="fx-search__input" type="search" placeholder="Mijoz, bitim yoki telefon" aria-label="CRM böyiça qidiriş" aria-controls="sr-panel"> </form> <fieldset class="fx-search__scopes" aria-label="Qidiruv doirasi"> <label class="fx-search__scopes-item"><input type="radio" name="doira" value="hammasi" checked>Hammasi <span class="fx-search__scopes-count">1 284</span></label> <label class="fx-search__scopes-item"><input type="radio" name="doira" value="mijozlar">Mijozlar <span class="fx-search__scopes-count">846</span></label> <label class="fx-search__scopes-item"><input type="radio" name="doira" value="bitimlar">Bitimlar <span class="fx-search__scopes-count">392</span></label> <label class="fx-search__scopes-item"><input type="radio" name="doira" value="vazifalar">Vazifalar <span class="fx-search__scopes-count">46</span></label> </fieldset> <div class="fx-search__panel" id="sr-panel" hidden> <p class="fx-search__panel-title">Oxirgi qidiruvlar</p> <a class="fx-option" href="#">Dilnoza Rahimova</a> <a class="fx-option" href="#">+998 93 512 40 18</a> <a class="fx-option" href="#">Çilonzor filiali — yillik şartnoma</a> </div> <button class="fx-search" data-variant="trigger" type="button" data-fx-command-open="cmd" aria-label="Qidiriş (Ctrl K)"> <svg viewBox="0 0 20 20" aria-hidden="true"><circle cx="9" cy="9" r="5.5" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="m13 13 4 4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg> <span class="fx-search__label">Qidiriş</span> <kbd class="fx-search__kbd">Ctrl K</kbd> </button> <form class="fx-search" data-variant="hero" role="search" action="/qidiruv" method="get"><svg viewBox="0 0 256 256" aria-hidden="true"><path fill="currentColor" d="M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/></svg><input class="fx-search__input" type="search" name="q" placeholder="Şaxs, asar yoki joy — masalan, Alişer Navoiy" aria-label="Qidiriş"><kbd class="fx-search__kbd">Ctrl K</kbd><button class="fx-btn fx-search__go" data-variant="primary" type="submit"><span>Qidiriş</span><svg viewBox="0 0 256 256" aria-hidden="true"><path fill="currentColor" d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"/></svg></button></form> <div class="fx-search__hints" data-fx-searchhint><span>Masalan:</span><button class="fx-chip" type="button" data-value="Alisher Navoiy">Alişer Navoiy</button><button class="fx-chip" type="button" data-value="1441">1441</button><button class="fx-chip" type="button" data-value="Samarqand">Samarqand</button></div>
Tokenlar: --fx-bg-brand-solid --fx-bg-field --fx-bg-muted --fx-bg-page --fx-bg-surface --fx-border-color-default --fx-border-color-field --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-duration-pulse --fx-duration-spin --fx-ease-enter --fx-ease-standard --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-knob-field-fill --fx-knob-pill --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-badge --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-size-icon-lg --fx-size-icon-md --fx-size-icon-sm --fx-size-topbar --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary
Şu toifadan
KalendarOy 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» / !CheckoutTö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).ComboboxYozib 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ş».