Körsatiş · pattern

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. data-layout: grid (standart — ustunli ziç joylaşuv, kartalar balandligi har xil) yoki featured (bitta katta iqtibos markazda, sarlavha şriftida). Harakatli variant — kartalarni .fx-marquee içiga qöying (gorizontal yoki vertikal ustunlar).

beta0.28.0 dan.fx-testimonialsFaqat CSS

Jamoalar nima deydi

FoxUI bilan sayt va ilova qurayotganlarning fikri.

★★★★★
Ilgari har yangi sahifada tugma va oraliqlarni qaytadan kelişardik. Endi jamoa bitta tilda gapiradi — dizayndan kodgaça bir kun.
Dilnoza QodirovaMahsulot dizayneri, Çorsu Market
★★★★★
npx foxui update birinçi marta özgarişlarni körsatganda işonmadim: heç narsa buzilmadi.
Jasur AliyevFrontend dasturçi, Navbahor Soft
★★★★☆
Qoronği rejim va mavzular bilan boğliq savollar umuman qolmadi. Mijozga 3 ta mavzuni körsatib, tanlatdik.
Madina RasulovaAsosçi, Ipak Yöli Lab
★★★★★
AI agentimiz MCP orqali komponentlarni özi topadi. Kod tekşiruvida «HEX rang işlatilgan» degan izoh endi çiqmaydi.
Sardor BekmurodovTexnik rahbar, Registon Media
★★★★★
Eng yoqqani — özbekça matnlar. ʻ belgisi har şriftda töğri, sarlavhalar çiroyli.
Nodira ToʻxtayevaDizayn bölimi, Tashkent Digital

Dizayn tizimini ikki marta qurmaslik uçun yaratdik. Endi u har loyihada bir xil işlaydi — biz faqat rangini tanlaymiz.

Rustam SobirovStudiya rahbari

Variantlar

Atribut	Qiymatlar	Standart
`data-layout`	`featured` bitta katta iqtibos	`grid`

Anatomiya

root.fx-testimonialsşart
head.fx-testimonials__headixtiyoriy
title.fx-testimonials__titleixtiyoriy
text.fx-testimonials__textixtiyoriy
grid.fx-testimonials__gridixtiyoriy
item.fx-testimonials__itemşart
rating.fx-testimonials__ratingixtiyoriy
quote.fx-testimonials__quoteşart
author.fx-testimonials__authorşart
name.fx-testimonials__nameixtiyoriy
role.fx-testimonials__roleixtiyoriy

Klaviatura va kiriş

Har fikr — <figure> + <blockquote> + <figcaption> (<cite> ism). Yulduzlar role="img" + aria-label ("5 dan 4 yulduz"). Avatar bezak (aria-hidden) — ism matnda. Tör — röyxat (ul/li).

Kod

AI uçun: qaçon işlatiladi

Işlating

Landingda mijozlar fikrini 3–9 karta bilan körsatiş.
Bitta kuçli iqtibos — narx yoki CTA oldidan (featured).

Işlatmang

Çat yoki izohlar oqimi → comments
Mijoz logolari → logos
Töqima fikr yozmang — haqiqiy mijoz, ruxsati bilan, ismi va lavozimi bilan.
Har kartaga uzun matn qöymang — 1–3 gap.
Faqat 5 yulduzli fikrlarni terib qöymang — işonçni yöqotadi; baho şart emas.

npx foxui add testimonials

