I'm trying to pass into a component, via prop, a color attribute, which will determine the background color of the component. The choices for the color attribute are 'red' and 'blue'.
The actual component is set up as the following:
Vue.component('greeting', {
props: ['color'],
template: '<div v-bind:class="{'add-red': color === 'red', 'add-blue': color === 'blue'}" class="box"></div>'
});
The actual color is passed in as follows:
<component color='red' :is='currentComponent'></component>
But I can't seem to get the class binding to work in my jsfiddle.
https://jsfiddle.net/cckLd9te/3217/
Your template is mixing between single quote ' and double quote ". You should use escape character
Vue.component('greeting', {
props: ['color'],
template: '<div v-bind:class="{\'add-red\': color === \'red\', \'add-blue\': color === \'blue\'}" class="box"></div>'
});
Demo
Related
Considering my code:
<template>
<section
class="bg-gradient-to-br h-40"
:class="
'from-palettes-' +
palette +
'-primary to-palettes-' +
palette +
'-secondary'
"
>
Topbar
</section>
</template>
<script>
export default {
data: function () {
return {
menuOpen: false,
palette: "green-dark",
};
},
methods: {},
};
</script>
<style>
</style>
And my tailwind file:
extend: {
colors: {
palettes: {
"green-dark": {
primary: "#57876E", //dark color
secondary: "#92BFA8", //light color
gray: "#333453",
accent: "#f8f2f2", //slight offset from white
white: "#FAF9FA",
},
},
},
},
Color is not loaded. When I check the console there are no errors, when I check source code, the class name is applied as it should. The corresponding class is however not found/applied. What am I doing wrong?
The most important implication of how Tailwind extracts class names is
that it will only find classes that exist as complete unbroken strings
in your source files.
If you use string interpolation or concatenate partial class names
together, Tailwind will not find them and therefore will not generate
the corresponding CSS.
https://tailwindcss.com/docs/content-configuration#dynamic-class-names
Suppose that I have a data property in Vue.js called iconsColor, which is defined like this:
data() {
return {
iconsColor: "#b5ffff",
};
},
I want to be able to use this property where I am setting color like this:
:style="{ color: '#b5ffff' }"
I tried a couple of different ways
:style="{ color: '{{iconsColor}}' }"
and studied a few interpolation techniques like this and this, but I was not able to come to a solution. How this utilization can happen?
Based on this section the style could be bound to the data property as follows :
:style="{ color: iconsColor }"
Is there a way to define css selector properties dynamically ?
For example how to define "color" property of ".some-style" selector with the value got from the backend server?
<style>
.some-style {
color: #ffc050;
}
</style>
Create a dynamic style in your top-most element in your template.
Assign the backend response of your properties to a computed function.
Set style lang to lang='scss' then use CSS varialbe function var() to set the values.
Example
<template>
<div :style="cssProps">
<div class="some-style">
Hello Mars
</div>
</div>
</template>
<script>
export default {
computed: {
cssProps() {
// backend response with your css values
let backendResponseObject = {
fontColor: "black", // you can use rgb or hex
backgroundColor: "White" // you can use rgb or hex
}
properties = {
"--brand-base": backendResponseObject.color,
"--brand-primary": backgroundColor.hex,
};
return properties;
}
}
}
</script>
<style lang="scss">
.some-style {
color: var(--brand-base);
background: var(--brand-primary);
}
</style>
The default style for the p tag on my page has some bottom margin. My component uses p tags, and accordingly, the p tags in my component text show the corresponding bottom margin. How can I override/define new css style for the p tags in my component. I define my component like this:
Vue.component ('activity-component', {
props: {
customer_id:{},
is_admin:{},
isAdmin:{},
isKitsActionplan:{},
....
template:
`<div
class="row msDashboard-box"
style="cursor:default;padding-top:12px;
padding-bottom:12px;"
>
...
<p> ... </p>
});
Maybe u can try this approach,
Pass a variable with the class name to the component
<my-component v-bind:class="variable with class name"></my-component>
Then apply a rule to all p elements inside it, something like this i guess:
.test p{
your styles
}
U can see more here: vue api class and style bindings
I dont know for sure if this was what you wanted, but i gave it a shot :)
You have several options - choose your own adventure:
Use a global utility style
Somewhere globally, define a utility class like:
.u-margin-reset {
margin: 0;
}
Then in your template:
<p class="u-margin-reset">hello</p>
Use scoped CSS
If you are using single file components, you can use scoped css:
<template>
<p class="special-p">hello</p>
</template>
<style scoped>
.special-p {
margin: 0;
}
</style>
Use inline styles
Vue.component('activity-component', {
template: `<p style="margin:0;"></p>`,
});
or
Vue.component('activity-component', {
computed: {
myStyle() {
return {
margin: 0,
};
},
},
template: `<p :style="myStyle"></p>`,
});
As an aside, I'd recommend using a CSS reset that globally resets the margins of all elements to 0. Then each component should set the margins as needed for its child elements/components. This may not be reasonable if you already have a large codebase, however.
When I define a button in React Native as:
<Button ref="buttonRef" title="Button" onPress={this.buttonPressed}/>
And its onPress function as:
buttonPressed(){
this.refs.buttonRef.setNativeProps({color:"#ffffff"});
}
I get the following error:
this.refs.buttonRef.setNativeProps is not a function. (In
'this.refs.buttonRef.setNativeProps({
color: "#ffffff"
})', 'this.refs.buttonRef.setNativeProps' is undefined)
However, if I were to define any other type of component, e.g. text input as
<TextInput ref="userInputRef" value={"this is text"} />
With the function changing its props:
buttonPressed(){
this.refs.textRef.setNativeProps({color:"#ffffff"});
}
Everything changes correctly.
Is there a reason that the button component is unable to have its native props set through setNativeProps?
Button component is a simple custom component created from Touchable components and it doesn't have a ref property. You can check the source code of Button component here.
If you need to change properties of a component you should use state values for that.
Sample
buttonPressed = () => {
this.setState({color:"#ffffff"});
}
//....
<Button ref="buttonRef" color={this.state.color} title="Button" onPress={this.buttonPressed}/>