@nativescript/template-master-detail/app/cars/cars-list-page.xml

Master-detail interface to display collection of items from json collection and inspect and edit selected item properties.

<Page
  navigatingTo="onNavigatingTo"
  xmlns:lv="nativescript-ui-listview"
  xmlns="http://schemas.nativescript.org/tns.xsd"
>

    <ActionBar>
        <!-- Should remove the navigation button -->
        <NavigationButton ios:visibility="collapsed" />
        <Label text="Browse" horizontalAlignment="center" />
    </ActionBar>

    <GridLayout>
        <lv:RadListView items="{{ cars }}" itemTap="onCarItemTap" class="cars-list">
            <lv:RadListView.listViewLayout>
                <lv:ListViewLinearLayout scrollDirection="Vertical" />
            </lv:RadListView.listViewLayout>

            <lv:RadListView.itemTemplate>
                <StackLayout class="cars-list__item">

                    <GridLayout rows="*, *, *" columns="*, *" class="cars-list__item-content">
                        <Label text="{{ name }}" class="font-weight-bold cars-list__item-name" />
                        <Label col="1" horizontalAlignment="right">
                            <FormattedString>
                                <Span text="€" />
                                <Span text="{{ price }}" />
                                <Span text="/day" />
                            </FormattedString>
                        </Label>

                        <StackLayout row="1" class="hr m-y-5" colSpan="2" />

                        <Image
              row="2"
              src="{{ imageUrl }}"
              stretch="aspectFill"
              height="120"
              class="m-r-20"
            />

                        <StackLayout row="2" col="1" verticalAlignment="center">
                            <Label class="p-b-10">
                                <FormattedString ios:fontFamily="system">
                                    <Span text="&#xf1b9;    " class="fas cars-list__item-icon" />
                                    <Span text="{{ class }}" />
                                </FormattedString>
                            </Label>
                            <Label class="p-b-10">
                                <FormattedString ios:fontFamily="system">
                                    <Span text="&#xf085;   " class="fas cars-list__item-icon" />
                                    <Span text="{{ transmission }}" />
                                    <Span text=" Transmission" />
                                </FormattedString>
                            </Label>
                            <Label class="p-b-10">
                                <FormattedString ios:fontFamily="system">
                                    <Span text="&#xf2dc;    " class="fas cars-list__item-icon" />
                                    <Span text="{{ hasAC ? 'Yes' : 'No' }}" />
                                </FormattedString>
                            </Label>
                        </StackLayout>
                    </GridLayout>

                </StackLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>

        <ActivityIndicator busy="{{ isLoading }}" />
    </GridLayout>
</Page>