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
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
I have a
<CarouselView ItemsSource="{x:Static vm:MainPageViewModel.MyItems}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Label Text="{Binding ID}"/>
<Label Text="{Binding Progress}"/>
...
I would like the <Label Text="{Binding Progress}"/> not to scroll off screen, but to stay fixed (at the top) and update as the user swipes through the CarouselView items. If I move the label outside of the CarouselView, it won't be data bound.
How can I keep the label fixed onscreen, but bound to the curren CarouselView item? (Do I need to do this via code behind?)
You can achieve this easily by binding the text property of the Label to the property in your ViewModel which will also do binding to the CurrentItem property of CarouselView.
Can you try something like this:
<Label Text="{x:Static vm:MainPageViewModel.MyCurrentItem.Progress}"/>
<CarouselView CurrentItem="{x:Static vm:MainPageViewModel.MyCurrentItem}"
ItemsSource="{x:Static vm:MainPageViewModel.MyItems}"
... other code
>
... other code
</CarouselView>
and in your ViewModel create a new bindable property of the same type as your MyItems list items are.
I have updated my GitHub repo with the example of this kind of behaviour:
You can find GitHub repo here.
and particular view here.
And here is a GIF of a running demo:
Label is above the CarouselView, and when you swipe and change the selected item, the value of label is changing according to the change of CarouselView.
Hope this was helpful for you, wishing you lots of luck with coding!
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).