TupleListConverter

const TupleListConverter: ConverterFactory<(string | number | undefined)[][], [string?, string?, ((value: string) => string | number)[]?]>;

The TupleListConverter allows you to define lists of primitive tuple values, as attributes. This is useful for attributes that expect a list of tuple values, like multiple coordinates or dimensions.

Param

listSeparator

The string used to separate the list items in the attribute value. Defaults to a comma (,).

Param

tupleSeparator

The string used to separate the tuple items in the attribute value. Defaults to a space ().

Param

types

The type of the tuple items as primitive constructors. Defaults to [Number,Number].

Example

@customElement('my-component')
class MyComponent extends LitElement {
  @property({
    type: Array,
    reflect: true,
    attribute: 'dimensions',
    converter: TupleListConverter(',', 'x', [Number, Number]),
  })
  dimensions = [[1920, 1080], [1280, 720]];
}

<my-component dimensions="1920x1080,1280x720"></my-component>