@gitlab/ui

Version:

GitLab UI Components

91 lines (64 loc) • 2.03 kB

Markdown

The intersperse component separates a list of elements by a given character (the default is `, `). 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. ## Usage ### Default ```html <gl-intersperse> Item 1 Item 2 Item 3 </gl-intersperse> ``` This renders to the following HTML: ```html Item 1, Item 2, Item 3 ``` ### Custom Separator A custom separator can be defined via the `separator` prop: ```html <gl-intersperse separator="/"> Item 1 Item 2 Item 3 </gl-intersperse> ``` This renders to the following HTML: ```html Item 1/Item 2/Item 3 ``` ### Custom Last Separator A custom last separator can be defined via the `lastSeparator` prop: ```html <gl-intersperse last-separator=" and "> Item 1 Item 2 Item 3 </gl-intersperse> ``` This renders to the following HTML: ```html Item 1, Item 2, and Item 3 ``` A custom last separator used on two items will only place `lastSeparator` between them: ```html <gl-intersperse last-separator=" and "> Item 1 Item 2 </gl-intersperse> ``` This renders to the following HTML: ```html Item 1 and Item 2 ```