I'm using Vuetify's v-btn button component with a variety of colors set via the color prop. Once a user clicks the button, I set disabled to true so they can't click it again, but the button loses its color and gets greyed out.
Is there any way to disable the button without changing its color to grey?
Instead of disabled prop you could use your custom class with pointer-events: none, e.g.
.disable-events {
pointer-events: none
}
<v-btn :class="{'disable-events': customCondition}">
Then add additional styling to that class if needed.
I do it by removing v-btn--disabled and playing with vuetify's css classes.
Still grey but with colored text solution
The button will still be grey, but text will be colored, like that you have a visual effect showing that the button is disabled but still have a colored part.
I, personally, also had some custom opacity to disabled buttons.
HTML
<v-btn id="btnA" :disabled="true" color="success">Success</v-btn>
CSS
button.v-btn[disabled] {
opacity: 0.6;
}
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
})
}
CodePen
Same display solution
If you really want, the same display you will have to remove [color]--text and add [color] class (and sometimes add white--text class for readability).
JS
created(){
// Trick to remove class after initialising form
this.$nextTick(() => {
document.getElementById('btnA').classList.remove('v-btn--disabled')
document.getElementById('btnA').classList.remove('success--text')
document.getElementById('btnA').classList.add('success')
})
}
CodePen
As Vuetify allready use important! in .v-btn--disabled it's not possible to just override this class. But with the use of a higher level selector like id (example: #custom-disabled which selects id="custom-disabled") you can. This doesen't keep the original colors but you are at least able to override the class to your liking.
<v-btn :disabled="true" id="custom-disabled">
Button
</v-btn>
<style>
#custom-disabled.v-btn--disabled {
background-color: red !important;
}
</style>
For light and dark theme:
<style>
#custom-disabled.v-btn--disabled.theme--light {
background-color: red !important;
}
#custom-disabled.v-btn--disabled.theme--dark {
background-color: brown !important;
}
</style>
Okay so you can do it by disabling the pointer events as mentioned in other comments but if someone is using a keyboard they can still tab to the control and if you are writing automated tests the button can still be clicked.
You can manually override the style and change the disabled button colour in the css however this will potentially be a problem if you are manually setting the color through the color="" property on v-btn based off a theme (because your application supports branding for different clients for example) because Vuetify doesn't just override the color, it stops adding the color altogether.
So my solution was to simply set the button color via a style attribute and set the important flag (to override the disabled important flag) note that you will need to change the text color as well.
<v-btn
:style="{
color: `${getTxtColor()} !important`,
backgroundColor: `${getBtnColor()} !important`
}"
:disabled="status"
#click="doSomething"
>
Click Here
</v-btn>
This approach should play nice with testing, themeing, and will not allow users to tab to the button accidentally.
My question is pretty basic.
How to add styling from a css-file to a basic vaadin component?
What I do NOT want to use:
PolymerTemplate
getStlye().set(...)
Do I have to #ImportHtml, which includes the css-code or do I have to #StyleSheet with the css-file? And afterwards, do I have to add the "css-style" via .getElement().getClassList().add(...)?
I really need help to have a working simple code example for a Label, Button or whatsever, please. I cannot find anything to satisfy my requirements.
In our documentation we guide to use #ImportHtml in MainView for global styles as a html style module.
In the global style module you can apply themable mixins to change stylable shadow parts, etc. of the components.
In case your target is not in shadow DOM, you can set the styles in custom styles block directly, e.g.
Say you have a Label and TextField in your application
// If styles.html is in src/main/java/webapp/frontend/ path is not needed
#HtmlImport("styles.html")
public class MainLayout extends VerticalLayout implements RouterLayout {
...
Label label = new Label("Title");
label.addClassName("title-label");
add(label);
...
TextField limit = new TextField("Limit");
limit.addClassName("limit-field");
add(limit);
...
}
And in src/main/java/webapp/frontend/styles.html
<custom-style>
<style>
.title-label {
color: brown;
font-weight: bold;
}
...
</style>
</custom-style>
<dom-module theme-for="vaadin-text-field" id="limit-field">
<template>
<style>
:host(.limit-field) [part="value"]{
color:red
}
</style>
</template>
</dom-module>
And your "Title" text will have brown bold font, and the value in text field will be red, but its title un-affected.
See also: Dynamically changing font, font-size, font-color, and so on in Vaadin Flow web apps
So what I have is a React project with Bootstrap.css loaded. I'd like to somehow override the variables, so for instance I have a bunch of buttons like
<button className="btn btn-primary">Hello</button>
Which basically 'inherit' the color from:
:root {
--primary: somecolor;
}
Is there a way to somehow override this? I've tried passing it in as inline style to components, like <Component style={{"--primary" : "red"}} /> which will override the :root { --primary }, but the button colors will remain the same. What's the easiest way to do this, considering I'm supporting dynamic colors, so I can't create a few CSS files, and it would be good if I didn't have to rewrite every single button I have to be a styled-component that minds props!
There's not really an easy way to do this. You could generate the CSS for the "custom" primary colors in SASS, and then add a "root" primary color class to the component like this...
SASS to generate "primary" color Bootstrap CSS
/* import the necessary Bootstrap files */
#import "bootstrap";
#mixin build-primary-classes($color) {
/* background classes */
#include bg-variant(".bg-primary", $color);
/* btn classes */
.btn-primary {
#include button-variant($color, $color);
}
.btn-outline-primary {
#include button-outline-variant($color);
}
/* text- classes */
#include text-emphasis-variant(".text-primary", $color);
/* badge classes */
.badge-primary {
#include badge-variant($color);
}
/* borders */
.border-primary {
border-color: $color !important;
}
}
$customprimarycolors: (
"purple": purple,
"red": red,
"orange": orange
);
#each $colorName, $color in $customprimarycolors {
.#{$colorName} {
#include build-primary-classes($color);
}
}
JS
class Hello extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div className={this.props.className}>Hello <button className="btn btn-primary">Button</button></div>
);
}
}
ReactDOM.render(<Hello className="red" />, document.getElementById('root'));
Codeply demo: https://codeply.com/go/R4X5x8taiH
Not sure if this will work, but an idea...
Could you edit your bootstrap.css file like this
:root { --primary: unset; }
That way you wouldn't have to overwrite any bootstrap styles?
HONESTLY ... I am not sure if it is a good idea to try to overwrite in CSS a few part of the classes bootstrap builds on a color var like $primary but let's the rest of the classes build on the same var as it is.
That's the way trouble raises up ...
An IMHO better way would be to do it the way Bootstrap provides it:
Changing in SASS the basic var $primary to the new wanted color in Bootstrap the color will change and the classes are there. Or adding a new color $additional-color and adding the color to map $theme-color and all the additional classes are build up on the fly ... Just have a look to the docs ... it is much more easier than it seems to be on the first look:
https://getbootstrap.com/docs/5.0/customize/color/
So yes: in SASS theming is possible just setting/adding the color vars.
But if in a project it is not possible to use SASS or the direct setup is not wanted for some reasons ... there are many free easy to use theming tools in the web which do the job for you. Than you are able to import a clean and consistend Bootstrap CSS with your wanted colors. Because that it is as easy Bootstrap is as successful (what not means I/you need to like it). As Bootstrap 5 still is Beta here an example for BS4 ...
http://pikock.github.io/bootstrap-magic/app/index.html#!/editor
NOTE: only changing/overwriting the CSS color vars in CSS file is not enough as the colors in the classes are hard coded to the original hex colors. You indeed would have to overwrite the original classes which leads to doubled code structures.
Does anyone know how can I change mat-spinner color in Angular Material?
Overriding css doesn't work. I tried changing color in material files but they can only be imported, I can't change anything there.
I want it to be my custom color, not color from prebiult-themes.
Use this code for ** < mat-spinner >** add this code in your .css file
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #3fb53f;
}
This answer will work for those who're looking for a flexible solution in Angular 4 / 6 / 7. If you wan't to change the color of a mat-spinner at a component level, you'll need to use the ::ng-deep selector. Knowing this, the solution is quite easy.
In your html file:
<div class="uploader-status">
<mat-spinner></mat-spinner>
</div>
In your css / scss file:
.uploader-status ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #000000;
}
Notice that the .uploader-status css class encapsulates the component. You could just use ::ng-deep without using a class but then whatever changes you're doing to the mat-spinner will appear in other areas of the application. Check this to learn more.
Easy Fix!
Add custom css rules inside styles.css instead of component.css file
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}
To your .css/.scss component file style add (it will works locally - in component only)
:host ::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #bada55;
}
If you don't want to mess around with the global css and need a way to set the spinner to different colors in different areas of your app, I would strongly recommend to create a directive for it.
import { Directive, Input, ElementRef, AfterViewInit } from '#angular/core';
#Directive({
selector: "[customSpinner]"
})
export class CustomSpinnerDirective implements AfterViewInit{
#Input() color: string;
constructor(
private elem: ElementRef
){}
ngAfterViewInit(){
if(!!this.color){
const element = this.elem.nativeElement;
const circle = element.querySelector("circle");
circle.style.stroke = this.color;
}
}
}
Then the spinner should work like this:
<mat-spinner diameter="22" customSpinner color="#fff"></mat-spinner>
mat-spinner html code :
<mat-spinner color="accent" diameter="20" class="loading"></mat-spinner>
And now sass code :
.mat-spinner {
::ng-deep circle {
stroke: #33dd82;
}
}
Color is build in.
Theming
The color of a progress-spinner can be changed by using the color property. By default, progress-spinners use the theme's primary color. This can be changed to 'accent' or 'warn'.
https://material.angular.io/components/progress-spinner/overview
example
<mat-spinner color="warn"></mat-spinner>
I think the key here is that is must be in the GLOBAL styles.css file. The below solution does work if placed there (should be the CSS file affected when material was added to the project if added with ng add:
.mat-progress-spinner circle, .mat-spinner circle {
stroke: #b68200;
}
Of course you could also add classes to the component and specify different selectors if you want distinctly styled spinners. However, it seems the classes must be in the global CSS file.
Late to the game, but this worked well in my .scss file today...
.parent-element-class {
::ng-deep
.mat-progress-spinner,
.mat-spinner {
circle {
stroke: white;
}
}
}
In your styles.css file, add...
::ng-deep .mat-progress-spinner circle, .mat-spinner circle {
stroke: #2A79FF!important;
}
As you might have guessed, I have just made a simple modification to Nitin Wahale's answer. I have prefixed his answer with ::ng-deep and it worked in my case as I had the same issue.
I hope this helps somebody
By default angular material would give your spinner default color of primary.
You can use 3 colors available in pallet that would be primary, accent, warn.
However, if your needs are of different color please consider anyone of the below options.
Easy way(not recommended)
You can use any of method to override css forcefully mention in other answers. I would recommend using parent class above spinner element if you do not want spinner to be of same color throughout the application.
The correct and recommended approach would we to use custom-theme for material. If you already have custom you can just
do like creating a custom mixin called
//here $primary-color is the color you want your spinner to be
#mixin spinner-custom-theme($primary-color, $accent-color, $warn-color) {
$custom-spinner-theme-primary: mat-palette($primary-color);
$custom-spinner-theme-accent: mat-palette($accent-color, A200, A100, A400);
$custom-spinner-theme-warn: mat-palette($warn-color);
$custom-spinner-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
#include mat-progress-spinner-theme($custom-spinner-theme);
}
Now go to file where #include angular-material-theme($custom-theme);
is written
and #include your mixin just below the #include angular-material-theme($custom-theme);
To know more on how to create custom theme you can check this blog here
Sample Color, strokeWidth, diameter and title
<mat-spinner strokeWidth="24" [diameter]="85" color="warn" title="Tooltip text here"></mat-spinner>
In your css file mention like below:
::ng-deep.mat-progress-spinner circle,.mat-spinner circle {stroke: #f2aa4cff !important;}
Here, ::ng-deep will be used to force a style.
!important here what says is that "this is Important",you ignore all other rules and apply this rule.
.mat-mdc-progress-spinner { --mdc-circular-progress-active-indicator-color: white; }
This worked for me using Angular 15.
This is best achieved by doing a custom theme.
https://material.angular.io/guide/theming
use this code
<md-progress-circular md-diameter="20px"></md-progress-circular>
md-progress-circular path {
stroke: purple;
}
In case you guys want to customize each spinner on your webpage. You can do it this way:
svg .mat-progress-spinner circle, .mat-spinner circle {
stroke: inherit;
}
And now on mat-spinner add class:
<mat-spinner class="custom-spinner-color"></mat-spinner>
And in css file:
.custom-spinner-color {
stroke: #234188;
}
That was what I wanted to achieve. I suppose if you look for this question you probably want the same.
Mat progress spinner custom timer, I changed to 3 different colors based on the value passed to mat spinner. Pls refer : https://material.angular.io/components/progress-spinner/examples
<mat-progress-spinner class="mat-spinner" [color]="progressColor"
[diameter]="170" [strokeWidth]="14"[mode]="'determinate'"
[value]="progressLabel">
</mat-progress-spinner>
Ts file
timer: number = TIMER; // say 60 seconds
progressColor: ThemePalette = 'accent';
timerPercent: number = 0;
progressLabel: number = 100;
startTimer() {
this.timer = TIMER;
this.timerInterval = setInterval(() => {
if (this.timer <= 0) {
clearInterval(this.timerInterval);
this.timerFinish();
}
if (this.timer > 0) {
this.progressColor =
this.timerPercent > 69
? 'warn'
: this.timerPercent > 49
? 'primary'
: 'accent';
this.timer--;
this.timerPercent = (100 * (TIMER - this.timer)) / TIMER;
this.progressLabel = 100 - this.timerPercent;
}
}, 1000);
}
For me this is how I do it clean without messing with anything globally:
in my .css
::ng-deep .customColorSpinner circle {stroke: #4e1e1e!important;}
in my .html
<mat-spinner class="customColorSpinner"></mat-spinner>
You can use a custom Angular Directive to solve this problem. The directive allows you to set a custom color on the mat-spinner like this:
<mat-progress-spinner spinnerColor="#09ff00"></mat-progress-spinner>
I have an article here where I explain this and thoroughly show you how to solve it
In component.scss where your mat-spinner exists, just add this :
::ng-deep .mat-mdc-progress-spinner {
--mdc-circular-progress-active-indicator-color: #7D469A;
}
I have a IButton instance and I want to change its name and color after click.
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
if(button.getTitle().equals("Enabled")) {
button.setTitle("Disabled");
button.setTitleStyle("disabledButton");
}
else {
button.setTitle("Enabled");
button.setTitleStyle("enabledButton");
}
}
});
As we do in general GWT project,
I have added following to the default .css file:
.enabledButton {
color:green;
}
.disabledButton {
color:red;
}
But when I run the application, it is not showing either red or green color.
Is there any other way in SmartGWT to apply CSS styles?
IButton is a StatefulCanvas, which means it handles states. This is done by adding suffixes after the base style name. For example if you set the titleStyle to "enableButton" and you move your mouse over the button, it will look for the css class: enableButtonOver. If the button is also focused, it will look for enableButtonFocusedOver etc (there are a couple of suffix combinations). Your example works if you click outside from the browser, so it will lost the focus and simply will use the enableButton css class. You can disable each state by for example setShowFocused(false). See the api.