Navigatsiya · pattern

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. Har natija: joylaşuv yöli, sarlavha havolasi (körilgan havola biroz sönadi), parça — mos sözlar <mark> bilan (fon + qalin). Eng mos natija data-type="best" bilan kartada. Natija yöq bölsa — .fx-searchresults__none: tekşiriş maslahatlari va maşhur sahifalar havolalari. Pastda fx-pagination. Qidiruv mexanizmi ilovada; naqş tuzilma va holatlarni beradi.

beta0.29.0 dan.fx-searchresultsFaqat CSS

«narx jadvali» böyiça 48 ta natija

Balki narxlar jadvali demoqçimisiz?

Saralaş:

1. foxui.dev
2. Atom
3. Naqşlar
Narx jadvali — fx-pricing
Oylik/yillik almaştirgiç, «eng ommabop» belgisi va xususiyatlarni taqqoslaş jadvali. Narx sömda, yillikda tejov foizi bilan.
Naqş0.28 dan beri
1. foxui.dev
2. Blog
0.28: 100 ta yangi naqş va «Işxona»
…xato sahifalari, narx jadvali, FAQ va CTA bölimlari — marketing saytini bir kunda yiğiş uçun…
Blog14-oktabr 2026
1. foxui.dev
2. Hujjat
3. Tokenlar
Raqamlar va valyuta: söm formatlaş
Narxni «1 200 000 söm» körinişida çiqariş, jadval ustunlarida raqamlarni öngga tekislaş va tabular-nums.
Qöllanma2-oktabr 2026

Variantlar

Atribut	Qiymatlar	Standart
`data-type`	`best` eng mos natija kartada	`default`

Anatomiya

root.fx-searchresultsşart
top.fx-searchresults__topixtiyoriy
form (role=search).fx-searchresults__formşart
summary (role=status).fx-searchresults__summaryşart
suggest («Balki…»).fx-searchresults__suggestixtiyoriy
bar.fx-searchresults__barixtiyoriy
scopes.fx-searchresults__scopesixtiyoriy
scope.fx-searchresults__scopeixtiyoriy
sort.fx-searchresults__sortixtiyoriy
main.fx-searchresults__mainşart
list (ol).fx-searchresults__listşart
item.fx-searchresults__itemşart
path.fx-searchresults__pathixtiyoriy
title (h3).fx-searchresults__titleixtiyoriy
link.fx-searchresults__linkixtiyoriy
snippet (mark bilan).fx-searchresults__snippetixtiyoriy
meta.fx-searchresults__metaixtiyoriy
none (natija yöq).fx-searchresults__noneixtiyoriy
none-title.fx-searchresults__none-titleixtiyoriy
popular.fx-searchresults__popularixtiyoriy

Holatlar

current scopevisitedno results

Klaviatura va kiriş

Tugma	Amal
`Enter (maydonda)`	Qidiradi
`Tab`	Maydon → qamrov → saralaş → filtrlar → natijalar → sahifalar

Forma role="search" + aria-label, natijalar soni role="status" — yangi qidiruvdan keyin aytiladi. Natijalar tartibli röyxat (<ol>), har biri h3 havola. Qamrov yorliqlari — havolalar, tanlangani aria-current="page". <mark> ekran öquvçida ham «belgilangan» deb aytiladi (brauzerga boğliq), şuning uçun parça ma'nosi markersiz ham tuşunarli. Faset paneli — fx-facets (aria-label, checkbox'lar).

Naqş: WAI-ARIA APG landmarks · rol search

Kod

AI uçun: qaçon işlatiladi

Işlating

Sayt yoki hujjat böyiça töliq qidiruv sahifasi.
Katalog, bilim bazasi va yordam markazi qidiruvi.

Işlatmang

Tezkor buyruq va sahifaga ötiş (Ctrl+K) → command
Jadval ustidagi filtr qatori → filterbar
Faqat qidiruv maydoni → search
Natija yöq sahifasini böş qoldirmang — imlo taklifi, maslahat va maşhur havolalar bering.
Moslikni faqat rang bilan ajratmang — <mark> fon va qalin şrift bilan.
Sörovni maydondan öçirib yubormang — foydalanuvçi uni tuzatib qayta qidiradi.
Natija parçasini sarlavhani takrorlab yozmang — matndan sörov atrofidagi qismni oling.

