jig.list
Use the jig.list to create a list from a datasource and style that list to your requirements. A list is a changeable, ordered sequence of elements and related values. They enable you to keep data that belongs together, condense your code, and perform the same methods and operations on multiple values at once. Looking to add a shopping cart or product list to your app? The product-item list comes with great out-of-the-box features that make it easy to build.
- This type is similar to the component List, with the only exception that list components is a component that you use on a Default jig with other items, whereas the List jig is a dedicated to a list only.
- Each item in a list can be called individually through indexing. Lists are a compound data type made up of smaller parts and are very flexible because they can have values added, removed, and changed.
- When you need to store a lot of values or iterate over values, and you want to be able to readily modify those values, you’ll likely want to work with list data types.
- Each element or value inside a list is called an item.
- A jig.list component allows for a few configuration options and is automatically added as a list on a widget if the sizing of the widget exceeds 1x1. See the list for information on the list widget. This component can also be added to a jig.default where the list component is configured along with other content or components.
- As a normal list (this is the main type - refer to the list-item component section for unique formatting options)
Other options | |
---|---|
filter | initialValue - Predefine the default selected tab for a filter on the list, when opening the the default filter tab is displayed. data - define the filter tabs using: - title - give the filter a name. The text that will be displayed in the tab, for example, in-stock. - value - The value that the list filter returns. Use the following expressions to return this value:
For true/false values that are saved as boolean ensure the filter has a boolean value. For true/false values that are saved as string ensure the filter has a string value. |
hasActiveItem | When set to true the list has an active item state. |
isHorizontal | Set to true displays the list horizontally, while false displays the list vertically. The default list is displayed vertically. |
iscontained | Used to style the list item, true wraps the list item in a card, while false displays the item with no styling. This property can only be used with vertical lists and component.list-item. |
isSearchable | Set to true adds a search field to the list. The default list is displayed without a search field. |
isSelecatable | When set to true the abililty to select individual and multiple items in the list is available. Click the Select link in the top right of the screen. The default list is displayed without selection options. |
sections | Used for styling a list, when set to true each item in the list displays in its own section, divided by a line. The default is false. |
State configuration | Key | Notes |
---|---|---|
activeItem activeItemId amounts filter isHorizontal isRefreshing isSelectable isSelectActive searchText selected value | ||
amount checked |
| |
activeItemId now |
|