Value List

deprecated in v1.0.3Refer to the List component documentation.
Learn more

Overview

Value List provides a list of operational items, offering a view relevant to the interface. Value List enables sorting of its child elements, Value List Items, with the dragEnabled property.

Value List Items can also be removed with the child's removable property.

Usage

  • Display operational items in a configuration
  • Enable reordering of operational items
  • Enable configuration of operational items

Sample

Accessibility

Keyboard navigation

KeyFunction
Arrow downMoves focus and selection to previous value-list-item. If the current focus and selection is the first value-list-item, focus and selection will cycle to the end.
Arrow upMoves focus and selection to next item. If the current focus and selection is the last value-list-item, focus and selection will cycle to the beginning.
TabMoves focus in and out of component.
Tab and ShiftMoves focus in and out of component.

When using the component with drag-enabled, additional keyboard functionality is available.

KeyFunction
SpaceWhile focused on the drag handle, enter or exit the drag mode
Arrow downWhile in the drag mode, move the current item up in the list order
Arrow upWhile in the drag mode, move the current item down in the list order

API reference

Properties

Slots

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.