Karkas · pattern
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). Har katak — ixtiyoriy ikon, sarlavha, qisqa matn va çetigaça çiqadigan media (illyustratsiya yoki mini UI). Butun katak havola bölişi mumkin (.fx-bento__link) — hover'da media biroz kattalaşadi. Telefonda bitta ustun. Effektlar qatlami bilan (data-fx="spotlight") kursor ortidan nur.
-
8 rang mavzusi, 4 uslub
Brendingizga eng yaqin mavzuni tanlang — pastel, neytral va yordamçi ranglar birga keladi.
-
Özbekça — boşidan
Har şrift ʻ belgisini töğri çiqaradi, qöriqçi buni har build'da tekşiradi.
-
AI agent uçun MCP
Agent komponent va qoidalarni özi oladi.
-
Yoruğ va qoronği
Har mavzu ikkala rejimda kontrast tekşiruvidan ötgan.
-
Bitta buyruq bilan yangilanadi
Yangi versiya taklif bölib keladi: nima özgarganini körasiz va özingiz qabul qilasiz.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-cols | 24 | 3 |
data-span | 2x11x22x23x1 | 1x1 |
data-tone | brandsubtle | surface |
data-media | top | bottom |
Anatomiya
- root
.fx-bentoşart - item
.fx-bento__itemşart - icon
.fx-bento__iconixtiyoriy - title
.fx-bento__titleixtiyoriy - text
.fx-bento__textixtiyoriy - media
.fx-bento__mediaixtiyoriy - link (butun katak)
.fx-bento__linkixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Havolali kataklar orasida |
Röyxat (ul/li) — ekran öquvçi kataklar sonini aytadi. Media bezak bölsa aria-hidden. Bosiladigan katakda havola sarlavha içida (.fx-bento__link) — fokus halqasi butun katakda. Tartib DOM tartibida (dense faqat böş joyni töldiradi — muhim katakni oldinroq yozing).
Kod
AI uçun: qaçon işlatiladi
- Landingda 4–7 ta xususiyatni vizual mozaika qilib körsatiş.
- Mahsulotning bir neçta tomonini mini UI parçalari bilan namoyiş qiliş.
npx foxui add bento
<ul class="fx-bento" data-fx-effects>
<li class="fx-bento__item" data-span="2x1" data-fx="spotlight">
<h3 class="fx-bento__title">8 rang mavzusi, 4 uslub</h3>
<p class="fx-bento__text">Brendingizga eng yaqin mavzuni tanlang — pastel, neytral va yordamçi ranglar birga keladi.</p>
<div class="fx-bento__media" aria-hidden="true"><div style="display:flex;gap:var(--fx-space-3)"><span class="fx-avatar" data-size="lg" data-color="purple">A</span><span class="fx-avatar" data-size="lg" data-color="blue">O</span><span class="fx-avatar" data-size="lg" data-color="green">Z</span><span class="fx-avatar" data-size="lg" data-color="yellow">S</span><span class="fx-avatar" data-size="lg" data-color="coral">Q</span><span class="fx-avatar" data-size="lg" data-color="pink">R</span></div></div>
</li>
<li class="fx-bento__item" data-span="1x2" data-tone="brand">
<h3 class="fx-bento__title">Özbekça — boşidan</h3>
<p class="fx-bento__text">Har şrift ʻ belgisini töğri çiqaradi, qöriqçi buni har build'da tekşiradi.</p>
<div class="fx-bento__media" aria-hidden="true"><span style="font-size:var(--fx-font-size-display-md);font-weight:var(--fx-font-weight-semibold);letter-spacing:-0.02em">Ö Ğ</span></div>
</li>
<li class="fx-bento__item" data-fx="spotlight">
<span class="fx-bento__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v3M12 18v3M3 12h3M18 12h3M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2"/></svg></span>
<h3 class="fx-bento__title"><a class="fx-bento__link" href="#">AI agent uçun MCP</a></h3>
<p class="fx-bento__text">Agent komponent va qoidalarni özi oladi.</p>
</li>
<li class="fx-bento__item" data-fx="spotlight">
<span class="fx-bento__icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 0 0 16z" fill="currentColor"/></svg></span>
<h3 class="fx-bento__title">Yoruğ va qoronği</h3>
<p class="fx-bento__text">Har mavzu ikkala rejimda kontrast tekşiruvidan ötgan.</p>
</li>
<li class="fx-bento__item" data-span="3x1" data-fx="spotlight" data-media="top">
<div class="fx-bento__media" style="background:var(--fx-bg-subtle)" aria-hidden="true"><div class="fx-code" data-variant="snippet"><pre class="fx-code__pre"><code>npx foxui update</code></pre></div></div>
<h3 class="fx-bento__title">Bitta buyruq bilan yangilanadi</h3>
<p class="fx-bento__text">Yangi versiya taklif bölib keladi: nima özgarganini körasiz va özingiz qabul qilasiz.</p>
</li>
</ul>Tokenlar: --fx-bg-brand-solid --fx-bg-brand-subtle --fx-bg-subtle --fx-bg-surface --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-ease-emphasized --fx-font-size-lg --fx-font-size-sm --fx-font-weight-semibold --fx-knob-motion-lift --fx-motion-slow --fx-radius-control --fx-radius-surface --fx-shadow-sm --fx-size-control-sm --fx-size-icon-md --fx-space-12 --fx-space-2 --fx-space-4 --fx-space-6 --fx-text-brand --fx-text-on-brand --fx-text-secondary