List
Overview of the List Component
By default, any new List component contains two List Items. To add a new List Item, click the + button inside the List.
Properties
Important Note!
This document lists the properties that are specific to this particular UI component.
To check for the properties common for most UI components, please check the General components document.
The List component has the following properties:
Common Properties
| Property Name | Property Description |
|---|---|
| Container | Define a container type for including items: Items list or Items group. |
Under the Styles tab, lists can be styled with several attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Lines | Define how the bottom border should be displayed on the item: Full, Inset, None. |
| Inset | If set to True, the list will have a margin around it and rounded corners. |
Visit the Ionic documentation to read more about lists.
You can check this tutorial to learn how to build an Appery.io mobile app that displays a list of data from a cloud database.
List Item
The List Item component has the following properties:
Common Properties
| Property Name | Property Description |
|---|---|
| Item Type | Used to change the Item role (Item Divider, Item Sliding, List Header). |
| Sliding Sides | Is visible if Item Type is set to Item Sliding. Available sides of Item Sliding: Start, End, or Both. |
| Label | If set to True, adds a label to the list Item. |
| Sliding State | Is visible if Item Type is set to Item Sliding. Switch a state of item sliding in the Visual Editor: Swipe Right or Swipe Left. |
| Routing | Route Name - list of routes names from the Routing panel. Route Params - adds values for Route Params described in the Routing panel. Router Direction - when using a router, it specifies the transition direction when navigating to another page using href: back, forward, root. |
| Link Features | Options for the component used as a link: Download - this attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name Href - specifies the relationship of the target object to the link object. Type - the type of the button: Submit, Reset, Button. Target - specifies where to display the linked URL. Only applies when an href is provided: Blank, Self, Parent, Top. Rel - specifies the relationship of the target object to the link object. |
Styles Properties
Under the Styles tab, inputs can be styled with several attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Line Style | Define how the bottom border should be displayed on the item: Full, Inset, None. |
| Sticky | Is visible if Item Type is set to Item Divider. When set to True, the item-divider will stay visible when it reaches the top of the viewport until the next ion-item-divider replaces it. |
| Button | If set to true, a button tag will be rendered and the item will be tappable. |
| Detail | If set to true, a detail arrow will appear on the item |
| Detail Icon | The icon to use when Detail is set to true. Click the Default icon button to select a needed icon. |
| SVG Icon | Is used to select an .svg file. This path will be added as the src attribute. Click the Change button to select the uploaded image from Media Manager. |
The property's Detail defaults are set to false unless the Mode is iOS and an Href, onclick or Button property is present.
The property Type is only used when an onclick or Button property is present.
The property Sliding State is used only in the Visual Editor to switch a state of Item Sliding. Use a doubleclick on the item Sliding to do the same action.
Navigation with Routing has a higher priority than Href.
Item Label
The Item Label component has the following properties:
Styles Properties
Under the Styles tab, item labels can be styled with several attributes to look like in a specific way:
| Property Name | Property Description |
|---|---|
| Text Color | Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
| Font Size | Enter font size in px, %, em, vh, and vw. |
| Font Weight | Set the weight (or boldness) of the font: Normal or Bold. |
| Line Height | Set the height of a line box in px, %, em, vh, and vw. It's commonly used to set the distance between lines of text. |
| Font Style | Set whether a font should be styled with a Normal or Italic face. |
| Text Decoration | Set the appearance of decorative lines on text by using the group of predefined buttons: specifies no line for the text specifies that the line will be displayed under the text specifies that the line will be displayed through the text. |
In the following example, a list has three list items with their item labels having different Position values (Fixed, Stacked, and Floating respectively). Also, switch to their Common tabs to set their Text properties to the corresponding values:
Then, add per one Input to every ListItem and set their Item Wrapped property to False:
Check out how the components with different positions behave in the app:
Item Options
Set the List Item component's Item Type property to Item Sliding to open Item Options:
The Item Options component offers selecting from three Sliding Side values: Start, End or Both.
Adding Item Options
Click the + button on the Item Options to add a new Item Option:
Use double-clicking on the element to hide/show options.
The Item Option component has the following common properties:
| Property Name | Property Description |
|---|---|
| Href | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. |
| Icon | Style - click No icon to change the icon style by selecting a needed icon. Name - allow changing Ionic icon style dynamically by property binding to "0-. Color - the icon CSS color. Select from the predefined value types (primary, secondary, tertiary, success, warning, danger, light, medium and dark) or enter your custom color name. Class - icon CSS classes. Slot - the position determines where and how the icon behaves inside an element: Start, Top, Icon Only, Bottom, or End. SVG Icon - select an .svg file. This path will be added as the src attribute.Click the Change button to select the uploaded image from Media Manager. |
| (click) | Action to be triggered when the option is clicked. |
Additionally, the following Item Option styling properties are grouped under the Styles tab:
| Property Name | Property Description |
|---|---|
| Expandable | If set to True, the option will expand to take up the available width and cover any other options. |
| Option Color | Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
| Text Color | Select CSS color from the available colors: Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium, Dark, and Custom or use the Color-picker. |
If you are interested in the detailed video tutorial that shows how to create a List - Details mobile application, please check this Appery.io Community link.
Updated 6 months ago