npx foxui add searchresults

<div class="fx-searchresults">
  <div class="fx-searchresults__top">
    <form class="fx-searchresults__form" role="search" aria-label="Sayt böyiça qidiruv"><label 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.5"/><path d="m13.5 13.5 3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg><input class="fx-search__input" type="search" name="q" value="narx jadvali" aria-label="Qidiruv sörovi"></label><button class="fx-btn" data-variant="primary" type="submit">Qidiriş</button></form>
    <p class="fx-searchresults__summary" role="status">«<b>narx jadvali</b>» böyiça <b>48</b> ta natija</p>
    <p class="fx-searchresults__suggest">Balki <a href="#">narxlar jadvali</a> demoqçimisiz?</p>
  </div>
  <div class="fx-searchresults__bar">
    <ul class="fx-searchresults__scopes" aria-label="Qamrov"><li><a class="fx-searchresults__scope" href="#" aria-current="page">Hammasi <span>48</span></a></li><li><a class="fx-searchresults__scope" href="#">Komponentlar <span>12</span></a></li><li><a class="fx-searchresults__scope" href="#">Hujjatlar <span>27</span></a></li><li><a class="fx-searchresults__scope" href="#">Blog <span>9</span></a></li></ul>
    <label class="fx-searchresults__sort">Saralaş: <span class="fx-select-wrap"><select class="fx-select"><option>Eng mos</option><option>Eng yangi</option></select></span></label>
  </div>
  <aside class="fx-facets" data-fx-facets aria-label="Natijalarni filtrlaş">
    <div class="fx-facets__head"><h2 class="fx-facets__title">Filtrlar</h2><button class="fx-facets__clear" type="button" data-facets-clear hidden>Tozalaş (<span data-facets-count>0</span>)</button></div>
    <details class="fx-facets__group" open><summary class="fx-facets__legend">Turi <span class="fx-facets__badge" hidden></span></summary><div class="fx-facets__body"><ul class="fx-facets__list" aria-label="Turi"><li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="tur" value="naqsh"><span class="fx-check__box"></span></span><span class="fx-facets__label">Naqş</span><span class="fx-facets__count">8</span></label></li><li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="tur" value="komponent"><span class="fx-check__box"></span></span><span class="fx-facets__label">Komponent</span><span class="fx-facets__count">4</span></label></li><li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="tur" value="qollanma"><span class="fx-check__box"></span></span><span class="fx-facets__label">Qöllanma</span><span class="fx-facets__count">21</span></label></li></ul></div></details>
    <details class="fx-facets__group" open><summary class="fx-facets__legend">Versiya <span class="fx-facets__badge" hidden></span></summary><div class="fx-facets__body"><ul class="fx-facets__list" aria-label="Versiya"><li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="v" value="028"><span class="fx-check__box"></span></span><span class="fx-facets__label">0.28</span><span class="fx-facets__count">31</span></label></li><li><label class="fx-facets__option"><span class="fx-check"><input type="checkbox" name="v" value="027"><span class="fx-check__box"></span></span><span class="fx-facets__label">0.27</span><span class="fx-facets__count">17</span></label></li></ul></div></details>
  </aside>
  <div class="fx-searchresults__main">
    <ol class="fx-searchresults__list">
      <li class="fx-searchresults__item" data-type="best"><ol class="fx-searchresults__path" aria-label="Joylaşuv"><li>foxui.dev</li><li>Atom</li><li>Naqşlar</li></ol><h3 class="fx-searchresults__title"><a class="fx-searchresults__link" href="#">Narx jadvali — <mark>fx-pricing</mark></a></h3><p class="fx-searchresults__snippet">Oylik/yillik almaştirgiç, «eng ommabop» belgisi va xususiyatlarni taqqoslaş <mark>jadvali</mark>. <mark>Narx</mark> sömda, yillikda tejov foizi bilan.</p><div class="fx-searchresults__meta"><span class="fx-badge" data-size="sm">Naqş</span><span>0.28 dan beri</span></div></li>
      <li class="fx-searchresults__item"><ol class="fx-searchresults__path" aria-label="Joylaşuv"><li>foxui.dev</li><li>Blog</li></ol><h3 class="fx-searchresults__title"><a class="fx-searchresults__link" href="#">0.28: 100 ta yangi naqş va «Işxona»</a></h3><p class="fx-searchresults__snippet">…xato sahifalari, <mark>narx jadvali</mark>, FAQ va CTA bölimlari — marketing saytini bir kunda yiğiş uçun…</p><div class="fx-searchresults__meta"><span class="fx-badge" data-size="sm">Blog</span><time datetime="2026-10-14">14-oktabr 2026</time></div></li>
      <li class="fx-searchresults__item"><ol class="fx-searchresults__path" aria-label="Joylaşuv"><li>foxui.dev</li><li>Hujjat</li><li>Tokenlar</li></ol><h3 class="fx-searchresults__title"><a class="fx-searchresults__link" href="#">Raqamlar va valyuta: söm formatlaş</a></h3><p class="fx-searchresults__snippet"><mark>Narx</mark>ni «1 200 000 söm» körinişida çiqariş, <mark>jadval</mark> ustunlarida raqamlarni öngga tekislaş va tabular-nums.</p><div class="fx-searchresults__meta"><span class="fx-badge" data-size="sm">Qöllanma</span><time datetime="2026-10-02">2-oktabr 2026</time></div></li>
    </ol>
    <div class="fx-searchresults__none" hidden><p class="fx-searchresults__none-title">«narx jadvalli» böyiça heç narsa topilmadi</p><ul><li>Imloni tekşiring yoki qisqaroq söz yozing.</li><li>Filtrlarni tozalang — natijalar toraygan bölişi mumkin.</li><li>Ö va Ğ harflarini apostrofsiz yozsangiz ham topiladi.</li></ul><ul class="fx-searchresults__popular" aria-label="Maşhur sahifalar"><li><a class="fx-chip" href="#">Tugma</a></li><li><a class="fx-chip" href="#">Jadval</a></li><li><a class="fx-chip" href="#">Örnatiş</a></li></ul></div>
    <nav class="fx-pagination" aria-label="Natija sahifalari"><a class="fx-pagination__page" aria-disabled="true" aria-label="Oldingi">‹</a><a class="fx-pagination__page" href="#" aria-current="page">1</a><a class="fx-pagination__page" href="#">2</a><a class="fx-pagination__page" href="#">3</a><a class="fx-pagination__page" href="#" aria-label="Keyingi">›</a></nav>
  </div>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-surface --fx-bg-warning-subtle --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-ease-standard --fx-font-size-lg --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-regular --fx-font-weight-semibold --fx-line-height-relaxed --fx-line-height-snug --fx-motion-fast --fx-radius-badge --fx-radius-control --fx-radius-surface --fx-shadow-sm --fx-size-min-target --fx-space-1 --fx-space-10 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary

Şu toifadan

Sarlavha havolasiHujjat sarlavhasi yonida «#» havolasi: ustiga kelganda yoki fokusda çiqadi, bosilsa şu bölimga manzil.Orqaga havolasiOta sahifaga qaytiş havolasi (#89): chevron + qisqa nom.Yuqoriga qaytişUzun sahifa yoki panelda bir ekrandan köp aylantirilgaç pastki burçakda çiqadigan tugma (4.151).Yöl satriBreadcrumbs: ota bölimlar xira havola, joriy sahifa asosiy rangda (aria-current), ajratgiç «/».Buyruqlar oynasiCtrl/⌘+K: hamma sahifa va amalni bir joydan qidiriş.Suhbatlar röyxatiMessenjer çap paneli: avatar (onlayn nuqta), nom, vaqt, oxirgi xabar va belgilar.

Qidiruv natijalari sahifasi

Narx jadvali — fx-pricing

0.28: 100 ta yangi naqş va «Işxona»

Raqamlar va valyuta: söm formatlaş

Variantlar

Anatomiya

Holatlar

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik