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

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

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

    <ActionBar title="{{ title }}" icon="">
        <Label text="{{ title }}" />
    </ActionBar>

    <GridLayout rows="auto, *, auto" verticalAlignment="top" class="modal-input">
        <Label text="{{ title }}" ios:visibility="collapsed" class="h3 modal-input__header" />
        <lv:RadListView
      row="1"
      items="{{ items }}"
      selectionBehavior="Press"
      itemSelected="onItemSelected"
      class="modal-input__list"
    >
            <lv:RadListView.listViewLayout>
                <lv:ListViewLinearLayout scrollDirection="Vertical" />
            </lv:RadListView.listViewLayout>

            <lv:RadListView.itemTemplate>
                <GridLayout class="modal-input__list-item">
                    <GridLayout android:visibility="collapsed" columns="*, auto">
                        <Label text="{{ value }}" />
                        <Label
              col="1"
              text="&#xf00c;"
              class="fas modal-input__list-check"
              visibility="{{ isSelected ? 'visible' : 'collapsed' }}"
            />
                    </GridLayout>

                    <GridLayout ios:visibility="collapsed" columns="auto, *">
                        <Label
              text="&#xf111;"
              class="far modal-input__list-icon"
              verticalAlignment="center"
              visibility="{{ isSelected ? 'collapsed' : 'visible' }}"
            />
                        <Label
              text="&#xf192;"
              class="far modal-input__list-icon selected"
              verticalAlignment="center"
              visibility="{{ isSelected ? 'visible' : 'collapsed' }}"
            />
                        <Label col="1" text="{{value}}" />
                    </GridLayout>
                </GridLayout>
            </lv:RadListView.itemTemplate>
        </lv:RadListView>
        <Button
      class="-outline"
      row="3"
      text="CANCEL"
      ios:visibility="collapsed"
      horizontalAlignment="right"
      tap="onCancelButtonTap"
    />
    </GridLayout>
</Page>