List

Create a list of children with text between each child. The text to join with is specified by providing either joiner children, or providing boolean props for the punctuation and line breaks. The default joiner is no punctuation and a hard break. The ender prop can provide text to place at the end of the list when there is at least one child.

jsx

import { List } from "@alloy-js/core";

<List
  comma
  doubleHardline
  ender={Children}
  enderPunctuation
  hardline
  joiner={Children}
  line
  literalline
  semicolon
  softline
  space
>
  {children}
</List>

stc

import { List } from "@alloy-js/core/stc";

List({
  comma: boolean,
  doubleHardline: boolean,
  ender: Children,
  enderPunctuation: boolean,
  hardline: boolean,
  joiner: Children,
  line: boolean,
  literalline: boolean,
  semicolon: boolean,
  softline: boolean,
  space: boolean,
}).children(children)

Props

children	optional Children
comma	optional boolean	Place a comma between each element
doubleHardline	optional boolean	Place two hardlines between each element
ender	optional Children	Text to place at the end of the list when there is at least one item. If set to true, the joiner is used.
enderPunctuation	optional boolean	Place the join punctuation at the end, without a line break. The punctuation is emitted unconditionally in flat and broken modes. To add trailing punctuation only in broken mode, use ender with <ifBreak> inside a <group> with a non-hardline joiner (e.g. line): <group> <List comma line ender={<ifBreak>,</ifBreak>}>...</List> </group>
hardline	optional boolean	Place a hardline (<hbr />) between each element
joiner	optional Children	Text to place between each element
line	optional boolean	Place a regular line (<br />) between each element
literalline	optional boolean	Place a literal line (<lbr />) between each element
semicolon	optional boolean	Place a semicolon between each element
softline	optional boolean	Place a softline (<sbr />) between each element
space	optional boolean	Place a space between each element