By referring to the example provide below:
Creating a collapsible list with NativeScript
May I know how to expand the listview with multiple description like the following design?
Multiple description example
Following the example that you provided in the other question, you need another label in the ng-template of the ListView and to bind it to your additional descriptions like this:
...
<ng-template accordionItemTemplate let-item="item" let-parent="parentIndex" let-even="even" let-child="childIndex">
<StackLayout>
<Label [text]="item.description"></Label>
<Label [text]="item.description2"></Label>
<Label [text]="item.description3"></Label>
</StackLayout>
</ng-template>
...
Related
I am creating Labels dynamically from an array of strings so I have different colored and tap-able Labels like this:
<Label *ngFor="let part of comment"
[class.mention]="part.Mention" [class.hashtag]="part.Hashtag"
(tap)="handleTap(part)" [text]="part.Text"></Label>
Playground link
This works fine if all the Labels together are shorter than one line, but if they are longer than one line they will not wrap to the next line. How can I get this to wordwrap? Adding textWrap="true" does not work in this instance.
Use WrapLayout instead of stackLayout
<WrapLayout orientation="horizontal">
<Label *ngFor="let part of comment" [class.mention]="part.Mention"
[class.hashtag]="part.Hashtag" (tap)="handleTap(part)"
[text]="part.Text"></Label>
</WrapLayout>
I just update Playground link
https://play.nativescript.org/?template=play-ng&id=lJm8ZT&v=6
Sorry for that not so concrete title but starting with angular + NS I experience so much weird exceptional behavior that really wonders me.
That works ok:
<StackLayout>
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
</ng-template>
</ListView>
</StackLayout>
That works not: (getting no concrete exception message just that getView call failed... great thanks...)
<StackLayout>
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
<b>shit</b>
</ng-template>
</ListView>
</StackLayout>
That works partially: (getting no exception here but the bold word shit is not visible)
<ListView [items]="items" class="list-group">
<ng-template let-item="item">
<StackLayout> <Label [nsRouterLink]="['/item', item.id]" [text]="item.name" class="list-group-item"></Label>
<b>shit</b>
</StackLayout>
</ng-template>
</ListView>
Why result those code in such confusing cases?
Do I not understand the listview enough? What am I missing here?
Probably the case is that html tags like bold-tag seems not to be allowed within an ng-template used with NS but using a button/datepicker NS_angular component does not work either and result in an exception inside getView...
Update 1
Ok I just found out that I can not put more than one element inside ng-template that everything crashes oh come on what a lousy tooling behavior!!!
Putting a StackPanelLayout around the Label and Button then it is rendered!
I thought with NS + angular I can code with angular I was used to and just have a NS wrapper around not disturbing me. But it seems I have to learn NS a lot and put little angular knowledge inside, rather disappointing.
I would recommend you to go through the basics of {N} documentation to avoid further confusions.
Your app is totally native here therefore you can't use HTML tags those are specific to Web Browsers. You must use the standard {N} UI widgets, to make text bold, you must use the fontWeight property or font-weight in CSS. If you like part of your text to be bold then you suppose to use FormattedString.
is there anyway to customize the search-bar element that NativeScript provides ?
and add some buttons in it.
am trying to get something like this (the search-bar in this app)
I've been searching a bit but found nothing about it.
Basic demo here: https://play.nativescript.org/?template=play-vue&id=y6iFw9
You can always hide default action bar with actionBarHidden="true on your <page> element and then create your own action bar. In this case you can use GridLayout and put each element in its own column. Something like:
<Page actionBarHidden="true>
<StackLayout>
<GridLayout rows="auto columns="auto, *, auto, auto, auto>
<Label col="0 text="Menu"/>
<TextField col="1></TextField>
<Label col="2 text="icon1"/>
<Label col="3 text="icon2"/>
<Label col="4 text="icon3"/>
</GridLayout>
</StackLayout>
</Page>
Just replace labels with your icons, and add #tap="yourFunction to fire when icon is pressed. To turn labels into icons you can use package like Fonticon.
The search-bar from tns-core-modules doesn't provide what you're looking for (see the API at https://docs.nativescript.org/api-reference/modules/_ui_search_bar_). I'd recommend to implement the component yourself.
I am creating an Arabic app with NativeScript. I want each row inside list view to be viewed in rtl direction so the text in the row is aligned to the right.
I tired using text-align:right and horizontal-align:right but didn't worked.
How can I do this?
Thank you.
As there is no code snippet of what you have tried so far we can only speculate what is your code structure.(see here)
However here is a very basic example on how to align all list-view cell templates to the right by default.
<ListView.itemTemplate>
<GridLayout rows="*" columns="*">
<Label row="0" col="0" text="right aligned text" textAlignment="right" textWrap="true" />
</GridLayout>
</ListView.itemTemplate>
When I render a ListView in NativeScript, I get more rows than I have data. Is there a way to control this? I would like to see the minimum number of rows required to display my data.
<Page xmlns="http://www.nativescript.org/tns.xsd"
loaded="load">
<ListView items="{{ data }}">
<ListView.itemTemplate>
<Button text="{{ name }}" tap="{{ action }}"/>
</ListView.itemTemplate>
</ListView>
</Page>
For short lists, use a Repeater. For the separators, just use a StackLayout with a height of 1 and set the background-color to some grey. It will look just like a ListView. ListViews are meant to be used with large datasets that require virtualization of the rows.