here i want to create a less mixin. The parameter is brand and is should be changed into brand#2x.png. The code below did not work.
.bglogo (#brand) {
#brandurl: #brand + '#2x.png';
background-image: url(#brandurl);
}
.span{
.bglogo('brand');
}
error message --
You need to use variable interpolation in order to concatenate the variable and the string.
In your case, you would use the value "#{brand}#2x.png":
.bglogo (#brand) {
#brandurl: "#{brand}#2x.png";
background-image: url(#brandurl);
}
.span {
.bglogo('brand');
}
Result:
.span {
background-image: url("brand#2x.png");
}
Related
number.toLocaleString() is not working in react-native, can anyone suggest better way to format currency in react-native,
code goes here
formatMoney(number) {
if(number===undefined||number===null)
{
return 0
}
else
{
var n=number.toString
var obj={
style:'currency',
currency:'GBP'
}
'use strict'
return n.toLocaleString('en-GB', { style: 'currency', currency: 'GBP' });
}
}
You want to use the Number.toLocaleString function, therefore you need to make sure that you are calling it on a number and not on a string. See example below:
var n = 5555;
//var n=number.toString(); remove this line
var obj={
style:'currency',
currency:'GBP'
}
formatted = n.toLocaleString('en-GB', { style: 'currency', currency: 'GBP' });
console.log("formatted",formatted);
You can use this library react-number-format. It has these features
Prefix, suffix and thousand separator.
Custom format pattern.
Masking.
Custom formatting handler.
Format number in an input or format as a simple text
Sample usage
<NumberFormat value={2456981} displayType={'text'} thousandSeparator={true} prefix={'$'} />
Output : $2,456,981
I'm trying to pass in an argument to a function that I enter into my view in order to run code on said function.
Currently I have a 5 functions that all basically do the same thing, and I'm trying to refactor them into 1 that takes the values I pass and performs some logic. It might be easier to explain what I'm trying to do with code.
This is my current code in my view:
<v-card-text :class="darkBodyPurpleCardClassFix">Manage</v-card-text>
<v-card-text :class="lightBodyPurpleCardClassFix">Fees</v-card-text>
And then here are those two functions bound to class both under computed:
lightBodyPurpleCardClassFix(){
switch (this.$vuetify.breakpoint.name) {
case 'xs': return '450px';
case 'sm': return this.mediumLightPurpleBodyCLassList;
case 'md': return this.mediumLightPurpleBodyCLassList;
case 'lg': return this.largeLightPurpleBodyCLassList;
case 'xl': return this.largeLightPurpleBodyCLassList;
}
},
darkBodyPurpleCardClassFix(){
switch (this.$vuetify.breakpoint.name) {
case 'xs': return '450px';
case 'sm': return this.mediumDarkPurpleBodyClassList;
case 'md': return this.mediumDarkPurpleBodyClassList;
case 'lg': return this.largeDarkPurpleClassList;
case 'xl': return this.largeDarkPurpleClassList;
}
},
What I'd love to do is to just pass in some arguments, and use those arguments in the function. Something along these lines
<v-card-text :class="classFix(purple, light)">Manage</v-card-text>
And then use those in a function something like this:
classFix(color, value ){
doSomethingWithColor(color);
this.data = value;
};
That color and value are arguments that I would enter into my own code so I could adjust the class list all with 1 function instead of the handful I have now.
EDIT:
This is what some of the data elements look like:
mediumPurpleCreateClassList: ['body-2', 'pb-3', 'pt-2', 'px-2', 'my_dark_purple_section'],
largePurpleCreateClassList: ['subheading', 'pb-3', 'pt-2', 'px-2', 'my_dark_purple_section'],
And what I'd like to do is just pass into a function medium & purple & create and then run my logic off of those arguments.
You could create a method like:
methods: {
// ...
classFix(darkOrLight, color) {
switch (this.$vuetify.breakpoint.name) {
case 'xs': return '450px';
case 'sm': return this['medium' + darkOrLight + color + 'ClassList'];
case 'md': return this['medium' + darkOrLight + color + 'ClassList'];
case 'lg': return this['large' + darkOrLight + color + 'ClassList'];
case 'xl': return this['large' + darkOrLight + color + 'ClassList'];
}
}
}
And use (bind) it in the template as follows:
<v-card-text :class="classFix('dark', 'purple')">Manage</v-card-text>
<v-card-text :class="classFix('light', 'purple')">Fees< /v-card-text>
Reasoning:
This alternative takes advantage of JavaScript's property accessor syntax.
Basically, any property present like:
this.mediumLightPurpleBodyCLassList
Can be acessed through:
this['mediumLightPurpleBodyCLassList']
Notice that what is between [ and ] are strings. And being strings, you can use any variable:
var myField = 'mediumLightPurpleBodyCLassList';
this[myField];
And create/manipulate that variable in anyway you would with any regular string variable:
var myColor = 'LightPurple';
var myField = 'medium' + color + 'BodyCLassList';
this[myField];
And, in the above suggested classFix method, those variables are the functions arguments (which, in the end of the day, are local variables).
Let's assume I have following array of strings that represent keys in object.
['keyA', 'keyB', 'keyC']
I want transform it to following
{ keyA: null, keyB: null, keyC: null }
Is it possible? I found methods like _.fromPairs etc... but not sure how to transform it...
You can use lodash#invert to convert each array values as keys in an object and then use lodash#mapValues with lodash#constant to set each key with a null value.
var result = _(data).invert().mapValues(_.constant(null)).value();
var data = ['keyA', 'keyB', 'keyC'];
var result = _(data).invert().mapValues(_.constant(null)).value();
console.log(result);
body > div { min-height: 100%; top: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
I have a helper that loops through jason data till a given value and sends the data back to the template.I also want to show at what location the data is present (the index), is there any way where in i can return the Index value along with the data?
Handlebars.registerHelper('print_range', function(items,count,options)
{
var out = "";
for(var i=0, l=items.length; i<count; i++)
{
out = out + options.fn(items[i]);
}
return out;
});
<script id="template" type="text/x-handlebars-template">
{{#print_range options "2"}}
<h1>index</h1> // this index should correspond to i in the helper function
<h2>{{optionID}}{{nextID}}</h2>
{{/print_range}}
</script>
Thanks in advance.
Handlebars.registerHelper('print_range', function(items,count,options)
{{#print_range options "2"}}
Not sure 100% what you're asking, but i do see a problem in your code. You specify 3 parameters in the function, but only give it 2 in your statement call to the helper.
{{#print_range options "2"}}
^ fn name ^items ^ count
Where's the value for your options variable? In handlebars, the parameters for the function go in order after the helper name you are calling
I have this piece of LESS code:
.generate-spans(#columns; #prefix; #current: 1) when (#current =< #columns) {
.span-#{prefix}-#{current} {
width: (#current/#columns*100%);
}
.generate-spans(#columns, #prefix, (#current + 1));
}
.generate-spans(12, "large");
It is suppose to generate something like this:
.span-large-1 {
width: 8.333333333333332%%;
}
.span-large-2
width: 16.666666666666664%;
}
.....
But it just returns error: Operation on an invalid type in ....
How do i make the code work as intended?
Your code works in Less 1.7.0. Try it here: http://lesstester.com/
The only typo is the name in quotes, which you should remove:
.generate-spans(12, large);
And that fix might also make it work in the version of Less that you are using.
If for some reason you have to use quotes, you can also try:
.generate-spans(12, ~"large");
Which will remove the quotes from the resulting CSS.