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>
Related
I've got a facebook like activity feed, and I'm using a repeater because I want to have multiple clickable items within each "activity", ie, clicking on the top portion goes to the users profile, vs. the body of the activity opens the activity, plus some links for comments, likes below that.
<ScrollView orientation="vertical">
<Repeater items="{{ activities }}">
<Repeater.itemsLayout>
<StackLayout orientation="vertical" />
</Repeater.itemsLayout>
<Repeater.itemTemplate>
<StackLayout tap="goProfile" >
<Image src="{{image}}" height="35" verticalAlignment="top" />
<Label text="{{user_name}}" />
</StackLayout>
<StackLayout tap="goActivity">
...
</StackLayout>
<StackLayout orientation="horizontal">
<Image tap="addComment" src="{{comment}}" />
<Image tap="addLike" src="{{like}}" />
</StackLayout>
</Repeater.itemTemplate>
</Repeater>
</ScrollView>
This is basically working fine, except tapping on any of the tappable items does not give any visual feedback, ie. briefly turning the background of the item grey, like it does with a ListView....
I can't figure out how to get this behavior on clickable layouts within my repeater? is this possible? is there another approach I should be following?
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>
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
Consider the next xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd" >
<!-- UI Decalration -->
<AbsoluteLayout>
<GridLayout zIndex="99" height="100" width="100" backgroundColor="red"></GridLayout>
<GridLayout zIndex="1" height="200" width="200" backgroundColor="green"></GridLayout>
</AbsoluteLayout>
</Page>
In my understanding the red square should be visible, but it's hidden behind the green one. Am I doing something wrong?
Declare z-index as CSS property so all elements should be rendered as espected.
For example :
page.css
.lower-grid {
z-index: 1;
}
.upper-grid {
z-index: 99;
}
page.xml
<AbsoluteLayout>
<GridLayout class="upper-grid" height="100" width="100" backgroundColor="red" />
<GridLayout class="lower-grid" height="200" width="200" backgroundColor="green" />
</AbsoluteLayout>
This solution worked out for me - keep in mind that z-index is supported for Android API 21 and above.
I got it working by using gridlayout and then repeating the same row number. The order of the items then determines the z-index playground demo:
<GridLayout rows="*, *, *" columns="*">
<GridLayout row="0" col="0" height="300" backgroundColor="black" />
<GridLayout row="1" col="0" height="300" backgroundColor="red" />
<GridLayout row="2" col="0" height="300" backgroundColor="green" />
<GridLayout row="0" col="0" height="100" backgroundColor="blue" margin="100" /> <!-- displays on top of the first row 0 -->
</GridLayout>
I created 2 Image buttons. Right now there is a white rectangle drawn around the image. Is there a way to turn this off, or change the color? I looked in the properties pan, but could not find any property for border.
Here isd the xml code
<Button Height="140" Name="button1" Width="332" Padding="0" >
<Image Source="/BigBiz;component/resource/bannerleft.png" ManipulationStarted="button1_Click" Width="319" Height="113"></Image>
</Button>
<Button Height="140" Name="button2" Width="332" Padding="0" >
<Image Source="/BigBiz;component/resource/bannerleft.png" ManipulationStarted="button2_Click" Width="327" Height="113"></Image>
</Button>
You try following code. i hope it's solved your problem.
<Button Height="140" Name="button2" Width="332" click="button2_Click" Padding="0" BorderThickness="0">
<Button.OpacityMask>
<ImageBrush ImageSource="/BigBiz;component/resource/bannerleft.png" />
</Button.OpacityMask>
<Button.Background>
<ImageBrush ImageSource="/BigBiz;component/resource/bannerleft.png" />
</Button.Background>
</Button>