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
Related
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>
...
In the context of a NativeScript app, I've been struggling to find an efficient, non-hacky way to do what seems pretty simple: have one item in the center of a layout, and another item all the way to the right or left of the layout--something like the images in this question: Center and right align flexbox elements. The items should all be in a single row as they are there. (I've looked through those solutions, but I don't want to add a pseudo-element, and a lot of CSS just doesn't work with NativeScript.) Is there some kind of clean, canonical way to do this with the default layouts?
In case this isn't "specific" enough, say I have a scenario like this:
<SomeLayout>
<Label text="Center me"></Label>
<Label text="Pull me to the right"></Label>
</SomeLayout>
The text properties of the labels describe what I'm looking for. Please test any suggestions or be sure that they work.
you can use horizontalAlignment with GridLayout by applying same row number to both the labels.
<GridLayout rows="auto" columns="*">
<Label row="0" horizontalAlignment="center" text="Center me" class="center"></Label>
<Label row="0" horizontalAlignment="right" text="Pull me to the right" class="right"></Label>
</GridLayout>
you can also set horizontalAlignment property from CSS by using horizontal-align attribute.
.center{
horizontal-align:center;
}
.right{
horizontal-align:right;
}
main trick is that you have to give same row number to labels so that they overlap each other.
There are pre-defined classes in NativeScript that can handle left/center/right alignement. In order to align right you could use "text-right" class. There is more here https://v7.docs.nativescript.org/ui/theme#class-names
It is for V7 but working for V8 as well
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>
Greeting,
I'm developing an apps for Windows Phone 8.1 and face some problem with ListView.
I wanted to place a button for the FIRST item in ListView, but it seem like I can't align center the button.
Below is the code I use currently:
<ListView>
<Button Content="Jio!" Height="6" Width="362"/>
<ListViewItem Content="ListViewItem"/>
</ListView>
Adding horizontalalignment='center' just wont work for the button.
The reason I want to do this is because I wanted the button to scroll together with the list, hence I'm placing it inside the ListView.
Please advice what can I do to achieve my purpose, thanks!
I recommend using the ListView.Header content to place such a button instead of adding it as a child directly.
<ListView>
<ListView.Header>
<Button ... HorizontalAlignment="Center" />
</ListView.Header>
</ListView>
By default, the ListViewItems are left-aligned. You will eventually have to replace their Template in order to center-align it (HeaderTemplate Property).