tns-template-master-detail-kinvey-ts

Version:

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

github.com/NativeScript/nativescript-app-templates

38 lines (33 loc) • 2.05 kB

text/xml

<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>