This would bind background-color property to the <td> element.
<td :style="{backgroundColor: (props.item.release_date ? 'green' : 'transparent' ) }">
Some text
</td>
But what if I want to bind NOT ONLY the backgound-color same time I want to bind the foreground color (Normal color property) as well.
How do I bind multiple style properties to an element?
First of all, there's no foreground color in css. You can use multiple style with comma separated key: value pairs like:
:style="{
backgroundColor: (props.item.release_date ? 'green' : 'transparent' ),
color: 'red',
width: '120px'
}"
I was in a situation where I couldn't put all the styles in one object so I found this alternate way of style binding in vue:
vue style binding, Object syntax
vue style binding, Array syntax
basically you can have multiple style object and pass them as array to the style attribute like this:
:style="[styleObjectOne, styleObjectTwo]"
Related
I am trying to pass the value of component's prop into another prop to style it, as below:
<Component propOne={true} style={{ backgroundColor: propOne ? "red" : "blue" }} >
</Component>
Here propOne inside style prop is undefined.
Any help?
This won't work as written - you can only directly access a component's props from within that component. I think you have two options:
Define style inside the body of Component. If you control Component, this is the easiest way.
Assign propOne's value to a const, and use it in both props.
I'm using the Native Base Select component. While Select's data is loading I set isDisabled prop on Select to make the component unpressable. Problem is that by making it disabled I get a different style of Select that I can't change and adjust.
You should use Pseudo Props
_disabled={{
opacity: 30,
}}
Example:
<Button
_hover={{
_text: { color: "secondary.400" },
}}
>
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 }"
This isn't tied to the router menu.
I have a Price sheet witch consists of 3 sub-sheets.
Above the single visible sheet is are 3 buttons which, when clicked, show the corresponding sheet.
The design of the pricesheet
I was lookin at the Vue style bindings but they only trigger on True / False and not on the value of the single variable.
Of course there's the option to have a data() variable for each button and upon change set the other two to false, but maybe there's a way to bring that repeated code to a single variable?
Turns out it doesn't work only on true and false.
For example:
My data indicated that the 1st button is active:
data() {
return {
activeBtn: 1,
};
},
To bind the style to the active button, just set the style attribute to an if shorthand which checks the value of the data and changes the string-typed style.
<div class="btn1" v-bind:style="{ backgroundColor: activeBtn == 1 ? 'red' : 'green' }"></div>
<div class="btn2" v-bind:style="{ backgroundColor: activeBtn == 2 ? 'red' : 'green' }"></div>
<div class="btn3" v-bind:style="{ backgroundColor: activeBtn == 3 ? 'red' : 'green' }"></div>
Screenshot with the styling like in the code
Of course it's better to not specify the styling but the class (for multiple style values)
The release 2.1.3 of react-admin introduced the use of <Typography /> for the NumberField component (and others) in place of <span />.
This component has a style to align text on the right.
const styles = {
input: { textAlign: 'right' },
};
I don't know why, but with the span element the number was aligned left.
Now the number is aligned right, but not aligned with the same margin if there are others number fields.
Code demo (Comment show screen) / Screenshot
I tried to define a className on my component...
<NumberField source="id" className="leftalign" />
with
.leftalign {
text-align: left;
}
...but the class is overridden by the style-generated class NumberField-input-234 (except if I set !important but I would like to avoid this).
My questions are:
Is there a way to align them on the left without the uggly !important css flag or writing style={{ textAlign: 'left' }} each time I use a <NumberField />?
Is there a way to align right with the same margin?
Thanks
This issue has been resolved in react-admin#2.2.0