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 theRouting* panel. Route Params- adds values forRoute Paramsdescribed in theRouting* panel. Router Direction- when using a router, it specifies the transition direction when navigating to another page usinghref: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 anhrefis 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- clickNo 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,mediumanddark) 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, orEnd. SVG Icon- select an`.svg` file. This path will be added as the `src` attribute. Click the Changebutton to select the uploaded image fromMedia 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.