diff --git a/content/docs/en/elements/components/list-view.md b/content/docs/en/elements/components/list-view.md index 3445c2db..304150a7 100644 --- a/content/docs/en/elements/components/list-view.md +++ b/content/docs/en/elements/components/list-view.md @@ -1,56 +1,86 @@ --- title: ListView apiRef: https://docs.nativescript.org/api-reference/classes/_ui_list_view_.listview -contributors: [MisterBrownRSA, rigor789, eddyverbruggen] +contributors: [MisterBrownRSA, rigor789, eddyverbruggen, ikoevska] --- -The ListView component shows items in a vertically scrolling list. You can set different `v-template`'s to specify how each item in the list should be displayed. - ---- +`` is a UI component that shows items in a vertically scrolling list. To set how the list shows individual items, you can use the `` component. ```html + + +``` + +--- + +[> screenshots for=ListView <] + +## Using `` with multiple `` blocks + +The [`v-template` component](/en/docs/utilities/v-template) is used to define how each list item is shown on the screen. + +If you need to visualize one or more list items differently than the rest, you can enclose them in additional `` blocks and use conditions. You can have as many `` blocks as needed within one ``. + +```html + + + + ``` -In the above example the second template will be used if the item's index is odd. -For convenience you can use `$index`, `$even` and `$odd` helpers, but as needed you can use any valid javascript expression for a `v-template`'s `if` condition. +When you create conditions for ``, you can use any valid JavaScript expression or any of the following helpers: + +* `$index`— the index of the current item +* `$even`—`true` if the index of the current item is even +* `$odd`—`true` if the index of the current item is odd + +## An important note about `v-for` -To learn more about the `v-template` component, head over to the [`v-template` documentation](/en/docs/utilities/v-template). +`` does not loop through list items as you would expect when using a [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) loop. Instead `` only creates the necessary views to display the currently visible items on the screen, and reuses the views that are already off-screen when scrolled. This concept is called _view recycling_ and is commonly used in mobile apps to improve performance. -The ListView does not loop through the items as you would expect when using a [`v-for`](https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for) loop. Instead it only creates the necessary views to display the currently visible items on the screen, and when scrolling it reuses the views that are already off-screen. This concept is called view recycling, and is commonly used in mobile applications to improve performance. This is important because you can't rely on event listeners attached inside the `v-template`, instead you should use the `itemTap` event which contains the index of the tapped item, as well as the actual item from the list. +This is important because **you can't rely on event listeners attached inside the `v-template`**. Instead, you need to use the `itemTap` event which contains the index of the tapped item and the actual item from the list. -```js +```javascript onItemTap(event) { console.log(event.index) console.log(event.item) } ``` -[> screenshots for=ListView <] +**Note:** if a `v-for` is used on a `` a warning will be printed to the console, and it will be converted to the `for` property. ## Props -| name | type | description | +| Name | Type | Description | |------|------|-------------| -| `for` | `String` | The expression for iterating through the items, examples:
- `item in listOfItems`
- `(item, index) in listOfItems`
- `item in [1, 2, 3, 4, 5]` -| `items` | `Array` | An array of items to be displayed in the ListView. **Note**: This property is only for advanced use, we recommend using the `for` property in most cases. -| `separatorColor` | `Color` | Set the separator line color. Set to `transparent` to remove it. +| `for` | `String` | Provides the expression for iterating through the items.
For example:
  • item in listOfItems
  • (item, index) in listOfItems
  • item in [1, 2, 3, 4, 5]
+| `items` | `Array` | An array of items to be shown in the ``.
**This property is only for advanced use. Use the `for` property instead.** +| `separatorColor` | `Color` | Sets the separator line color. Set to `transparent` to remove it. ## Events -| name | description | +| Name | Description | |------|-------------| -| `itemTap`| Emitted when an item in the ListView has been tapped. To access the tapped item use `event.item`. +| `itemTap`| Emitted when an item in the `` is tapped. To access the tapped item, use `event.item`. + +## Methods + +| Name | Description | +|------|-------------| +| `refresh()` | (Coming soon) Forces the `` to reload all its items. + +## Native component -## Native Component | Android | iOS | |---------|-----| -| android.widget.ListView | UITableView +| [`android.widget.ListView`](https://developer.android.com/reference/android/widget/ListView.html) | [`UITableView`](https://developer.apple.com/documentation/uikit/uitableview)