Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Lists are continuous, vertical indexes of text and images.

  • They are composed of items containing primary and in some cases supplemental information, which can be shown as text, icons, or images.

  • The component may be part of a page layout or in a Popover. They also often appear as a sub-component within a larger element, such as a Drop-down Menu, Drag and Drop, or Combo Box.

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Types

Type

Image

Usage

Simple list

The most common list is a flat collection of objects.

Checkbox list

A list where the user can select multiple options.

Tree list

A hierarchical list with expanding and collapsing nodes which contain nested items. See the Tree page.

...

  • Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.

  • Numeric. Sort numeric values in a sequential order, with the lowest number first.

  • Chronological. Sort time-related information into chronological order, with the most recent first.

States

State

Image

Regular

Image Removed

image-20240404-075601.pngImage Added

Hover

Active

Active, Hover

image-20240404-074932.png

Disabled

Focused

Focused, Hover

Focused, Active

Focused, Disabled

...