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.
Related
I'm trying to display how many items are there in cart. on top of the cart symbol. but I'm facing an issue using grid layout. since, nativescript wont support superscript. is there any better way to design.
i tried something like below. but the number of items is not properly displaying on top right of the cart symbol.
<GridLayout col="2" rows="auto" columns="*,*">
<Label col="0" text="" fontSize="28" class="fas" textWrap="true" />
<Label col="1" text="{{ line_item_no }}" fontSize="10" textWrap="true" margin="0 5 0 5" class="fcw" />
</GridLayout>
i need a cart symbol of 25 font size. on top right i need a 10 font size number surrounded by a round background. kindly give me some ideas.
you can use text-decoration: line-through; property, see the references below:
https://docs.nativescript.org/api-reference/modules/ui_enums.textdecoration
https://docs.nativescript.org/ui/styling
I have label title header, listview and button. All the controls need to scroll in the page. But Listview is taking more space when placed inside scroll view. Could anyone faced the issue like this?
Listview is already have a scrolling behaviour. Why using a view have scrolling property inside into another scrollview..? You can use Scrollview, if you have more than one listviews in your page.
If you still want to use bath views try to set this property of listview HasUnevenRows="True"
As stated before, it is generally a bad idea to have a ListView inside a ScrollView as stated here.
That being said, I replicated this issue and got the page to stop stretching by adding RowHeight to the ListView.
<ScrollView BackgroundColor="Black">
<StackLayout BackgroundColor="LightBlue">
<Label Text="BEFORE"/>
<ListView BackgroundColor="LightGray"
RowHeight="40">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>mono</x:String>
<x:String>monodroid</x:String>
<x:String>monotouch</x:String>
<x:String>monorail</x:String>
<x:String>monodevelop</x:String>
<x:String>monotone</x:String>
<x:String>monopoly</x:String>
<x:String>monomodal</x:String>
<x:String>mononucleosis</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
<Label Text="AFTER"/>
</StackLayout>
</ScrollView>
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>
...
I see that Frame works now much better.
We can have Tabview,that is a root of current view.
<TabView androidTabsPosition="bottom">
<TabViewItem title="First">
<Frame defaultPage="home/home-page" />
</TabViewItem>
<TabViewItem title="Second">
<Frame defaultPage="second/second-page" />
</TabViewItem>
</TabView>
This looks like home-page or second-page is “included”.
Now, i’m wondering if it’s possible to have app-root.xml that holds common elements, and needed page is included. I’ve tried this, but this is not working (why? This approach is possible only for tabview and sidedrawer ?)
app-root.xml
<Page>
<Frame defaultPage="create/create"></Frame>
</Page>
create/create.xml
<StackLayout class="footer white">
<Label text="test"></Label>
</StackLayout>
Instead of Page use layout like GridLayout Look at this test application as a reference and more specifically this page
However, the above approach would work for Android but for iOS, you should either remove the action bar for each Page (inside each Frame) or create multiple action bars (not recommended!).
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>