📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Cards

Cards

<ListView class="list-group" [items]="countries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
    <ng-template let-country="item">
        <GridLayout rows="* auto" columns="*" class="list-group-item active" style="border:1;"> 
            <Image row="0" col="0" [src]="country.imageSrc"></Image>
            <StackLayout row="1" col="0" backgroundColor="white" class="list-group-item">
                <Label class="list-group-item-heading" [text]="country.name"></Label>
                <Label class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>      
            </StackLayout>
        </GridLayout>
    </ng-template>
</ListView>

Cards with thumbnails

<ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)" >
    <ng-template let-country="item">
        <StackLayout orientation="horizontal" class="list-group-item">
            <Image row="0" col="0" rowSpan="2" height="108" width="108"  [src]="country.imageSrc" class="thumb p-16"></Image>
            <GridLayout class="list-group-item" rows="auto *" columns="*">
                <Label row="0" col="0" [text]="country.name" class="list-group-item-heading"></Label>
                <Label row="1" col="0" class="list-group-item-text" [text]="'Continent: '+country.continent "></Label>   
            </GridLayout>
        </StackLayout>
    </ng-template>
</ListView>

Initializing the data Items

@Component({
    moduleId: module.id,
    templateUrl: "./cards-listview.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class CardsListViewExampleComponent {
    public countries: ObservableArray<any>;

    constructor() {
        this.countries = new ObservableArray(mockedDataArray);
    }

    onItemTapFirstList(args) {
        console.log(args.index);
    }

    onItemTapSecondList(args) {
        console.log(args.index);
    }

    onItemTapThirdList(args) {
        console.log(args.index);
    }
}