I want to change a material mat-mini-fab button's color the when button is clicked.
My attempt is like below. But doesn't work.
<button mat-mini-fab color="primary" #btn>Btn</button>
#ViewChild('btn') btn: ElementRef;
clicked() {
this.btn.nativeElement.style.backgroundColor = '#5789D8';
this.btn.nativeElement.style.color = '#FFFFFF';
}
You can use [ngClass] to dynamically toggle a css class on click
<button [ngClass]="{'test': newColor}" (click)="toggleColor()" mat-fab>Primary</button>
Demo
Related
Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked.
Alternatively, is there any styling that needs to be done for selection?
You can use DefaultButton checked property for that scenario and control it with onClick event:
const [isButtonChecked, setIsButtonChecked] = React.useState(false);
<DefaultButton
checked={isButtonChecked}
onClick={() => {
setIsButtonChecked(!isButtonChecked);
}}
styles={{
rootChecked: {
backgroundColor: '#f00',
color: '#fff',
}
}}
>
Default Button
</DefaultButton>
Use styles property to modify button styles when button state is checked: rootChecked, rootCheckedHovered etc.
Codepen example.
This my code:
<template>
....
<v-navigation-drawer app absolute width="340" permanent>
....
<v-btn fab dark fixed bottom left color="primary" #click="$vuetify.goTo(0)">
<v-icon>keyboard_arrow_up</v-icon>
</v-btn>
...
<v-navigation-drawer>
<template>
When I click the button as shown in the code, it should scroll to the top of the drawer. But it doesn't. Can anyone help me?
You need to apply container, which is one of the options for scroll. If you are not providing this, vuetify won't know to place it on your nav drawer.
Add a ref to your nav drawer:
<v-navigation-drawer app absolute width="340" permanent ref="myNavDrawer">
You can assign the element in your script, so that we can refer to it in goTo:
mounted() {
this.navDrawerContent =
this.$refs['myNavDrawer'].$el.querySelector('div.v-navigation-drawer__content');
}
Then for your button, pass 0 as you did, but add the container:
<v-btn ... #click="$vuetify.goTo(0, { container: navDrawerContent } )">
A CODEPEN for your reference.
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>
I want to animate an element in a ListItem
For example, consider the following simple ListView:
<ListView>
<Templates>
<ItemTemplate name="foo">
<View layout="vertical">
<Label color="red" id="label" bindId="bExampleLabel"/>
<Button onClick="onClickButton">Click Me to make the label go blue</Button>
</View>
</ItemTemplate>
</Templates>
<ListSection id="exampleListSection">
<ListItem template="foo" bExampleLabel:text="Example 1"></ListItem>
<ListItem template="foo" bExampleLabel:text="Example 2"></ListItem>
</ListSection
</ListView>
and the following script:
function onClickButton(e) {
var item = $.exampleListSection.getItemAt(e.itemIndex);
item.bExampleLabel = {
color: 'blue'
};
$.exampleListSection.updateItemAt(e.itemIndex, item);
}
The above XML code simply has a ListView which contains 2 ListItem, which each contains a label and a button. When you click the button, it makes the label go blue.
However I want it so that it animates it to blue.
Usually this is done like so:
$.elementId.animate({
color: 'blue'
});
However, I do not know how to do this in the context of a ListItem as you cannot seem to access the objects directly.
you can't animate ListItem in listView, you can change only the item properties accessing with bindId
templates : Dictionary
Contain key-value pairs mapping a style name (key) to an ItemTemplate (value).
This property cannot be changed once a window has been opened.
if you want to set animation in listing use TableView, and you can do what you want with TableViewRow
Please consider the following code (also in this fiddle):
var viewModel = {
count:ko.observable(0),
add:function (){
this.count(this.count()+1);
},
popup:function (){
$.modal($("#divPopup"));
}
}
ko.applyBindings(viewModel);
And this corresponding View:
<button id="btnAdd" data-bind="click:add">Add</button>
<button id="btnPopup" data-bind="click:popup">Popup</button>
<div id="divPopup">
<span data-bind="text:count"></span>
</div>
Now:
click Add button
click Popup button
click top right corner of modal window (sorry I can't have "x" image)
Add button don't work
I can't use:
$.modal($("#divPopup").html());
Because in my app html does not render when $.modal().
Or to put it as another question: how I can know when html render was completed when my viewModel changed?
Try passing persist: true in for the options to modal() like:
$("#divPopup").modal({ persist: true });
http://jsfiddle.net/rniemeyer/BxVF9/