KeyValueList

The license could not be verified: License Certificate has expired!

How to get KeyValueList

import { KeyValueList } from 'fds/components';

Type: Component

KeyValueList is used to render a list containing rows of a key and value. The width of the key column is adjusted automatically to the width of the largest key, but not larger than 50% of the list's width. Keys beyond that width will be truncated automatically. Values on the other hand will continue over multiple lines.

Props

# Name Type Description
1. valueByKey Object<String | String>

Specifies the items to render, should return a key/value pair mapping, both containing string values.

2. [paddingSize] Number | String | Object

The amount of padding rendered by the component.

This should be a either, A single size value, one of the following values:

  • 0 (zero, no padding at all)

  • 's' (small)

  • 'm' (medium)

  • 'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.

Or you can pass an object whose properties determine a specific padding size for either:

  • 'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)

  • 'vertical': %single size value% to set the 'top' and 'bottom' padding

Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

  Default value
0
3. [scrollLimit] Number

The amount of rows which can be displayed vertically before the list starts overflowing, showing a vertical scrollbar.


  Default value
null
Was this page helpful?