Lists are made up of a continuous column of rows. Each row contains a tile. Primary actions fill the tile, and supplemental actions are represented by icons and text.
Lists are best suited for similar data types.:
Determinate indicators display how long an operation will take.
Indeterminate indicators visualize an unspecified wait time.
Vertical and Horizontal scrolling
Filtering and Sorting
Swipe
Drag and drop
A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles.
Tiles hold content, and can vary in height within a list.
Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text. They are optimized for reading comprehension while differentiating either between similar data types, or qualities within a single data type.
When the mouse and keyboard are the primary input methods, measurements may be condensed to accommodate denser layouts.
Lists scroll vertically and horizontally.
The swipe action of each tile should be consistent within lists.
Smart.ListBox provides Swipe left and Swipe right events to allow even more customizability.
Tiles may be moved between a list and drop target (similar to moving a file into a folder) and picked up and manually reordered within a list.
Reorder property allows the items inside the list box to be moved.
Items can even be moved accross list boxes.
List box A
List box B
List tiles can be sorted or filtered by date, file size, alphabetical order, or other parameters.
List tiles can contain text with icons. Thanks to the itemTemplate property any HTML code can be placed inside the tiles.
List tiles can also contain avatars.
Alphabetical sorting makes information easier to find.
Filtering allows the user to quickly find the needed items.
Lists can have multiple lines of text.
Example of a two-line list.
Example of a two-line list with icon.