ListSelector Component Reference

Related documents

• Component Overview
• Component Reference
• Built-in Components
• Template Markup Language (TML) Reference

Table of Contents

• Introduction
• Attributes
• Instance methods
  • Inherited methods
  • setValue()
• Children
• DOM element properties

Introduction

Syntax

tml`
	<ListSelector />
`

The ListSelector component is a Selector component that renders a <ul> with a list of selectable items. The items may have one level of sub-items, in which case the list expands to show the sub-items when selected ("accordions"). Only one group of sub-tiem can be expanded at one time. If another group is selected, the previous one collapses.

If the ListSelector component has a timeout attribute, an expanded group will automatically collapse after the specified amount of time.

Attributes

• Standard properties
  The ListSelector component accepts the standard attributes.
• onClick
  A function to call when an item is selected. The function has the signature fn(value) where value is the value associated with the selected option. The displayed list reflects the newly selected option. The function may subsequently override the selection by setting calling the setValue() method if required.
• options
  An array of options. The options are presented to the user in the same order. Each element can contain a string, a number, or an object. If an element is an object, it contains the following properties:
  • options
    If the element object has an options property, it must contain an array containing strings, numbers, or objects containing both a text property and a value property.
  • text
    The text to display for the option. If text is omitted, then value coerced to a string is used.
  • value

    The value of the state variable if this option is selected.
  

  If an element is a number, the displayed text is the number coerced to a string, and the value is the element. If an element is a string, it is used for both the displayed text and value.

• value
  The value of the selected option in the options array.
• showSelection
  If truthy, the currently selected item is highlighted.
• timeout
  A positive numeric value. If valid, then the display of second-level options will be closed if no selection has been made within timeout milliseconds.
• value
  The value of the current selection.

Instance methods

These methods are intended to be used by parent components to dynamically change the properties of the rendered components without re-rendering.

Inherited methods

• Component methods

setValue()

Syntax

setValue(value)

Sets the rendered element's value.

Parameters

• value
  A Number.

Children

The ListSelector component ignores any children.

DOM element properties

• The ListSelector component renders a <ul> elemment containing a <li> element for each option.
• The ListSelector component <ul> element has a CSS class string that contains listSelector.
• An <li> element is rendered for each option. Each <li> element has a CSS class string that contains listSelector_item.
• The highlighted <li> element will have a CSS class string that contains listSelector_item-sel. The other will have listSelector_item-unsel.