In vue it's easy to change the class of an element dynamically. However, what I want to do has nothing to do with that:
I have an attribute color with the value #333 for example. Now I want to build a css class like:
.myColorClass > a {
color: this.color;
}
It's not possible for me to style every single element a individually with the style attribute. So how do I approach this problem with Vue?
Related
I have an Ionic Vue3 app. I'd like to change the background color of the whole page. I'm new to Ionic but I believe the way this has to be done (due to the use of Web Components/Shadow DOM) is to modify the --ion-background-color CSS custom property rather than trying to set the value of the normal CSS property, so this works:
.ion-page {
--ion-background-color: red;
}
...but this doesn't:
.ion-page {
background-color: red;
}
Fine, so I do the former, but the problem now is that all elements within the page (everything inside the <ion-page></ion-page> element which use that same custom property value now inherit the same background color.
Does anyone know how to scope the change of background colour of the ion-page element such that it doesn't cascade through descendent elements? Thanks :)
The solution here was to use local CSS custom property --background rather than the global property --ion-background-color. So the following works:
.ion-page {
--background: red;
}
I didn't previously realise there were different sets of CSS variables for different scopes.
In my Chessly.github.io project I use Customized Built-In IMG Elements to define SVG chesspieces:
Question: How can I distinguish a regular IMG from a customized IMG?
document.body.append(
document.createElement("IMG", {
is: "white-queen"
});
);
This creates a chesspiece, but does not set the is= attribute
I now explicitly set the is= attribute myself, but since this attribute does nothing and can be set to any value (I use is as an observed attribute in my Custom Element code) it is not a solid way to distinguish IMG elements from Customized IMG elements when walking the DOM.
If I promote a pawn (replace the img src)
<img is=white-pawn/>
with element.setAttribute("is","white-queen")
How can I determine the piece originally was the white pawn?
It still is a white-pawn in the Custom Elements registry.
Am I overlooking something?
Simplified code (with basic SVG shape) in JSFiddle: https://jsfiddle.net/dannye/k0va2j76/
Update: Code (based on correct answer below)
let isExtendedElement = x =>
Object.getPrototypeOf(x).__proto__.constructor.name !== 'HTMLElement';
note! This does NOT catch Autonomous Custom Elements!
maybe better:
let isBaseElement = x =>
Object.getPrototypeOf(Object.getPrototypeOf(x)).__proto__.constructor.name=='Element';
I think adding explicitly the is attribute is the best solution for now.
Else you'll have to deal with the class reference. In your case:
yourElement.constructor === customElements.get( 'circle-image' )
yourElement.constructor === CircleImage //if it's the named class
This supposes that you know the name of the custom elements you want to check.
Else you'll have to go through the protoype chain:
CircleImage --> HTMLImageElement --> HTMLElement --> Element --> Node
If HTMLElement is only the father, it's a built-in element.
If HTMLElement is the grandfather (or grand-grand...), it's probably an extended build-in element.
update
If you use a named class you can also retrieve its name:
elem.constructor.name
I'm trying to dynamically change some field color when it has changed due to some processing.
CUBA documentation explains how to do it statically through web theme extension (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html), but not dynamically. Although it is possible in Vaadin (https://vaadin.com/wiki/-/wiki/Main/Dynamically%20injecting%20CSS) on which platform web gui is built upon.
I suppose that if I use the Vaadin way of injecting CSS it will work (which I will try) but I will then have Vaadin specific code, which I'm trying to avoid.
Is there a CUBA way of doing so I'm missing ?
Edit:
I'm trying to have any field of a form to change background color when it has changed from its initial value. As per CUBA documentation (https://doc.cuba-platform.com/manual-6.2/web_theme_extension.html) I need to :
- create a SCSS mixin with background color
- inject the field in the editor class in order to have access to it
- react to a field change event and then define the style name of the field
I did create the SCSS mixin, but two issues I have :
1) I would like to retrieve the field instance dynamically instead of injecting it (keep code clean and light)
2) I would like to avoid defining the background color statically so that the color could be parameterized at runtime
For 1) I tried to injected the fieldGroup and used getFieldComponent(), then applied the style with setStyleName on it when it is changed. It worked but I would prefer to define this behavior for every field that is an input field.
For 2) apart from using Vaadin specific feature of injecting CSS (and tighing my code to Vaadin (and so leading me away of generic interface) I do not see how to do
Hope it's more clear
You cannot set truly dynamic color (any RGBA) from code to field but you can create many predefined colors for your field:
#import "../halo/halo";
#mixin halo-ext {
#include halo;
.v-textfield.color-red {
background: red;
}
.v-textfield.color-blue {
background: blue;
}
.v-textfield.color-green {
background: green;
}
}
I do not recommend using styles injected from code (as Vaadin Page does) since it is a mixing of logic and presentation. Instead you can create all predefined styles (30-50 styles should be enough) and assign it depending on some conditions using setStyleName method:
public class ExtAppMainWindow extends AppMainWindow {
#Inject
private TextField textField;
private int steps = 0;
public void changeColor() {
if (steps % 2 == 0) {
textField.setStyleName("color-red");
} else {
textField.setStyleName("color-blue");
}
steps++;
}
}
If you want to apply the logic of color change for all TextFields inside of FieldGroup you can iterate FieldGroup fields in the following way:
for (FieldGroup.FieldConfig fc : fieldGroup.getFields()) {
Component fieldComponent = fieldGroup.getFieldComponent(fc);
if (fieldComponent instanceof TextField) {
TextField textField = (TextField) fieldComponent;
textField.addValueChangeListener(e ->
textField.setStyleName("color-red")
);
}
}
Some Ext JS container exposes CSS variables without any mixin. For example, fieldcontainer. In my custom theme I want to style two fieldcontainers differently using the available CSS variables for fieldcontainer.
I know it can be done by applying CSS. Is there a way to achieve it by setting the CSS variables?
For example,
.my-class-one {
$form-label-font-color: #FFFFFF
}
.my-class-two {
$form-label-font-color: #000000
}
Is it possible? If possible, where do I put this code?
You could do something like that:
Define a style in the sass/src/ folder:
.my-class-one .x-form-item-label{
color: $my-class-one-label-color;
}
.my-class-two .x-form-item-label{
color: $my-class-two-label-color;
}
...and initialize the variables in the sass/var/ like this:
$my-class-one-label-color: #FFFFFF;
$my-class-two-label-color: #000000;
You should put your scss variables in the sass/var/ folder and your styles in the sass/src/ folder.. And in these two folders keep the same structure as in your app folder. so if you write a style for your view in app/view/Home.js so place your style in the sass/src/view/Home.scss file.
Useful link: http://docs.sencha.com/extjs/4.2.1/#!/guide/theming
Above approach should work though i personally avoid adding style to internal class names.
Another approach could be defining a new UI for your container.
Have a look at:
Creating Custom Component UIs section in theming guide.
Is there a way to set the background colour of a div in blueprint?
I noticed that class=error will set the colour to pink (notify/success are similar):
<div class="error">
<p>whatever</p>
</div>
But I want to know if there is a way to set the div to some arbitrary color?
EDIT: I don't actually care about error/notify/success. I just want to be able to set the color of a div in a similar way that they do, but using a color of my choice.
Time to state the obvious - why can't you just override the div.error rule with your own?
div.error { background:black; color:#fff; } .. or are you not trying to break some sort of weird convention? If so you can use a different classname.
Just... define your own CSS class and set the background and/or (for font color) color properties to color values; then set a div to have that as one of its classes?
Yes, you can easily over-ride the CSS by specifying a rule for error in your main CSS file.
That should ideally over-ride the default colors. Else, just ensure that you use a higher specificity in your rule, something like: div.container div.error { color: red; }
You can set any color on this particular div by adding an id attribute:
<div class="error" id="myblueprint">
<p>whatever</p>
</div>
Then add in your CSS file:
#myblueprint { background:blue; }