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)
Related
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 }"
The react-native-paper docs suggest you can set the color of a disabled button using a theme, but this code does not work:
export const buttonTheme = {
colors: {
primary: COL_BASE_YELLOW,
disabled: COL_DARK_HIGHLIGHT,
},
}
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={() => handleSubmitPhoneNumber(phoneNumber)}
theme={buttonTheme}
disabled={phoneNumber.length < 5 ? true : false}>
Continue
</Button>
The primary color works however.
How do I change the color of the button when it is disabled?
Don't use disabled props, it will always make your button grey, if you want to use your desired colour for disabled mode, do it like this :
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
Continue
</Button>
From this Github issue:
The text if the contained button depends on the background color of
the button, which is automatically determined based on of the
background color is light it dark. Wherever theme is dark or not
doesn't affect it.
This is the desired behavior. We don't want to show white text on a
light background because you have a dark theme, otherwise the text
won't have enough contrast and will be illegible.
Changing the theme to dark changes the disabled button color, as I tested. Apart from this, I don't think its possible if you use react-native-paper. The author has decided to automatically set the color & background color of the button based on something, but his language is unclear.
However, you can give a labelStyle prop the button directly, and you could have a conditional in that style.
<Button labelStyle={{ color: phoneNumber.length < 5 ? 'red' : 'green' }}>
or,
[buttonDisabled, setButtonDisabled] = useState(false); // put this outside the render function.
<Button disabled={disabled} labelStyle={{ color: disabled ? 'red' : 'green' }}>
I'm may be late but here's my solution:
<Button
id="save-phonenumber"
color="darkColor">
onClick={doSomething}
disabled={phoneNumber.length < 5 ? true : false}>
<Button/>
In you Css file you can add
Button#save-phonenumber[disabled] {
background: "fadedColor"
}
Benefit of using this approach is that you don't additionally need to disable the clicking effect when the button is disabled.
If you're caring about light and dark themes at the moment, then you can achieve your goal like this -
I would suggest creating your own Button Component on the top of Paper Button.
// extending default Paper Button Component
<PaperButton style={[ props.disabled && { backgroundColor: 'cccccc' } ]}>
{children}
</PaperButton>
// Using component...
<MyButton disabled={disabled}>
Click Me!
</MyButton>
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]"
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