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

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

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

    <ActionBar>
        <NavigationButton tap="onBackButtonTap" android.systemIcon="ic_menu_back" />
        <Label text="{{ car.name }}" horizontalAlignment="center" />
        <ActionItem tap="onEditButtonTap" ios.position="right" android.position="right">
            <Label text="Edit" verticalAlignment="center" />
        </ActionItem>
    </ActionBar>

    <GridLayout>
        <ScrollView>
            <GridLayout rows="auto, auto, auto">
                <Image src="{{ car.imageUrl }}" stretch="aspectFill" height="200" class="m-b-15" />

                <StackLayout row="1" class="hr m-y-15" />

                <GridLayout row="2" rows="*, *, *, *, *, *" columns="auto, auto">
                    <Label text="Price" class="p-l-15 p-b-10 m-r-20" />
                    <Label col="1" class="p-b-10">
                        <FormattedString>
                            <Span text="€" />
                            <Span text="{{ car.price }}" />
                            <Span text="/day" />
                        </FormattedString>
                    </Label>

                    <Label text="Class" row="1" class="p-l-15 p-b-10 m-r-20" />
                    <Label text="{{ car.class }}" row="1" col="1" class="p-b-10" />

                    <Label text="Doors" row="2" class="p-l-15 p-b-10 m-r-20" />
                    <Label text="{{ car.doors }}" row="2" col="1" class="p-b-10" />

                    <Label text="Seats" row="3" class="p-l-15 p-b-10 m-r-20" />
                    <Label text="{{ car.seats }}" row="3" col="1" class="p-b-10" />

                    <Label text="Transmission" row="4" class="p-l-15 p-b-10 m-r-20" />
                    <Label text="{{ car.transmission }}" row="4" col="1" class="p-b-10" />

                    <Label text="Luggage" row="5" class="p-l-15 p-b-10 m-r-20" />
                    <Label text="{{ car.luggage }}" row="5" col="1" class="p-b-10" />
                </GridLayout>
            </GridLayout>
        </ScrollView>
    </GridLayout>
</Page>