Körsatiş · molecule
Kod bloki
Monospace blok: fayl nomi va til sarlavhasi, nusxa tugmasi (fx-copy), qator raqamlari, ajratilgan va farq (+/−) qatorlari. Bir qatorli snippet (`$ npx …`) va matn içidagi kod ham şu yerda.
export default { theme: "eski", theme: "yangi", prefix: "fx-",}npx foxui updateBuyruq: npm test
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-variant | snippet | block |
Anatomiya
- root
.fx-codeşart - header
.fx-code__headerixtiyoriy - name
.fx-code__nameixtiyoriy - lang
.fx-code__langixtiyoriy - pre
.fx-code__preşart - line
.fx-code__lineixtiyoriy - inline
.fx-code-inlineixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab, Arrow | Aylantiriladigan kodni klaviatura bilan siljitadi |
Gorizontal aylantiriladigan <pre> tabindex=0 (klaviatura bilan aylantiriş) va fokus halqasi. Farq qatorida + / − belgi matnda (rang yolğiz emas).
Kod
AI uçun: qaçon işlatiladi
- Buyruq, sozlama, kod namunasi.
- Bir söz yoki identifikator matn içida →
kbd - Rangli sintaksis (highlight) uçun HEX yozmang — rol tokenlari.
- Qator raqami va farq belgisini nusxaga qöşmang (CSS counter/::after — nusxada yöq).
npx foxui add code
<div class="fx-code" data-lines>
<div class="fx-code__header"><span class="fx-code__name">tailwind.config.js</span><button class="fx-copy" type="button" data-fx-copy data-copy-target="#kod1" aria-label="Kodni nusxalaş"><svg data-fx-icon="copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg><svg data-fx-icon="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12l5 5 9-10"/></svg><span class="fx-copy__status" role="status"></span></button></div>
<pre class="fx-code__pre" tabindex="0"><code id="kod1"><span class="fx-code__line">export default {</span><span class="fx-code__line" data-diff="del"> theme: "eski",</span><span class="fx-code__line" data-diff="add"> theme: "yangi",</span><span class="fx-code__line" data-highlight> prefix: "fx-",</span><span class="fx-code__line">}</span></code></pre>
</div>
<div class="fx-code" data-variant="snippet"><pre class="fx-code__pre"><code>npx foxui update</code></pre></div>
<p>Buyruq: <code class="fx-code-inline">npm test</code></p>Tokenlar: --fx-bg-brand-subtle --fx-bg-error-subtle --fx-bg-muted --fx-bg-subtle --fx-bg-success-subtle --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-fg-error --fx-fg-success --fx-font-adjust-mono --fx-font-family-mono --fx-font-size-sm --fx-font-size-xs --fx-radius-badge --fx-radius-control --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary