Intersperse

Examples

Code reference

It takes all direct descendants of its default slot and inserts the given separator between each item:

item 1, item 2, item 3

Optionally the character used for separating each item and the last separator can be set independently:

• separator="/" renders item 1/item 2/item 3
• lastSeparator=" and " will render item 1, item 2, and item 3
• lastSeparator=" and " and given two items will render item 1 and item 2

Note:

The component provides an inline context since the result is wrapped in a span.

Also, whitespace elements that are direct children of the default-slot get removed to ensure consistent formatting.

Default

<gl-intersperse>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</gl-intersperse>

This renders to the following HTML:

<span><span>Item 1</span>, <span>Item 2</span>, <span>Item 3</span></span>

Custom Separator

A custom separator can be defined via the separator prop:

<gl-intersperse separator="/">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</gl-intersperse>

This renders to the following HTML:

<span><span>Item 1</span>/<span>Item 2</span>/<span>Item 3</span></span>

Custom Last Separator

A custom last separator can be defined via the lastSeparator prop:

<gl-intersperse last-separator=" and ">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</gl-intersperse>

This renders to the following HTML:

<span><span>Item 1</span>, <span>Item 2</span>, and <span>Item 3</span></span>

A custom last separator used on two items will only place lastSeparator between them:

<gl-intersperse last-separator=" and ">
  <span>Item 1</span>
  <span>Item 2</span>
</gl-intersperse>

This renders to the following HTML:

<span><span>Item 1</span> and <span>Item 2</span></span>

GlIntersperse