Flo.w

# List

<flow-list>
Reactive Stable

The List component presents a set of options or actions in a list format.

The List component is used with the following components to build lists of options and actions:

  • List Group - a group of lists displayed as a compound list.
  • List Header - a header displayed before a list.
  • List Item - an individual option or action in a list.
  • List Divider - a dividing line between list items.

Lists are typically used to create navigation UI or option UI in the left-hand panel of an application.

# Reactivity

Checkbox-type and radio-type Lists can be bound to Flo.w reactive state. To do this, set the selection-state attribute to a state property. The value of the state property will be updated to reflect the selection state of the List component's child controls. The UI state of the controls will also be updated if the bound state property is updated programmatically.

  • For checkbox-type Lists, the state property is an array of values indicating checked List Items.
  • For radio-type Lists, the state property is indicates the value of the currently selected List Item.

# Examples

Add the single-selection attribute to automatically select the clicked List Item in a list.

# Properties

Property Description Type Default
flowContext
flow-context		 The Flo.w context ID to use for application state. string 'default'
Reactive
selectionState
selection-state		 Set to bind a Flo.w application state property to this list. Radio or check-box list changes will be reflected in state property changes and vice versa. string
singleSelection
single-selection		 Set to `true` to enable 'single selection' mode. The list will have a single selected item displayed in a distinct style. boolean false
twoLine
two-line		 Set to `true` to support two-line list items. boolean false

# Events

Event Description Type
flowListAction

Emitted when a list action occurs.

 FlowListActionEventDetail

# Methods

Method Description
setSelected setSelected(val: any | any[]) => Promise<HTMLFlowListItemElement[]>

Set the selected list item by value.

setSelectedIndex setSelectedIndex(index: number | number[]) => Promise<HTMLFlowListItemElement[]>

Set the selected list item by index.

# CSS Custom Properties

Name Description
--color Text color for the list (default: text)
--control-color Color of list controls (radio markers and check-boxes) (default: secondary)

← List Item →