I'm new to nativescript. I just went over the tutorial and was able to make the barebones of an app that has a ScrollView like so:
<ScrollView (scroll)="onScroll($event)">
<GridLayout class="m-15" rows="auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto">
<Label class="h3 m-5" height="50" row="0" text="Title 1"></Label>
<Image class="h3 m-5" row="1" src="https://play.nativescript.org/dist/assets/img/NativeScript_logo.png" height="80" width="80"></Image>
<Label class="h3 m-5" height="50" row="2" text="Title 3"></Label>
<Label class="h3 m-5" height="50" row="3" text="Title 4"></Label>
<Label class="h3 m-5" height="50" row="4" text="Title 5"></Label>
<Label class="h3 m-5" height="50" row="5" text="Title 6"></Label>
<Label class="h3 m-5" height="50" row="6" text="Title 7"></Label>
<Label class="h3 m-5" height="50" row="7" text="Title 8"></Label>
<Label class="h3 m-5" height="50" row="8" text="Title 9"></Label>
<Label class="h3 m-5" height="50" row="9" text="Title 10"></Label>
<Label class="h3 m-5" height="50" row="10" text="Title 10"></Label>
<Label class="h3 m-5" height="50" row="11" text="Title 11"></Label>
<Label class="h3 m-5" height="50" row="12" text="Title 12"></Label>
<Label class="h3 m-5" height="50" row="13" text="Title 13"></Label>
<Label class="h3 m-5" height="50" row="14" text="Title 14"></Label>
<Label class="h3 m-5" height="50" row="15" text="Title 15"></Label>
</GridLayout>
</ScrollView>
However, I'd like to make it so that those elements are in a 2-column grid however I can't figure out how to do it without crashing the app. Can someone help me out please?
in rows in GridLayout you are missing comma between auto and for two columns you need to add columns parameter for example with asterisks or numbers or auto
<GridLayout class="m-15" columns="*,*" rows="auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto">
And in elements inside of GridLayout add col="0" or col="1" based on if it's first or second column
<Label class="h3 m-5" height="50" col="0" row="2" text="Title 3"></Label> //third row, first column
<Label class="h3 m-5" height="50" col="1" row="2" text="Title 4"></Label> //third row, second column
More in https://docs.nativescript.org/ui/layouts/layout-containers
Related
I'm new to NativeScript and just can't figure out how to load a plugin right.
As mentioned here, I added the plugin and from here, followed the steps for Core JS, but nothing seems to work.
I've tried with the RadListView and PullToRefresh so far but I keep hitting the same/similar roadblock. For the PullToRefresh plugin, the error I receive is as you see below.
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: Error: Building UI from XML. #screens/home/home-page.xml:32:11
JS: > Building UI from XML. #screens/orders/orders-items-page.xml:9:5
JS: > Module '#nstudio/nativescript-pulltorefresh' not found for element '#nstudio/nativescript-pulltorefresh:PullToRefresh'.
JS: > _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
I'm running a NativeScript Core JS sample project with minor cosmetic modifications. I'm not entirely sure what code to post up here for reference, but here goes
home-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<BottomNavigation>
<TabStrip>
<TabStripItem class="navigation__item">
<Label text="Orders"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="Inventory"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="Promotions"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<!-- <TabStripItem class="navigation__item"> <Label text="Analytics"/> <Image src="font://" class="fas t-36"/> </TabStripItem> -->
</TabStrip>
<TabContentItem>
<Tabs>
<TabStrip id="top-nav">
<TabStripItem>
<Label text="Current Orders"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Past Orders"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Frame defaultPage="screens/orders/orders-items-page"/>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/inventory/inventory-page"/>
</TabContentItem>
</Tabs>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/inventory/inventory-page"/>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/promotions/promotions-page"/>
</TabContentItem>
<!-- <TabContentItem> <Frame defaultPage="screens/analytics/analytics-page"/> </TabContentItem> -->
</BottomNavigation>
</Page>
orders-item-page.xml
<Page navigatingTo="onNavigatingTo" loaded="loaded" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:PullRefresh="#nstudio/nativescript-pulltorefresh">
<GridLayout rows="auto, *">
<FlexboxLayout flexDirection="row" justifyContent="space-around">
<Button class="" col="0" text="New Orders" tap="filter"></Button>
<Button class="" col="1" text="Preparing" tap="filter"></Button>
<Button class="" col="2" text="Ready for Pickup" tap="filter"></Button>
</FlexboxLayout>
<PullRefresh:PullToRefresh refresh="refreshList" indicatorFillColor="#fff000" indicatorColor="#3489db">
<ListView items="{{ orders }}" row="1">
<ListView.itemTemplate>
<GridLayout class="p-10 order-list-item" rows="auto, auto, auto, auto" columns="*, auto" androidElevation="5" margin="5" backgroundColor="white" borderRadius="10">
<FlexboxLayout flexDirection="row" row="0" colSpan="2" justifyContent="space-between">
<Label class="{{ 'status ' + status }}" text="{{ statusText }}" textTransform="uppercase"/>
<Label class="font-weight-bold" text="{{ 'Order to be Ready in ' + totalTime }}" fontSize="12"/>
</FlexboxLayout>
<FlexboxLayout class="m-t-10" flexDirection="row" row="1" colSpan="2" justifyContent="space-between">
<Label class="font-weight-bold" text="{{ '#' + number }}" fontSize="15"/>
<Label class="font-weight-bold" text="{{ '₹' + value }}" fontSize="15"/>
</FlexboxLayout>
<Label class="" text="{{ dateTime + ' | ' + itemsBrief }}" row="2" col="0" color="gray" fontSize="12"/>
<FlexboxLayout flexDirection="row" row="3" colSpan="2">
<Button flexGrow="1" class="text-center font-weight-bold" text="Mark Ready" tap="filter"></Button>
<Button flexGrow="1" class="text-center font-weight-bold" text="Mark Ready" tap="filter"></Button>
</FlexboxLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>
</PullRefresh:PullToRefresh>
<!-- <ActivityIndicator busy="{{ isLoading }}" row="1" horizontalAlignment="center" verticalAlignment="center"/> -->
</GridLayout>
</Page>
Faced an unpleasant problem
help me please
When trying to align to the bottom of the page, the IOS unit does not completely go down
iosOverflowSafeArea did not help
<GridLayout columns="*,*" rows="*" row="1" col="0" class="project-type-content" width="100%" [iosOverflowSafeArea]="true">
<StackLayout width="100%" row="0" [col]="i" *ngFor="let item of projectTypes; let i=index" class="debug" verticalalignment="bottom" [iosOverflowSafeArea]="true">
<StackLayout width="75%" (tap)="onProjectTypeChoose(item.urlPrefix)" class="debug" [iosOverflowSafeArea]="true">
<GridLayout columns="*" rows="auto, auto" height="auto">
<StackLayout class="btn-type-choose" col="0" row="0">
<ns-rounded-button fontColor="#fff" borderColor="#fff" color="#fff" [text]="item.title" [bg]="item.bg"
width="100%"></ns-rounded-button>
</StackLayout>
<StackLayout width="100%" col="0" row="1" class="project-type-item">
<Label [text]="item.subTitle" width="100%" class="project-type-item-title monserrat regular"></Label>
<!--<Image [src]="item.image" stretch="aspectFill" class="project-type-item-image"></Image>-->
<HtmlView [html]="item.description" width="100%"></HtmlView>
<Image src="~/assets/images/firstScreenShadow.png" width="100%" horizontalAlignment="center"></Image>
<Label text="What`s New:" class="whats-new-title monserrat semi-bold"></Label>
<Label *ngIf="item.updateText && item.updateText[0]" [text]="item.updateText[0]" class="project-type-item-wats monserrat regular"></Label>
<Label *ngIf="item.updateText && item.updateText[1]" [text]="item.updateText[1]" class="project-type-item-wats monserrat regular"></Label>
<StackLayout width="100%" class="tap-to-choose" height="20">
<Button text="Tap to choose" class="tap-to-choose-btn" width="60%"></Button>
</StackLayout>
</StackLayout>
</GridLayout>
</StackLayout>
</StackLayout>
</GridLayout>
http://prntscr.com/mww4y3
For displaying the grid view (4*4) in nativescript with Angular, I have integrated the npm "nativescript-grid-view" as per the example in npm site. But, It fails for me. I got the error whenever I enter that page in the application.
Error :
System.err: Error: Expecting a valid View instance.
System.err: File: "file:///data/data/com.domain.project/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js, line: 337, column: 12
Code .ts file
<GridLayout class="page">
<GridView [items]="order" colWidth="30%" rowHeight="100">
<ng-template let-item="item" let-odd="odd">
<StackLayout margin="10" [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
<Label verticalAlignment="center" [text]="item.productName" class="list-group-item-text" textWrap="true"></Label>
</StackLayout>
</ng-template>
</GridView>
</GridLayout>
module.ts
import { GridViewModule } from 'nativescript-grid-view/angular';
imports: [
NativeScriptModule,
NativeScriptHttpModule,
NativeScriptUIDataFormModule,
NativeScriptUIListViewModule,
GridViewModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
}
}),
...SHARED_MODULES
],....
Package.json
"tns-android": {
"version": "3.0.1"
},
"tns-ios": {
"version": "3.4.1"
}
.....
"typescript": "~2.2.0",....
Somebody has asked the question is below forum, but no one has replied.
https://discourse.nativescript.org/t/dynamic-gridlayout-from-array-angular/1675
Or you could use nativescript-ui-listview and its ListViewGridLayout with spanCount property. The official documentation for this functionality is here. Basically, you could do the following:
<RadListView [items]="dataItems">
<ng-template tkListItemTemplate let-item="item">
<!-- item template here -->
</ng-template>
<ListViewGridLayout tkListViewLayout spanCount="4" scrollDirection="Vertical" ios:itemHeight="200" ></ListViewGridLayout>
</RadListView>
NativeScript 4X4 GridLayout
I have written some code in the nativescript playground link.
**
https://play.nativescript.org/?template=play-ng&id=a8UEDd
**
<GridLayout rows="*,*,*,*" columns="*,*,*,*">
<Label text="1" row="0" col="0" borderColor="black" borderWidth="1"></Label>
<Label text="2" row="0" col="1" borderColor="black" borderWidth="1"></Label>
<Label text="3" row="0" col="2" borderColor="black" borderWidth="1"></Label>
<Label text="4" row="0" col="3" borderColor="black" borderWidth="1"></Label>
<Label text="5" row="1" col="0" borderColor="black" borderWidth="1"></Label>
<Label text="6" row="1" col="1" borderColor="black" borderWidth="1"></Label>
<Label text="7" row="1" col="2" borderColor="black" borderWidth="1"></Label>
<Label text="8" row="1" col="3" borderColor="black" borderWidth="1"></Label>
<Label text="9" row="2" col="0" borderColor="black" borderWidth="1"></Label>
<Label text="10" row="2" col="1" borderColor="black" borderWidth="1"></Label>
<Label text="11" row="2" col="2" borderColor="black" borderWidth="1"></Label>
<Label text="12" row="2" col="3" borderColor="black" borderWidth="1"></Label>
<Label text="13" row="3" col="0" borderColor="black" borderWidth="1"></Label>
<Label text="14" row="3" col="1" borderColor="black" borderWidth="1"></Label>
<Label text="15" row="3" col="2" borderColor="black" borderWidth="1"></Label>
<Label text="16" row="3" col="3" borderColor="black" borderWidth="1"></Label>
</GridLayout>
Preview of the 4x4 GridLayout will be like this
Below code does work without using nativeoscript-grid-view. I think that nativescript version is the problem.
<ScrollView class="plansScroll" #plansScroll orientation="vertical" horizontalAlignment="center" width="100%">
<WrapLayout orientation="horizontal" [id]="myIndex" (tap)="onPlanSectionTap($event)" class="plansScrollGrid m-5" #plansScrollGrid>
<StackLayout *ngFor='let item of order; let myIndex = index' width="25%">
<!-- <Image [src]="item.imagePath" width="80"></Image> -->
<Image width="80" [src]="'~/assets/img/bratShop-overlay.jpg'"></Image>
<Label [text]='item.productName' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
<Label [text]='item.orderNumber' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
<Label [text]='item.orderStatus' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
<Label [text]='item.orderDate' textWrap="true" horizontalAlignment="center" verticalAlignment="center" #plansScrollGridType></Label>
</StackLayout>
</WrapLayout>
<StackLayout width="100%" *ngFor="let item of (videos$ | async)">
<CardView class="studentCard" margin="2" elevation="10" radius="1">
<GridLayout rows="auto, auto, auto" columns="auto, auto, *">
<Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"></Image>
<Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" ></Label>
<Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" >></Label>
</GridLayout>
</CardView>
</StackLayout>
I tried to wrap it in ScrollView, didn't work.
I couldn't make (items$ | async) work with ListView either, seems ngFor can't work with ListView, we need ng-template for ListView.
I tried the following but only the first item is rendering
<ScrollView>
<ListView [items]="videos$ | async" class="list-group">
<ng-template let-item="item">
<GridLayout class="list-group-item">
<Image [src]="item.snippet.thumbnails.high.url"></Image>
<Label [text]="item.snippet.channelTitle" ></Label>
<Label [text]="item.snippet.title">></Label>
</GridLayout>
</ng-template>
</ListView>
</ScrollView>
Wraping the entire code first with StackLayout then with ScrollView worked
<ScrollView>
<StackLayout>
<StackLayout width="100%" *ngFor="let item of (videos$ | async)">
<CardView class="studentCard" margin="2" elevation="10" radius="1">
<GridLayout rows="auto, auto, auto" columns="auto, auto, *">
<Image [src]="item.snippet.thumbnails.high.url" stretch="aspectFill" colSpan="3" row="0"></Image>
<Label [text]="item.snippet.channelTitle" textWrap="true" row="2" colSpan="1" ></Label>
<Label [text]="item.snippet.title" textWrap="true" row="2" col="1" colSpan="2" >></Label>
</GridLayout>
</CardView>
</StackLayout>
</StackLayout>
</ScrollView>
I am trying to replicate a table using a ListView. Displaying the table's cell content works fine but when I add another GridLayout wrapped in a StackLayout above the Listview the Listview doesn't get displayed at all... Any idea why this might be happening? I tried as well to add the table headers to the ListView using nsTemplateKey but still get the same issue where the headers show but no table body content. When I remove the top GridLayout containing the headers the Listview's content displays perfectly as it should for some reason...
my code:
//headers
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
//listview containing the table body
<StackLayout *ngIf="stockTakeDetailList.length > 0 && !product">
<ListView [items]="stockTakeDetailList">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
Try encapsulating all of the code within a StackLayout:
<StackLayout>
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
<StackLayout *ngIf="stockTakeDetailList.length > 0 && !product">
<ListView [items]="stockTakeDetailList">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>
</StackLayout>
Maybe try without the extra stack layouts:
<StackLayout>
<StackLayout class="m-b-10">
<GridLayout rows="*" columns="*, *, *" *ngIf="stockTakeDetailList.length > 0 && !product">
<Label row="0" col="0" text="Name"></Label>
<Label row="0" col="1" text="Qty"></Label>
<Label row="0" col="2" text="Action"></Label>
</GridLayout>
</StackLayout>
<ListView [items]="stockTakeDetailList" *ngIf="stockTakeDetailList.length > 0 && !product">
<template let-captureItem="item" let-i="index">
<GridLayout rows="*" columns="*, *, *">
<Label row="0" col="0" class="list-group-item" textWrap="true" [text]="captureItem.ProductDetail_Name"></Label>
<Label row="0" col="1" class="list-group-item" [text]="captureItem.Qty"></Label>
<Label row="0" col="2" class="list-group-item font-awesome" text="" (tap)="removeCaptureItem(i)"></Label>
</GridLayout>
</template>
</ListView>
</StackLayout>