I'm trying to find a way to display 6 images in two columns and 3 rows.
With for columns and images should be 50%. Here is my code and it does not "overflow" second and third row.
<Repeater items="{{ sviKatalozi }}">
<Repeater.itemsLayout>
<StackLayout orientation="horizontal" width="500" height="1000" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<Image width="180" margin="10" src="{{ 'http://imageurl' + katalog_image }}" />
</Repeater.itemTemplate>
</Repeater>
I have found perfect solution <FlexboxLayout> to arrange things in way I want, but could not find a way to use observables and data binding. It does not work if put items="{{ sviKatalozi }}" inside.
<FlexboxLayout flexWrap="wrap" height="50%" width="100%" backgroundColor="lightgray">
<Label text="Label 1" width="50%" height="50" backgroundColor="red"/>
<Label text="Label 2" width="50%" height="50" backgroundColor="green"/>
<Label text="Label 3" width="50%" height="50" backgroundColor="blue"/>
<Label text="Label 4" width="100" height="50" backgroundColor="yellow"/>
</FlexboxLayout>
Is there any way to make this work? Thanks
use ngFor like this
<GridLayout *ngFor="let item of placesArray" width="50%" class="placeBox">
instead of Repeater
Related
I'm new to NativeScript and just can't figure out how to load a plugin right.
As mentioned here, I added the plugin and from here, followed the steps for Core JS, but nothing seems to work.
I've tried with the RadListView and PullToRefresh so far but I keep hitting the same/similar roadblock. For the PullToRefresh plugin, the error I receive is as you see below.
JS: HMR: Hot Module Replacement Enabled. Waiting for signal.
JS: Error: Building UI from XML. #screens/home/home-page.xml:32:11
JS: > Building UI from XML. #screens/orders/orders-items-page.xml:9:5
JS: > Module '#nstudio/nativescript-pulltorefresh' not found for element '#nstudio/nativescript-pulltorefresh:PullToRefresh'.
JS: > _nativescript_core__WEBPACK_IMPORTED_MODULE_0__.Property is not a constructor
I'm running a NativeScript Core JS sample project with minor cosmetic modifications. I'm not entirely sure what code to post up here for reference, but here goes
home-page.xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd">
<BottomNavigation>
<TabStrip>
<TabStripItem class="navigation__item">
<Label text="Orders"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="Inventory"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="Promotions"/>
<Image src="font://" class="fas t-36"/>
</TabStripItem>
<!-- <TabStripItem class="navigation__item"> <Label text="Analytics"/> <Image src="font://" class="fas t-36"/> </TabStripItem> -->
</TabStrip>
<TabContentItem>
<Tabs>
<TabStrip id="top-nav">
<TabStripItem>
<Label text="Current Orders"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Past Orders"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<Frame defaultPage="screens/orders/orders-items-page"/>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/inventory/inventory-page"/>
</TabContentItem>
</Tabs>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/inventory/inventory-page"/>
</TabContentItem>
<TabContentItem>
<Frame defaultPage="screens/promotions/promotions-page"/>
</TabContentItem>
<!-- <TabContentItem> <Frame defaultPage="screens/analytics/analytics-page"/> </TabContentItem> -->
</BottomNavigation>
</Page>
orders-item-page.xml
<Page navigatingTo="onNavigatingTo" loaded="loaded" xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:PullRefresh="#nstudio/nativescript-pulltorefresh">
<GridLayout rows="auto, *">
<FlexboxLayout flexDirection="row" justifyContent="space-around">
<Button class="" col="0" text="New Orders" tap="filter"></Button>
<Button class="" col="1" text="Preparing" tap="filter"></Button>
<Button class="" col="2" text="Ready for Pickup" tap="filter"></Button>
</FlexboxLayout>
<PullRefresh:PullToRefresh refresh="refreshList" indicatorFillColor="#fff000" indicatorColor="#3489db">
<ListView items="{{ orders }}" row="1">
<ListView.itemTemplate>
<GridLayout class="p-10 order-list-item" rows="auto, auto, auto, auto" columns="*, auto" androidElevation="5" margin="5" backgroundColor="white" borderRadius="10">
<FlexboxLayout flexDirection="row" row="0" colSpan="2" justifyContent="space-between">
<Label class="{{ 'status ' + status }}" text="{{ statusText }}" textTransform="uppercase"/>
<Label class="font-weight-bold" text="{{ 'Order to be Ready in ' + totalTime }}" fontSize="12"/>
</FlexboxLayout>
<FlexboxLayout class="m-t-10" flexDirection="row" row="1" colSpan="2" justifyContent="space-between">
<Label class="font-weight-bold" text="{{ '#' + number }}" fontSize="15"/>
<Label class="font-weight-bold" text="{{ '₹' + value }}" fontSize="15"/>
</FlexboxLayout>
<Label class="" text="{{ dateTime + ' | ' + itemsBrief }}" row="2" col="0" color="gray" fontSize="12"/>
<FlexboxLayout flexDirection="row" row="3" colSpan="2">
<Button flexGrow="1" class="text-center font-weight-bold" text="Mark Ready" tap="filter"></Button>
<Button flexGrow="1" class="text-center font-weight-bold" text="Mark Ready" tap="filter"></Button>
</FlexboxLayout>
</GridLayout>
</ListView.itemTemplate>
</ListView>
</PullRefresh:PullToRefresh>
<!-- <ActivityIndicator busy="{{ isLoading }}" row="1" horizontalAlignment="center" verticalAlignment="center"/> -->
</GridLayout>
</Page>
I just updated to Nativescript 6 and it seems a lot of my stylings are now funky. Is there a breaking changes list somewhere? Here are some examples:
On iOS my "Back" buttons went from white to dark
in Android all nested FlexboxLayout are now not lining up
some images that were in FlexboxLayout and set by height="20" stretch="aspectFit" fill the whole container, ect.
Code Example:
<FlexboxLayout
flexDirection="row"
class="title-bar"
alignContent="center"
justifyContent="space-between"
ref="view"
>
<Label :text="title" class="title-bar-label" />
<FlexboxLayout flexDirection="row">
<Image
src="res://share"
stretch="aspectFit"
width="25"
height="30"
marginRight="20"
v-if="share"
#tap="$emit('share')"
/>
<Image src="res://title_logo" stretch="aspectFit" width="30" />
</FlexboxLayout>
</FlexboxLayout>
Tell us about the problem
I am trying to horizontally set the content that is grouped with the function of but is not possible, because all content is horizontal.
Which platform(s) does your issue occur on?
Both
Please tell us how to recreate the issue in as much detail as possible.
<RadListView
[items]="dataItems"
#productsListView
[groupingFunction]="grouping"
>
<ng-template tkListItemTemplate let-item="item">
<StackLayout orientation="horizontal" width="100%">
<MDCardView width="100" height="100">
<Image stretch="aspectFill" [src]="item.image"></Image>
</MDCardView>
</StackLayout>
</ng-template>
<ng-template tkGroupTemplate let-category="category">
<GridLayout columns="*, auto" ios:height="50">
<Label
col="0"
style="font-weight: bold; font-size: 24"
[text]="category"
></Label>
<Label
col="1"
style="font-size: 12; color: gray;"
text="Ver más"
></Label>
</GridLayout>
</ng-template>
<ListViewGridLayout
tkListViewLayout
itemHeight="100"
scrollDirection="Horizontal"
></ListViewGridLayout>
</RadListView>
Try ScrollView within tkGroupTemplate
<ng-template tkGroupTemplate let-category="category">
<GridLayout>
<ScrollView orientation="horizontal" scrollBarIndicatorVisible="false">
<Label class="m-5 h2" [text]="category"></Label>
</ScrollView>
</GridLayout>
</ng-template>
Playground Sample
The Problem
I have a page that is a slider, simply displays an image, and you slide left or right to get to the next/previous.
What I am trying to do, is at the bottom of the screen overlay a panel where I can enter some text describing the image.
Here is my XML:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" xmlns:ns="nativescript-carousel">
<Page.actionBar>
<ActionBar title="Customer On Boarding" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<StackLayout class="">
<ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
<ns:CarouselItem class="slides slides-1" id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
<Label backgroundRepeat="no-repeat" text="Step 1" backgroundColor="#50000000" horizontalAlignment="center" />
<!-- Dock Bottom -->
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-2" id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
<Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-3" id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
<Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-4" id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
<Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
</ns:Carousel>
</StackLayout>
</Page>
and here is a screenshot:
At the bottom I would like a 100% width, roughly 100px high, bordered 'panel' I can add some text.
Does anyone have any ideas? I tried Dock Failed miserably. Ugh.
Thank You for looking.
John
You can use the GridLayout like the example below
<GridLayout columns="*" rows=auto, * " backgroundColor="lightgray ">
<StackLayout class=" row=" 0">
<ns:Carousel height="100%" width="100%" pageChanged="myChangeEvent" pageTapped="mySelectedEvent" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="swap" color="white">
<ns:CarouselItem class="slides slides-1" id="slide1" backgroundColor="#b3cde0" verticalAlignment="middle">
<Label backgroundRepeat="no-repeat" text="Step 1" backgroundColor="#50000000" horizontalAlignment="center" />
<!-- Dock Bottom -->
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-2" id="slide2" backgroundColor="#6497b1" verticalAlignment="middle">
<Label text="Slide 2" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-3" id="slide3" backgroundColor="#005b96" verticalAlignment="middle">
<Label text="Slide 3" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
<ns:CarouselItem class="slides slides-4" id="slide4" backgroundColor="#03396c" verticalAlignment="middle">
<Label text="Slide 4" backgroundColor="#50000000" horizontalAlignment="center" />
</ns:CarouselItem>
</ns:Carousel>
</StackLayout>
<StackLayout row="1">
// add text panel here
</StackLayout>
</GridLayout>
In a flexbox layout i want to have an image on the left and a center label title on the right :
<FlexboxLayout backgroundColor="#bada55" justifyContent="space-between" height="300" class="head">
<Image :src="posts.image_url" stretch="aspectFit" class="head_img"/>
<Label :text="posts.product_name" alignSelf="center" alignContent="center" class="title" textWrap="true"/>
</FlexboxLayout>
in my case the label text is going to the right but is not center, any idea on how to do that ?
You can add textAlignment="center" to the label.
<FlexboxLayout backgroundColor="#bada55" justifyContent="space-between" height="300" class="head">
<Image :src="posts.image_url" stretch="aspectFit" class="head_img"/>
<Label :text="posts.product_name" alignSelf="center" alignContent="center" textAlignment="center" class="title" textWrap="true"/>
</FlexboxLayout>