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	optionalChildren
comma	optionalboolean Place a comma between each element
doubleHardline	optionalboolean Place two hardlines between each element
ender	optionalChildren 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	optionalboolean Place the join punctuation at the end, but without a line break.
hardline	optionalboolean Place a hardline (<hbr />) between each element
joiner	optionalChildren Text to place between each element
line	optionalboolean Place a regular line (<br />) between each element
literalline	optionalboolean Place a literal line (<lbr />) between each element
semicolon	optionalboolean Place a semicolon between each element
softline	optionalboolean Place a softline (<sbr />) between each element
space	optionalboolean Place a space between each element