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

NativeScript Core

Userprofile

User Feed

User Profile: User Feed

<GridLayout rows="auto *" sdkExampleTitle sdkToggleNavButton>
    <GridLayout row="0" rows="auto auto" backgroundColor="#adadad">

        <Image row="0" width="100%" height="150" stretch="aspectFill" src="~/common-screens-category/userprofile/user-feed/images/nativescript.png"></Image>

        <GridLayout row="0" rowSpan="2" rows="auto auto auto" columns="* auto" verticalAlignment="bottom" class="m-t-25">
            <Image row="0" col="0" src="res://icon" height="40" width="40" class="m-l-15" horizontalAlignment="left" borderWidth="1"
                borderColor="white"></Image>
            <Label row="1" col="0" text="NativeScript" class="text-left p-l-15" textWrap="true"></Label>
            <Label row="2" col="0" text="Angular-2" class="text-left p-l-15" textWrap="true"></Label>
            <Button row="0" col="1" text="Follow" (tap)="followTap()" class="btn btn-outline btn-rounded-sm btn-active"></Button>
        </GridLayout>
    </GridLayout>

    <TabView row="1" #tabView class="tab-view">
        <GridLayout *tabItem="{title: 'BasicList'}">
            <ListView class="list-group" [items]="countries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
                <ng-template let-country="item">
                    <StackLayout 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>
                </ng-template>
            </ListView>
        </GridLayout>
        <GridLayout *tabItem="{title: 'Dividers'}">
            <ListView class="list-group" [items]="countries" (itemTap)="onItemTapSecondList($event)" separatorColor="gray">
                <ng-template let-country="item">
                    <StackLayout 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>
                </ng-template>
            </ListView>
        </GridLayout>
        <GridLayout *tabItem="{title: 'Thumbnails'}">
            <ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)">
                <ng-template let-country="item">
                    <GridLayout class="list-group-item" rows="* *" columns="auto, *">
                        <Image row="0" col="0" rowSpan="2" [src]="country.imageSrc" class="thumb img-circle"></Image>
                        <Label row="0" col="1" [text]="country.name" class="list-group-item-heading"></Label>
                        <Label row="1" col="1" class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>
                    </GridLayout>
                </ng-template>
            </ListView>
        </GridLayout>
    </TabView>

</GridLayout>

Initializing the data Items

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

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

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

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

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

    public followTap() {
        console.log("follow button");
    }
}

Improve this document

Demo Source


User Feed Images

User Profile: User Feed Images

<GridLayout row="0" col="0" rows="80 auto auto auto" class="p-l-30 p-r-30">
    <Image row="0" src="res://icon" borderRadius="10" width="80" height="80" class=" m-t-5"></Image>
    <Label row="1" text="NativeScript" class="h3 text-center" textWrap="true"></Label>
    <Label row="2" text="Cross-platform framework" class="h4 text-center" textWrap="true"></Label>
    <Button row="3" text="Follow" (tap)="followTap()" class=" btn btn-outline btn-rounded-sm btn-active"></Button>
</GridLayout>
<GridLayout row="1" col="0">
    <TabView class="tab-view">
        <GridLayout *tabItem="{title: 'Countries'}">
            <ListView class="list-group" [items]="countries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
                <ng-template let-country="item">
                    <GridLayout rows="* auto" columns="*" class="list-group-item" 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>
                        </StackLayout>
                    </GridLayout>
                </ng-template>
            </ListView>
        </GridLayout>
        <GridLayout *tabItem="{title: 'With continents'}">
            <ListView class="list-group" [items]="countries" (itemTap)="onItemTapSecondList($event)" separatorColor="white">
                <ng-template let-country="item">
                    <GridLayout rows="* auto" columns="*" class="list-group-item" 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>
        </GridLayout>
    </TabView>
</GridLayout>

Initializing the data Items

Improve this document

Demo Source


User Settings Menu

User Profile: User Settings Manu

<GridLayout rows="auto *" columns="*" sdkExampleTitle sdkToggleNavButton>
    <GridLayout row="0" col="0" rows="* *" backgroundColor="#adadad">
        <StackLayout row="0" backgroundColor="#30bcff">
        </StackLayout>
        <StackLayout row="0" rowSpan="2" class="p-t-15">
            <StackLayout class="m-20 p-l-15 p-r-15">
                <Image src="res://icon" height="80" width="80" class="img-circle" borderWidth="1" borderColor="white"></Image>
                <Label text="NativeScript" class="h2 text-center" textWrap="true"></Label>
                <Label text="Cross-platform framework" class="h4 text-center" textWrap="true"></Label>
            </StackLayout>
        </StackLayout>
    </GridLayout>
    <GridLayout row="1" col="0">
        <ListView class="list-group" [items]="countries" (itemTap)="onItemTap($event)" separatorColor="#adadad">
            <ng-template let-country="item">
                <StackLayout class="list-group-item">
                    <Label [text]="country.name"></Label>
                </StackLayout>
            </ng-template>
        </ListView>
    </GridLayout>
</GridLayout>

Initializing the data Items

@Component({
    moduleId: module.id,
    templateUrl: "./user-settings-menu.component.html",
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserSettingsMenuExampleComponent implements OnInit {
    public countries: ObservableArray<any>;

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

    public onItemTap(args: ItemEventData) {
        console.log(args.index);
    }
}

Improve this document

Demo Source