The Problem
I have a page that is a slider, simply displays an image, and you slide left or right to get to the next/previous.
What I am trying to do, is at the bottom of the screen overlay a panel where I can enter some text describing the image.
Here is my XML:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ns="nativescript-carousel">
<Page.actionBar>
<ActionBar title="Customer On Boarding" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="">
<ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
<ns:CarouselItem class="slides slides-1" id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
<Label backgroundRepeat="no-repeat" text="Step 1" backgroundColor="#50000000" horizontalAlignment="center" />
<!-- Dock Bottom -->
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-2" id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
<Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-3" id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
<Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-4" id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
<Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
</ns:Carousel>
</StackLayout>
</Page>
and here is a screenshot:
At the bottom I would like a 100% width, roughly 100px high, bordered 'panel' I can add some text.
Does anyone have any ideas? I tried Dock Failed miserably. Ugh.
Thank You for looking.
John
You can use the GridLayout like the example below
<GridLayout columns="*" rows=auto, * " backgroundColor="lightgray ">
<StackLayout class=" row=" 0">
<ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
<ns:CarouselItem class="slides slides-1" id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
<Label backgroundRepeat="no-repeat" text="Step 1" backgroundColor="#50000000" horizontalAlignment="center" />
<!-- Dock Bottom -->
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-2" id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
<Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-3" id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
<Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-4" id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
<Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
</ns:Carousel>
</StackLayout>
<StackLayout row="1">
// add text panel here
</StackLayout>
</GridLayout>
The ScrollView isUserInteractionEnabled parameter doesn't behave the same on NativeScript runtime version 5.0.0 as it did on 4.2.0 for Android.
No script files required. All you need is this XML to observe this problem:
<Page class="page" xmlns="http://www.nativescript.org/tns.xsd">
<ActionBar title="Horizontal Scroll Bug" class="action-bar">
</ActionBar>
<StackLayout>
<Label text="ScrollView's isUserInteractionEnabled property is false."
padding="10" textWrap="true" fontSize="20" />
<ScrollView id="horizontalScroll" orientation="horizontal" isUserInteractionEnabled="false">
<StackLayout orientation="horizontal">
<StackLayout backgroundColor="yellow">
<Label text="Box 1" padding="70" />
</StackLayout>
<StackLayout backgroundColor="red">
<Label text="Box 2" padding="70" />
</StackLayout>
<StackLayout backgroundColor="blue">
<Label text="Box 3" padding="70" />
</StackLayout>
<StackLayout backgroundColor="green">
<Label text="Box 4" padding="70" />
</StackLayout>
<StackLayout backgroundColor="purple">
<Label text="Box 5" padding="70" />
</StackLayout>
<StackLayout backgroundColor="orange">
<Label text="Box 6" padding="70" />
</StackLayout>
</StackLayout>
</ScrollView>
<Label text="Try to scroll the colored boxes above to the right and left to reveal more boxes. You shouldn't be able to."
padding="10" textWrap="true" fontSize="20" />
<Label text="On Android with run time version 4.2.0 you can't, but on run time version 5.0.0 you can."
padding="10" textWrap="true" fontSize="20" />
</StackLayout>
</Page>
I posted the app on NativeScript playground here if you want to scan the QR code:
https://play.nativescript.org/?template=play-js&id=hKrNlK
Disable scroll when isUserInteractionEnabled is set to false - This seems to be a behavioural change introduced in {N} 5.x. At same time I'm unsure whether this was intentional, you might want to report this at Github.
Meanwhile you may use this workaround.
I am creating a Horizontal scroll in NS. When using below code it's working as expected.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onPageLoad" class="page">
<StackLayout>
<!-- This is where the magic happens -->
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal" class="scroll-menu">
<StackLayout class="scroll-pane">
<Button text="Button" />
</StackLayout>
<StackLayout class="scroll-pane">
<Button text="Button" />
</StackLayout>
<StackLayout class="scroll-pane">
<Button text="Button" />
</StackLayout>
<StackLayout class="scroll-pane">
<Button text="Button" />
</StackLayout>
</StackLayout>
</ScrollView>
</StackLayout>
Horizontal Scroll:
But, Once I am using the Repeater it's changing to orientation with Vertical and not scrolling.
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onPageLoad" class="page">
<StackLayout>
<!-- This is where the magic happens -->
<ScrollView orientation="horizontal">
<StackLayout orientation="horizontal" class="scroll-menu">
<Repeater items="{{ categories }}" >
<Repeater.itemTemplate>
<StackLayout class="scroll-pane" >
<Label text="{{name}}" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</ScrollView>
</StackLayout>
Change to Vertical when use of Repeater:
What's wrong with the code?
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>
I have a simple login form with two fields username and pass. Using behaviours I implemented email validation (not empty, valid email) and pass validation (not empty)
<StackLayout Padding="30" VerticalOptions="CenterAndExpand" Spacing="15">
<Entry Text="{Binding Email}" Keyboard="Email" IsEnabled="{Binding IsNotBusy}" Placeholder="Email address">
<Entry.Behaviors>
<local:EntryValidatorBehavior IsCheckEmail="true" ValidateFromStart="false" IsCheckEmpty="true" x:Name="emailValidator" />
</Entry.Behaviors>
</Entry>
<Label Text="{Binding Source={x:Reference emailValidator}, Path=Message}" />
<Entry Text="{Binding Password}" IsPassword="true" IsEnabled="{Binding IsNotBusy}" Placeholder="Password">
<Entry.Behaviors>
<local:EntryValidatorBehavior ValidateFromStart="false" IsCheckEmpty="true" x:Name="passwordValidator">
</local:EntryValidatorBehavior>
</Entry.Behaviors>
</Entry>
<Label Text="{Binding Source={x:Reference passwordValidator}, Path=Message}" />
<StackLayout Orientation="Horizontal">
<Button Text="Forgot Password?" Command="{Binding ForgotButton}" TextColor="White" HeightRequest="40" VerticalOptions="End">
</Button>
<Button HorizontalOptions="EndAndExpand" Text="Sign In" Command="{Binding LoginButton}" TextColor="White" BackgroundColor="#f50057" HeightRequest="40" WidthRequest="100">
</Button>
</StackLayout>
</StackLayout>
This works perfectly, but at the bottom of the form I have a Login button which should be hidden as long as both email and password are not valid.
How can this be implemented? I was thinking by using Triggers
<Button HorizontalOptions="EndAndExpand" Text="Sign In" Command="{Binding LoginButton}" TextColor="White" BackgroundColor="#f50057" HeightRequest="40" WidthRequest="100" IsVisible="false">
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<MultiTrigger TargetType="Button">
<MultiTrigger.Conditions>
<BindingCondition Binding="{Binding Source={x:Reference emailValidator}, Path=IsValid}" Value="True" />
<BindingCondition Binding="{Binding Source={x:Reference passwordValidator}, Path=Text.IsValid}" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="IsVisible" Value="True" />
</MultiTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
but this doesn't work.
Thanks in advance!