<section class="fx-testimonials" aria-labelledby="ts-t">
  <header class="fx-testimonials__head"><h2 class="fx-testimonials__title" id="ts-t">Jamoalar nima deydi</h2><p class="fx-testimonials__text">FoxUI bilan sayt va ilova qurayotganlarning fikri.</p></header>
  <ul class="fx-testimonials__grid">
    <li><figure class="fx-testimonials__item"><div class="fx-testimonials__rating" role="img" aria-label="5 dan 5 yulduz">★★★★★</div><blockquote class="fx-testimonials__quote"><p>Ilgari har yangi sahifada tugma va oraliqlarni qaytadan kelişardik. Endi jamoa bitta tilda gapiradi — <mark>dizayndan kodgaça bir kun</mark>.</p></blockquote><figcaption class="fx-testimonials__author"><span class="fx-avatar" data-color="purple" aria-hidden="true">DQ</span><span><cite class="fx-testimonials__name">Dilnoza Qodirova</cite><span class="fx-testimonials__role">Mahsulot dizayneri, Çorsu Market</span></span></figcaption></figure></li>
    <li><figure class="fx-testimonials__item"><div class="fx-testimonials__rating" role="img" aria-label="5 dan 5 yulduz">★★★★★</div><blockquote class="fx-testimonials__quote"><p>npx foxui update birinçi marta özgarişlarni körsatganda işonmadim: heç narsa buzilmadi.</p></blockquote><figcaption class="fx-testimonials__author"><span class="fx-avatar" data-color="blue" aria-hidden="true">JA</span><span><cite class="fx-testimonials__name">Jasur Aliyev</cite><span class="fx-testimonials__role">Frontend dasturçi, Navbahor Soft</span></span></figcaption></figure></li>
    <li><figure class="fx-testimonials__item"><div class="fx-testimonials__rating" role="img" aria-label="5 dan 4 yulduz">★★★★☆</div><blockquote class="fx-testimonials__quote"><p>Qoronği rejim va mavzular bilan boğliq savollar umuman qolmadi. Mijozga 3 ta mavzuni körsatib, tanlatdik.</p></blockquote><figcaption class="fx-testimonials__author"><span class="fx-avatar" data-color="green" aria-hidden="true">MR</span><span><cite class="fx-testimonials__name">Madina Rasulova</cite><span class="fx-testimonials__role">Asosçi, Ipak Yöli Lab</span></span></figcaption></figure></li>
    <li><figure class="fx-testimonials__item"><div class="fx-testimonials__rating" role="img" aria-label="5 dan 5 yulduz">★★★★★</div><blockquote class="fx-testimonials__quote"><p>AI agentimiz MCP orqali komponentlarni özi topadi. Kod tekşiruvida «HEX rang işlatilgan» degan izoh endi çiqmaydi.</p></blockquote><figcaption class="fx-testimonials__author"><span class="fx-avatar" data-color="coral" aria-hidden="true">SB</span><span><cite class="fx-testimonials__name">Sardor Bekmurodov</cite><span class="fx-testimonials__role">Texnik rahbar, Registon Media</span></span></figcaption></figure></li>
    <li><figure class="fx-testimonials__item"><div class="fx-testimonials__rating" role="img" aria-label="5 dan 5 yulduz">★★★★★</div><blockquote class="fx-testimonials__quote"><p>Eng yoqqani — özbekça matnlar. ʻ belgisi har şriftda töğri, sarlavhalar çiroyli.</p></blockquote><figcaption class="fx-testimonials__author"><span class="fx-avatar" data-color="yellow" aria-hidden="true">NT</span><span><cite class="fx-testimonials__name">Nodira Toʻxtayeva</cite><span class="fx-testimonials__role">Dizayn bölimi, Tashkent Digital</span></span></figcaption></figure></li>
  </ul>
</section>
<section class="fx-testimonials" data-layout="featured" aria-label="Asosiy fikr" style="margin-block-start:var(--fx-space-10)">
  <figure class="fx-testimonials__item"><blockquote class="fx-testimonials__quote"><p>Dizayn tizimini ikki marta qurmaslik uçun yaratdik. Endi u har loyihada bir xil işlaydi — biz faqat rangini tanlaymiz.</p></blockquote><figcaption class="fx-testimonials__author"><span class="fx-avatar" data-size="lg" data-color="purple" aria-hidden="true">RS</span><span><cite class="fx-testimonials__name">Rustam Sobirov</cite><span class="fx-testimonials__role">Studiya rahbari</span></span></figcaption></figure>
</section>

Tokenlar: --fx-bg-surface --fx-border-color-surface --fx-border-width-default --fx-color-pastel-yellow --fx-dialog-width --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-md --fx-font-size-display-sm --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-popover-width --fx-radius-badge --fx-radius-surface --fx-shadow-sm --fx-space-1 --fx-space-10 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-viz-accent

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

Mijozlar fikri

Jamoalar nima deydi

Variantlar

Anatomiya

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik