I try out Svelte Native and I try to hide "tags" with booleans. I try this, which works in the normal Svelte framework like:
{#if po.id !== null || po.id !== undefined}
<flexboxLayout flexWrap="wrap" class="v-a-c t-a-c" >
<label text="first" width="70%" backgroundColor="#63c3d0" class="m6"></label>
<label text="second" width="70%" backgroundColor="#63c3d0" class="m6"></label>
<label text="third" width="70%" backgroundColor="#63c3d0" class="m6"></label>
</flexboxLayout>
{:else }
<stackLayout flexWrap="wrap" class="v-a-c t-a-c">
<textField bind:text="{personName}" class="m6 new-person" ></textField>
<button text="add new value" on:tap="{createNewPlayer}" />
</stackLayout>
{/if}
So why it doesn't work? What am I doing wrong?
Related
Why does this following code produce this result: https://imgur.com/a/lQhLs8o ?
However, if I move the BottomNavigatorBar component to top position before CountryListComponent, it produces the desired result that looks like this: https://imgur.com/a/23z7bb2 ?
<template>
<Page actionBarHidden="true">
<DockLayout height="100%">
// first
<CountryListComponent dock="top">
// second
<BottomNavigationBar dock="bottom" activeColor="pink"
inactiveColor="yellow"
backgroundColor="black"
verticalAlignment="bottom"
#tabSelected="this.changeTab"
row="1">
<BottomNavigationTab title="Fiaarst" icon="icon-29.png" />
<BottomNavigationTab title="Second" icon="icon-29.png" />
<BottomNavigationTab title="Third" icon="icon-29.png" />
</BottomNavigationBar>
</DockLayout>
</Page>
</template>
CountryListComponent
<template>
<StackLayout backgroundColor="blue">
</StackLayout>
</template>
Refer the DockLayout documentation, by default stretchLastChild will be true which means BottomNavigationBar will take entire space if it's last child and vice versa.
i try beloved code but dos't work in android can't get new line
<TextView style="margin-top: 15px" borderColor="#DEDEDE" borderWidth="1"
height="100px" hint="Enter Note" returnKeyType="send" class="input input-border"></TextView>
<Button text="ADD" (tap)="insertNote()"></Button>
Use height attribute without 'px' unit like this :
<TextView style="margin-top: 15px" borderColor="#DEDEDE" borderWidth="1" height="100" hint="Enter Note" returnKeyType="send" class="input input-border"/>
Or give greater value for height in pixel : 200px
how to make a radautocompletetextview with prefilled using nativescript-angular?
This is how i am trying to do it:
HTML:
<RadAutoCompleteTextView id="rice-cake" (didAutoComplete)="onTokenSelected($event)" marginTop="40px" style="border-width:0.5;border-radius:5px;border-color:#E6E6E6;"
#autocmp [items]="dataItems" suggestMode="Suggest" displayMode="Plain">
<SuggestionView tkAutoCompleteSuggestionView suggestionViewHeight="150">
`enter code here`<ng-template tkSuggestionItemTemplate let-item="item">
<StackLayout orientation="vertical" padding="10">
<Label [text]="item.text"></Label>
</StackLayout>
</ng-template>
</SuggestionView>
</RadAutoCompleteTextView>
TypeScript:
this.autocomplete =
<RadAutoCompleteTextView>view.getViewById(this.page,"rice-cake");
console.log(JSON.stringify(this.autocomplete))
var token = new TokenModel(_result.dish, undefined);
this.autocomplete.addToken(token)
You may want to check this out:
https://github.com/telerik/nativescript-ui-feedback/issues/323
I'm using Telerik UI plugin in my NativeScript app for implementing drawer functionality.I'm following this tutorial for this - https://www.nativescript.org/blog/details/using-cross-platform-native-sidedrawer-component-in-nativescript
Here is my Code-
import {Component} from "#angular/core";
import listViewModule = require("nativescript-telerik-ui/listview");
import drawerModule = require("nativescript-telerik-ui/sidedrawer");
#Component({
selector: "my-app",
template: `
<drawer:SideDrawer id="drawer1">
<drawer:SideDrawer.mainContent>
<!-- Place your page content here -->
<StackLayout>
<Label text="Tap the button" class="title"></Label>
<Button text="TAP" (tap)="onTap()"></Button>
<Label [text]="message" class="message" textWrap="true"></Label>
</StackLayout>
<StackLayout>
<Button tap="openDrawer" text="ToggleDrawer"/>
</StackLayout>
</drawer:SideDrawer.mainContent>
<drawer:SideDrawer.drawerContent>
<StackLayout cssClass="drawerContent">
<StackLayout cssClass="headerContent">
<Label text="Drawer Header"/>
</StackLayout>
<StackLayout cssClass="drawerMenuContent">
<Label text="Item 1"/>
<Label text="Item 2"/>
<Label text="Item 3"/>
<Label text="Item 4"/>
</StackLayout>
</StackLayout>
</drawer:SideDrawer.drawerContent>
</drawer:SideDrawer>
`,
})
export class AppComponent {
public counter: number = 16;
public get message(): string {
if (this.counter > 0) {
return this.counter + " taps left";
} else {
return "Hoorraaay! \nYou are ready to start building!";
}
}
public onTap() {
this.counter--;
}
}
When I'm running this in my Emulator I'm getting a blank page. I'm using AngularJS2 with typescript & totally new to both these tools. So, can't able to understand what's I'm doing wrong.
Need some Guide.
nativescript-telerik-ui\listview and sidedrawer was before 2.0.0-rc.1 so they are currently working on it you can check this link - https://github.com/telerik/nativescript-ui-samples-angular/issues/1#issuecomment-225791969
if you are using beta version of angular then check this link to repository - https://github.com/telerik/nativescript-ui-samples-angular/tree/release/sdkAngular/app/sidedrawer
first of all: I am practicing with titanium, this are just my first "Hello World" apps to get confident with the framework, so any suggestion would be strongly appreciated.
I have this simple view:
<ScrollView id="grid" dataCollection="pictures">
<View class="single-item" title="{title}" author="{author}" desc="{desc}" onClick="showPic">
<ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
<Label class="title" text="{title} by {author}" />
<Label class="desc" text="{desc}" />
</View>
</ScrollView>
Clicking on each item I call the function showPic() defined in my controller, and that's ok. But I would like to pass some parameters to that function, that are {title}, {author} and {desc}, so that I can handle them and "print" them on a new detail view for each specific item. With TableView it was easy (I just put: event.source -> title, event.source -> author ... inside my controller and I could read that table row data), but with my view that seems not work.
so my questions are:
1) how can I pass that parameters from VIEW: to CONTROLLER showPic()
2) generally speaking, if there is a better view to list some objects and opening each one with a click, just tell me how so that I can learn something more :D (PS: I cannot use tableView because my layout does not fit with this kind view)
---- EDIT: here follows my full code
index.xml:
<Alloy>
<Collection src="pictures"/>
<NavigationWindow id="navGroupWin">
<Window class="container" title="La mia galleria">
<View class="arrow arrow-up"><Label text="UP" /></View>
<ScrollView id="grid" dataCollection="pictures">
<View class="single-item" title="{title}" author="{author}" desc="{desc}" onClick="showPic">
<ImageView class="thumb" image="/images/thumb-stock-1.jpg" />
<Label class="title" text="{title} by {author}" />
<Label class="desc" text="{desc}" />
</View>
</ScrollView>
<View class="arrow arrow-down"><Label text="DOWN" /></View>
</Window>
</NavigationWindow>
</Alloy>
showPic from index.js:
function showPic(event) {
var pic = event.source;
var args = {
title: pic.title,
desc: pic.desc,
author: pic.author
};
var picView = Alloy.createController("detail", args).getView();
if (OS_IOS) {$.navGroupWin.openWindow(picView);}
if (OS_ANDROID) {picView.open();}
}
detail.xml:
<Alloy>
<Window class="container">
<View layout='vertical'>
<Label id="titleLabel"></Label>
<Label id="descLabel"></Label>
<Label id="authorLabel"></Label>
</View>
</Window>
</Alloy>
detail.js
var args = arguments[0] || {};
$.titleLabel.text = args.title || 'Default Title';
$.descLabel.text = args.desc || 'Default desc';
$.authorLabel.text = args.author || 'Default author';
when I click on each item of the index, my source.title, source.author and source.desc seems to be empty, and on the detail window I got back only 'Default' values
I am not sure if you can do this on the view file level.
What I would try is to assign ids to every view element (this is a general technique) and fully deploy all my click listeners inside the controller file, removing all onClick commands from view.
So:
Set id="myview" along with class="single-item" in your View
In your controller try
$.myview.addEventListener('click', function(e){
showPic(e.title, e.author, e.desc)
});
Not sure if it goes wrong somewhere else, but stripped down like this it works:
index.html
<Alloy>
<Window id="test">
<ScrollView id="grid" layout="vertical">
<View class="single-item" width="250" height="250" backgroundColor="blue" title="title" author="author" desc="desc" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="red" title="red" author="red" desc="red" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="yellow" title="yellow" author="yellow" desc="yellow" onClick="showPic">
</View>
<View class="single-item" width="250" height="250" backgroundColor="green" title="green" author="green" desc="green" onClick="showPic">
</View>
</ScrollView>
</Window>
</Alloy>
index.js
function showPic(event) {
Ti.API.info(JSON.stringify(event.source));
}
$.test.open();