Key Value
<zn-key-value> | ZnKeyValue
Edits a list of name and value pairs, submitted as a JSON object.
<zn-key-value label="Placeholders" name="placeholders" key-label="Name" value-label="Value" value='{"1": ""}'></zn-key-value>
Examples
Labels
Use key-label and value-label for the placeholder of each input, and
add-text for the add button.
<zn-key-value label="Headers" key-label="Header" value-label="Content" add-text="Add header"></zn-key-value>
Merge fields
slash-items is passed to each value input, so typing / offers the same insertions
as zn-input.
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/key-value/key-value.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/key-value/key-value.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/key-value/key-value.js';
Slots
| Name | Description |
|---|---|
label
|
The label. Alternatively, use the label attribute. |
help-text
|
Text under the pairs. Alternatively, use the help-text attribute. |
Learn more about using slots.
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
value
|
The pairs as a JSON object, such as {"1": "{{recipient.firstName}}"}. |
string
|
'{}'
|
|
slashItems
slash-items
|
Passed to each value input, so its slash menu can insert merge fields. |
string
|
''
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
zn-change |
|
Emitted when a pair is added, removed or edited. | - |
Learn more about events.
Parts
| Name | Description |
|---|---|
base |
The component’s base wrapper. |
row |
Each name and value pair. |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-button><zn-color-picker><zn-dropdown><zn-example><zn-icon><zn-input><zn-popup><zn-slash-item><zn-slash-menu><zn-tooltip>