Körsatiş · molecule
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). Körinişga kirganda buyruqlar harfma-harf yoziladi, natijalar ketma-ket çiqadi, oxirida kursor miltillaydi. Matn DOM'da doim töliq: nusxalaş va ekran öquvçi buzilmaydi. Harakat kamaytirilsa — hammasi darhol körinadi.
npx foxui initMavzu: amethyst · Uslub: Aylana · Shrift: Interfoxui.css, foxui.js va AGENTS.md qoʻshildinpx foxui add pricing hero faq3 ta naqsh · 0 ta bogʻliqlikTayyor — npm run dev
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-kind | cmd buyruq — yoziladiout natijaok ✓ muvaffaqiyaterr ✕ xatoinfo ma'lumot | out |
data-dots | color rangli nuqtalar | mono |
Anatomiya
- root
.fx-terminalşart - bar
.fx-terminal__barixtiyoriy - dots
.fx-terminal__dotsixtiyoriy - title
.fx-terminal__titleixtiyoriy - body
.fx-terminal__bodyşart - line
.fx-terminal__lineşart - prompt (JS yaratadi)
.fx-terminal__promptixtiyoriy - caret (JS yaratadi)
.fx-terminal__caretixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | «Qayta» tugmasi animatsiyani qayta ijro etadi |
role="figure" + aria-label — nima körsatilayotgani. Matn DOM'da töliq (animatsiya faqat clip-path) — ekran öquvçi va nusxalaş töliq matnni oladi. Belgilar (✓ ✕ $) CSS'da — ekran öquvçi ularni öqimaydi, holat söz bilan yozilsin. prefers-reduced-motion va data-fx-motion="none"da animatsiya yöq; kursor ekrandan çiqsa töxtaydi.
Kod
AI uçun: qaçon işlatiladi
- Landing yoki hujjatda örnatiş qadamlarini «jonli» körsatiş.
- CLI mahsulotining qanday işlaşini bitta oynada namoyiş qiliş.
npx foxui add terminal
<div class="fx-terminal" data-fx-terminal data-fx-scheme="dark" data-dots="color" role="figure" aria-label="FoxUI'ni örnatiş">
<div class="fx-terminal__bar">
<span class="fx-terminal__dots" aria-hidden="true"><i></i><i></i><i></i></span>
<p class="fx-terminal__title">~/loyiha</p>
<button class="fx-btn" data-variant="ghost" data-size="xs" type="button" data-terminal="replay">Qayta</button>
</div>
<pre class="fx-terminal__body"><span class="fx-terminal__line" data-kind="cmd">npx foxui init</span><span class="fx-terminal__line" data-kind="out">Mavzu: amethyst · Uslub: Aylana · Shrift: Inter</span><span class="fx-terminal__line" data-kind="ok">foxui.css, foxui.js va AGENTS.md qoʻshildi</span><span class="fx-terminal__line" data-kind="cmd">npx foxui add pricing hero faq</span><span class="fx-terminal__line" data-kind="out">3 ta naqsh · 0 ta bogʻliqlik</span><span class="fx-terminal__line" data-kind="ok">Tayyor — npm run dev</span></pre>
</div>Tokenlar: --fx-bg-brand-solid --fx-border-width-default --fx-color-neutral-100 --fx-color-neutral-400 --fx-color-neutral-950 --fx-color-pastel-blue --fx-color-pastel-coral --fx-color-pastel-green --fx-color-pastel-yellow --fx-duration-pulse --fx-ease-enter --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-sm --fx-font-size-xs --fx-motion-fast --fx-motion-shift-sm --fx-radius-circle --fx-radius-surface --fx-shadow-lg --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5