Körsatiş · molecule

Ikki ustunli kod farqi

Eski va yangi kod yonma-yon (4.82): qatorlar tekislangan, har yon öz raqami bilan, öçirilgan qator − va qizil fon, qöşilgani + va yaşil fon (belgi matnda — rang yolğiz emas), qatordagi aniq özgariş <mark> bilan. Qöşilgan yoki öçirilgan qator qarşisida çiziqli böş katak. Tor joyda (konteyner < 40rem) yoki data-view="unified" bilan bir ustunga ötadi. Faqat CSS — farqni server yoki build hisoblaydi.

beta0.29.0 dan.fx-codediffFaqat CSS

narx.js · oldinnarx.js · keyin (0.28.0)

@@ 12–16 qatorlar · narx hisoblaş @@

export function narx(mahsulot) {

export function narx(mahsulot, kurs = 1) {

const asosiy = mahsulot.narx;

const asosiy = mahsulot.narx * kurs;

const qqs = asosiy * 0.15;

const qqs = asosiy * 0.12;

return asosiy + qqs;

// chegirma kartasi boʻlsa

if (mahsulot.karta) return (asosiy + qqs) * 0.95;

}

Variantlar

Atribut	Qiymatlar	Standart
`data-diff`	`del` `add` `empty`	`none`
`data-view`	`unified` bir ustun	`split`

Anatomiya

root.fx-codediffşart
head.fx-codediff__headixtiyoriy
file.fx-codediff__fileixtiyoriy
body.fx-codediff__bodyşart
row.fx-codediff__rowşart
cell.fx-codediff__cellşart
fold.fx-codediff__foldixtiyoriy

Klaviatura va kiriş

Belgilar (− / +) CSS content'da, ekran öquvçi uçun ildizga qisqa aria-label (nima özgardi) yozing; böş kataklar aria-hidden. Qator raqamlari va belgilar tanlanmaydi (nusxa olişda kod toza). Gorizontal aylantiriş — klaviaturada Shift + ğildirak yoki ← →.

Kod

AI uçun: qaçon işlatiladi

Işlating

Changelog, migratsiya qöllanmasi, kod şarhi: «oldin → keyin».
Hujjatda API özgarişini körsatiş.

Işlatmang

Bitta kod parçasi yoki bir ustunli +/− qatorlar → code
Matn yoki maydon qiymatlari tarixi → timeline
Katta fayllarni töliq körsatmang — özgarmagan qismlarni fold qatori bilan yiğing.
Faqat rangga tayanmang — −/+ belgilari va qator raqamlari qolsin.
Bir ustunli kiçik özgariş uçun işlatmang — fx-code'dagi diff qatorlari yetarli.

npx foxui add codediff

<figure class="fx-codediff" style="margin:0" aria-label="narx.js: QQS 15 % dan 12 % ga, kurs va çegirma qöşildi">
  <div class="fx-codediff__head"><span class="fx-codediff__file"><b>narx.js</b> · oldin</span><span class="fx-codediff__file"><b>narx.js</b> · keyin (0.28.0)</span></div>
  <div class="fx-codediff__body">
    <div class="fx-codediff__fold">@@ 12–16 qatorlar · narx hisoblaş @@</div>
    <div class="fx-codediff__row"><div class="fx-codediff__cell" data-n="12" data-diff="del"><code>export function narx(mahsulot) {</code></div><div class="fx-codediff__cell" data-n="12" data-diff="add"><code>export function narx(mahsulot<mark>, kurs = 1</mark>) {</code></div></div>
    <div class="fx-codediff__row"><div class="fx-codediff__cell" data-n="13" data-diff="del"><code>  const asosiy = mahsulot.narx;</code></div><div class="fx-codediff__cell" data-n="13" data-diff="add"><code>  const asosiy = mahsulot.narx * kurs;</code></div></div>
    <div class="fx-codediff__row"><div class="fx-codediff__cell" data-n="14" data-diff="del"><code>  const qqs = asosiy * <mark>0.15</mark>;</code></div><div class="fx-codediff__cell" data-n="14" data-diff="add"><code>  const qqs = asosiy * <mark>0.12</mark>;</code></div></div>
    <div class="fx-codediff__row"><div class="fx-codediff__cell" data-n="15"><code>  return asosiy + qqs;</code></div><div class="fx-codediff__cell" data-n="15"><code>  return asosiy + qqs;</code></div></div>
    <div class="fx-codediff__row"><div class="fx-codediff__cell" data-diff="empty" aria-hidden="true"></div><div class="fx-codediff__cell" data-n="16" data-diff="add"><code>  // chegirma kartasi boʻlsa</code></div></div>
    <div class="fx-codediff__row"><div class="fx-codediff__cell" data-diff="empty" aria-hidden="true"></div><div class="fx-codediff__cell" data-n="17" data-diff="add"><code>  if (mahsulot.karta) return (asosiy + qqs) * 0.95;</code></div></div>
    <div class="fx-codediff__row"><div class="fx-codediff__cell" data-n="16"><code>}</code></div><div class="fx-codediff__cell" data-n="18"><code>}</code></div></div>
  </div>
</figure>

Tokenlar: --fx-bg-error-subtle --fx-bg-info-subtle --fx-bg-muted --fx-bg-success-subtle --fx-bg-surface --fx-border-color-default --fx-border-width-default --fx-fg-error --fx-fg-success --fx-font-adjust-mono --fx-font-adjust-sans --fx-font-family-mono --fx-font-family-sans --fx-font-size-xs --fx-font-weight-semibold --fx-radius-badge --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-4 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary

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

Ikki ustunli kod farqi

Variantlar

Anatomiya

Klaviatura va kiriş

Kod

Şu toifadan

Libos

Rang

Şakl va çegara

Şrift juftligi

Qulaylik