Preview

Note: Items are set via the items JavaScript property. See usage below.

Usage

<cs-key-value-pairs></cs-key-value-pairs>

<script>
  const kvPairs = document.querySelector('cs-key-value-pairs');
  kvPairs.items = [
    { label: 'Instance ID', value: 'i-0123456789abcdef0' },
    { label: 'Instance type', value: 't3.medium' },
    { label: 'Availability zone', value: 'us-east-1a' },
    { label: 'Status', value: 'Running' },
  ];
</script>

Properties

aria-labelstring default: null

Provides an aria-label to the Key-value pairs container. Don't use ariaLabel and ariaLabelledby at the same time.

aria-labelledbystring

Sets the aria-labelledby property on the Key-value pairs container. If there's a visible label element that you can reference, use this instead of ariaLabel. Don't use ariaLabel and ariaLabelledby at the same time.

columnsnumber default: 1

Specifies the number of columns in each grid row. Valid values are any integer between 1 and 4. It defaults to 1.

itemsReadonlyArray<KeyValuePairsProps.Item>required

An array of either key-value pairs individual items or groups. They could be combined. Each item has type prop, which might be either group or pair. Defaults to pair if not specified.

Each key-value pair definition has the following properties:

• type (string) - (Optional) Item type (pair).
• label (unknown) - The key label.
• info (unknown) - (Optional) Area next to the key to display an info link.
• value (unknown) - The corresponding value for the key.

Each group definition has the following properties:

• type (string) - Item type (group).
• title (string) - (Optional) An optional title for this column.
• items (ReadonlyArray<KeyValuePairProps.KeyValuePair>) - An array of key-value pair items.

min-column-widthnumber

Use to specify the desired minimum width for each column in pixels.

The number of columns is determined by the value of this property, the available space, and the maximum number of columns as defined by the columns property. If not set, defaults to 150.