The anatomy of the index render
Technically, index doesn't have 'its own' inner HTML. It's a wrapper(in this example <div>) around multiple vptl items. Practically, we are speaking of:
index of views
index of previews
index of teasers, and
index of liners.
In the following example the first <div> inside the <main> is an index of Things.
Index toolbar
Index toolbar exposes the settings of the index.
Change the HTML wrapper (Render As)
We can change the HTML wrapper of an index via 'Render as' option. Currently available options are <ul>, <ol> and <div>. In the future we could expect this list to be enhanced with other HTML renders such as: <select>, 'json' and 'custom tag'(for web components).
Fold Options
Fold and 'Number of Items'
The fold definition gives the choice an index to be rendered as a: pure list, paginated list or lazy loaded list. The fold definition is leveraged with the 'number of items'.
List (pure list)
In the pure list, the number of items represents how many items we will show. For example show only 3 items at all.
Paginate (paginated list)
When the list is paginated, the number of items represents by how many items the index will be paginated. For example: Paginate the list by 3 items. If total number of items in db is 18 we will have 6 pages, each showing 3 items.
Lazy (lazy loaded list)
In this case the the number of items shows how many additional items will be loaded into the list when a visitor clicks the 'load more' button. For example: The index will initially contain 3 items. When a visitor clicks 'load more' button, 3 more items are loaded into the list which now contains 6 items in total and is probably scrollable at this point.
Default Render
You can choose through which vptl render items in a list will be rendered. For example: If you choose 'preview', all the items in the list will be rendered as previews, meaning we will have index of previews.
CSS Class
We can enter default CSS class which will appear on each item in the list.
Sort
We can sort the list choosing the field and direction of sorting.
Also, it is possible to add multiple fields as the sorting criteria.