List

The list() component allows displaying a list of items, advanced keyboard handling support for navigating between items, and predefined modes to improve the development efficiency.

See the official documention for list, for all the correct props.

Examples

ul(
  mode = "SingleSelect",
  `header-text` = "Select an employee",
  id = "listSingle",
  li(
    icon = "employee", 
    description = "John Coene",
    `additional-text` = "An employee",
    `additional-text-state` = "Information",
    value = "john",
    "some text"
  ),
  li(
    icon = "employee", 
    description = "Pierre Saouter",
    `additional-text` = "Another employee",
    `additional-text-state` = "Success",
    value = "pierre",
    "some more text"
  )
)

some textsome more text

ul(
  mode = "MultiSelect",
  `header-text` = "Multi select",
  id = "list",
  li(
    "some text"
  ),
  li(
    "some more text"
  ),
  li(
    "another item"
  ),
  li(
    "last item"
  )
)

some textsome more textanother itemlast item