Diff Row

<zn-diff-row> | ZnDiffRow

Since 1.1

experimental

One aligned row of a zn-diff: the same item in both versions, tinted by how it changed.

Same value Same value

Old value New value

New item

Old item

<zn-diff before-caption="Before" after-caption="After">
  <zn-diff-row caption="Section" heading></zn-diff-row>
  <zn-diff-row caption="Unchanged">
    <span slot="before">Same value</span>
    <span slot="after">Same value</span>
  </zn-diff-row>
  <zn-diff-row caption="Changed" change="changed">
    <span slot="before">Old value</span>
    <span slot="after">New value</span>
  </zn-diff-row>
  <zn-diff-row caption="Added" change="added">
    <span slot="after">New item</span>
  </zn-diff-row>
  <zn-diff-row caption="Removed" change="removed">
    <span slot="before">Old item</span>
  </zn-diff-row>
</zn-diff>

Use heading for a row that names the group below it. change is changed, added or removed; leave it out for an unchanged item.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/diff-row/diff-row.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@2.0.0/dist/components/diff-row/diff-row.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/diff-row/diff-row.js';

Slots

Name	Description
`before`	The item’s details in the older version.
`after`	The item’s details in the newer version.

Learn more about using slots.

Properties

Name	Description	Type	Default
`caption`	The item’s name, shown in both columns.	`string`	`''`
`change`	How the item changed: `changed`, `added` or `removed`. Unchanged when empty.	`string`	`''`
`heading`	When true, the row is a heading spanning both columns, such as a section name.	`boolean`	`false`
`beforePlaceholder` `before-placeholder`	Shown in the left column when the item was added.	`string`	`'Not in this version'`
`afterPlaceholder` `after-placeholder`	Shown in the right column when the item was removed.	`string`	`'Not in this version'`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name	Description	Default
`--zn-diff-row-border`	The line below the row.

Learn more about customizing CSS custom properties.

Parts

Name	Description
`row`	The row.
`before`	The left cell.
`after`	The right cell.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<zn-badge>
<zn-icon>