I am iterating over a list (I'm using Vue.js 2 and Vuetify) and I want to have multiple <v-sheet> that have different colors. I've tried:
<v-sheet v-for="color in schema.colors" :key="color" class="float-left"
color="`${color}`"
elevation="1"
height="40"
width="40"
></v-sheet>
but that doesn't set color to the appropriate value.
I've also tried color="{{ color }}", without success. The color variable is set to a valid value, i.e. #1234ab.
If you want to assign variables then you need to use the bind syntax (see the colon before color)
<v-sheet v-for="color in schema.colors" :key="color" class="float-left"
:color="color"
elevation="1"
height="40"
width="40"
></v-sheet>
Related
My <v-progress-linear> kept changing on click, and I want to prevent that.
<v-progress-linear
v-model="progress"
color="primary"
height="20"
>
Fix: I don't use v-model.
Just use :value
<v-progress-linear
:value="progress"
color="primary"
height="20"
>
I encounter the same issue and I solved it by a hack using a CSS property pointer-events which let the progress-linear element to not react any pointer events:
<v-progress-linear
v-model="progress"
color="primary"
height="20"
style="pointer-events: none"
>
This question already has answers here:
Localization for Label StringFormat in Xamarin.Forms
(2 answers)
Closed 1 year ago.
Im trying to make a reference to a .resx varaiable inside the declaration of a string format. The .resx file just contains a english and a danish variation of the word, that just needs to stand in front of the binded variable.
Xaml
<Label Text="{Binding PracticeNo, StringFormat={Resources:Translate Practice_Number}': {0}'}"/>
I want the outcome to be like this:
English:
Practice number: 123
Dansih:
Praksisnummer: 123
I have figured out a workaround, just using a stacklayout with orientation horizontal, but i was just curious if it was possible to do it with af Stringformat?
I have figured out a workaround, just using a stacklayout with orientation horizontal, but i was just curious if it was possible to do it with af Stringformat?
You can use Spans to combine data and text.
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static resources:AppResources.Practice_Number}" />
<Span Text=" :" />
<Span Text="{Binding PracticeNo}" />
</FormattedString>
</Label.FormattedText>
</Label>
In a Xamarin.Forms project, I need to concatenate a Localized String value with a binding of a string property,
I want to achieve something like,
<Label Text="{Binding Name}",
StringFormat='Created By {0}' />
but Created By string should come from,
LocalizedStrings.CreatedBy
How can I achieve this?
in the xaml, add a name to reference the label,
<Label x:Name="myLabel" />
in the code-behind,
myLabel.SetBinding(
Label.TextProperty,
new Binding(nameof(MyModal.Name), stringFormat: $"{LocalizedStrings.CreatedBy} {{0}}"));
this way we can format the binding string properties with variable values.
Alternative Approach:
You can also use FormattedText property of the Label as follows, however this is not an optimized approach.
Import LocalizedStrings to xmlns:Resources, then,
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static Resources:LocalizedStrings.CreatedBy}" />
<Span Text="{Binding Name, StringFormat=' {0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
It's achievable by using the ForamttedText Property of Label. MS Docs link
<Label>
<Label.FormattedText>
<FormattedString>
<Span Text="{x:Static Resources:LocalizedStrings.CreatedBy}" />
<Span Text="{Binding Name, StringFormat=' {0}'}"/>
</FormattedString>
</Label.FormattedText>
</Label>
where Resources is an import for LocalizedStrings
I have a list of data and when it renders, it's rendering on top of each other. The data is a fairly long list of objects and I am using multiple fields. I made a playground example by reducing the data list size and only using field (display_name) and it's still happening.
It seems to happen in random spots of the list but I am unsure as to how to resolve or more importantly, why it's happening. I thought it may have had to do with my key not being unique but I made sure it was and it's still happening. I included a playground and added screenshots. Any ideas?
Playground
Screenshots
EDIT: (Adding Template)
<RadListView
for="(movie,index) in this.movies"
ref="listView"
#loaded="onListLoaded($event)"
#itemTap="onItemTap($event)"
itemHeight="50"
:key="index"
gridSpanCount=1
>
<v-template>
<FlexboxLayout class="item-row" :key='`flex` + index' flexDirection="row" width="100%" height="100%" justifyContent="space-between">
<Stacklayout orientation="horizontal">
<Image :key='`img-flag` + index' marginTop="-22" class="flag-image" marginBottom="-22" :src="movie.image" height="100%" />
<Label :key='`display-name` + index' :text="movie.display_name" />
</Stacklayout>
<Image :key='`heart-1` + index' #tap="handleToggleFavorite(movie)" width="20" :src="movie.favorite ? heartFilled : heartUnfilled" />
</FlexboxLayout>
</v-template>
</RadListView>
Looking at your mockup, I think you can achieve it with a simple GridLayout.
<v-template>
<GridLayout columns="auto,*,auto" class="list-group-item">
<Image col="0" :src="movie.image"
class="m-5 thumb img-circle">
</Image>
<Label col="1" :text="movie.display_name"></Label>
<Image col="2" src="path_to_icon" class="thumb">
</Image>
</GridLayout>
</v-template>
I hope you can help me to solve my problem.
I am working on a Nativescript-Vue Application and I want to render this conditionally:
<Label if="isRendering" text="This is a text"></Label>
But this does not work.
I already tried it with <v-template if="..."></v-template> but this also does not work.
If i am not mistaken, in Vue.js it is possible to render conditionally with v-if and i am searching for a possibility to make it in Nativescript-Vue.
Thank you
It's the same like in Vue.js.
Instead of using if you should be using v-if.
Playground example
Example:
<Label v-if="isRendering" text="This is a text"></Label>
But if you want to use an if in a ListView it's different.
Example:
<ListView for="item in listOfItems" #itemTap="onItemTap">
<v-template>
<Label :text="item.text" />
</v-template>
<v-template if="$odd">
<!-- For items with an odd index, shows the label in red. -->
<Label :text="item.text" color="red" />
</v-template>
</ListView>
But more info about that in the docs