Does CSS variables work in a Blazor component with CSS islolation files ?
When my component named Test.razor has no CSS isolation file and has the style set:
<h1 class="mh1">Test</h1>
<style>
:root {
--mblue:#0000ff;
}
.mh1{
color:var(--mblue);
}
</style>
Test is indeed blue.
However if I put the styles in a isolation file name Test.razor.css it does not work.
:root {
--mblue: #0000ff;
}
.mh1 {
color: var(--mblue);
}
The component Test resides in the index page:
#page "/"
<Test></Test>
What am I doing wrong?
The answer is yes, but not so sure that you can use :root in a css isolation file (the class is no longer called :root in a css isolation file -- it gets a random suffix with css isolation).
My approach has been as follows:
Use a wrapper element to provide a context to assign the css variables to.
Then use the variable in the class you assign to the relevant element.
Test.razor
<div class="test-wrapper">
<h1 class="mh1">Text</h1>
</div>
Test.razor.css
.test-wrapper {
--mblue: #0000ff;
}
.mh1 {
color: var(--mblue);
}
say if you already have
.s1 {
....
}
on your .css file
can you define the default to inherit the style of .s1 from the .css file itself?
thanks
Narin
You can separate the css with a comma e.g:
.style, input, div, .style2{
background:#fff;
}
I have a Custom Component that has a couple of Canvas with some background colors assigned to them. Now i have hard coded the colors, i want to move them to an external css file.
So i would like to have the css declaration like this :
ControlBar
{
dividerRightColor: #ffffff;
dividerLeftColor: #f3f3f3;
}
My question is if i can define custom style names like dividerRightColor and if so, how can i use that value inside my MXML Component? I have seen examples of using them inside Pure AS components.
In CSS:
.dividerRightColor {
background-color: #ffffff;
}
.dividerLeftColor {
background-color: #f3f3f3;
}
In MXML:
<mx:ControlBar>
<mx:Canvas styleName="dividerLeftColor">
…
</mx:Canvas>
<mx:Canvas styleName="dividerRightColor">
…
</mx:Canvas>
</mx:ControlBar>
It sounds to me like you need to create the style in the component; not just send the style values into the component as the other answer.
Read this documentation.
Basically, styles don't get defined the same way that properties get defined. You can set any style name on the component you want. However, the component needs to know what to do w/ the style. To do that you need to override the styleChanged method:
override public function styleChanged(styleProp:String):void {
super.styleChanged(styleProp);
// Check to see if style changed.
if (styleProp=="dividerRightColor")
{
// do stuff to implement the style
dividerRight.setStyle('backgroundColor',getStyle('dividerRightColor'));
}
}
A common approach is to set "styleChanged" properties and invalidate the display list and then make the appropriate style changes in the updateDisplayList() method.
To make the style available in code hinting, you'll need to add metadata, like this:
[Style(name="dividerRightColor")]
This will only be required if you wish to set the style as a property in MXML.
Using GWT 2.1, I am trying to create a CSS file that contains numerous constants and common styles. I would like to use the ui:style tag to include it in the UiBinder template:
<ui:UiBinder
xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
<ui:style field="css" src="constants.css" />
</ui:UiBinder>
I can easily utilize the styles for elements:
<g:FlowPanel styleName="{css.panel}">...</g:FlowPanel>
But attempting to use the constants in another Style block fails:
<ui:Style>
.templateSpecificStyle {
background-color: {css.royalBlue};
padding: 1em;
}
</ui:Style>
Oddly I do not receive a compile error. The obfuscated CSS class is created; however, the content is empty. Is there any way to access these CSS constants within another Style block? Is it possible using the older ResourceBundle / CssResource pattern?
After re-reading https://stackoverflow.com/questions/3533211/need-app-wide-css-constants-in-gwt/4143017#4143017 I see that the constants work if you add the template specific style within the style block:
<ui:Style src="constants.css">
.templateSpecificStyle {
background-color: royalBlue;
padding: 1em;
}
</ui:Style>
This is perfect for my needs.
It may be in your best interest to define these constants in some class, then use runtime substitution to include this constant in each CSS resource you intend to use.
CSSConstants.java
package com.foo.client;
public final class CSSConstants {
public static final String ROYAL_BLUE = "#4169E1";
}
Style block in UiBinder template
<ui:style>
#eval royalBlue com.foo.client.ROYAL_BLUE
.templateSpecificStyle {
background-color: royalBlue
}
</ui:style>
Note that even the name of the technique is "runtime substitution", the GWT compiler will replace royalBlue with a string literal because the value of royalBlue can be evaluated at compile time.
For more cool stuff that you can do in CSS resources, take a look at http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource
I have a simple UiBinder widget containing a TextArea:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:TextArea visibleLines="3" />
</ui:UiBinder>
I want to control the background color of this textarea for writeable and read only states. GWT uses the "-readonly" style name decorator to achieve this. So I try this:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style>
.textBoxStyle {
background-color:yellow;
}
.textBoxStyle-readonly {
background-color:lightgray;
}
</ui:style>
<g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>
Obviously this won't work because style names are obfuscated for CssResources resulting in something like this:
.G1x26wpeN {
background-color:yellow
}
.G1x26wpeO {
background-color: lightgray;
}
The result HTML for writeable textarea looks like this:
<textarea tabindex="0" class="G1x26wpeN" rows="3"/>
The read only textarea looks like this:
<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/>
How do I declare the style so GWT will obfuscate the primary part but not the "-readonly" decdorator?
I know that I can disable the obfuscation for the entire style name. But I'd like to keep the obfuscation while making use of the decorators.
At this moment (GWT 2.4) it is not supported, and it's not clear if/when it will be supported, see issue 4746 in the GWT issue tracker.
The workaround is to add #external, which disables obfuscation for those styles. In this case that would be:
#external textBoxStyle, textBoxStyle-readonly;
If you want to use this style for all your read-only TextAreas then I'd suggest just modifying the .gwt-TextArea-readonly style in your GWT theme CSS file.
Otherwise, I can only think of adding your custom style programmatically when you set the TextArea read-only.
PS: from the docs:
<set-configuration-property name="CssResource.obfuscationPrefix" value="empty" />` can be used for minimal-length selector names, but this is only recommended when the GWT module has total control over the page.
I recommend using this (with "empty" or "X" or other unused prefix) for much shorter class names - because at default settings you don't gain that much through obfuscation (textBoxStyle - 12chars, G1x26wpeN - 9chars, X0 - 2 chars ;)).
Why don't you try sth like this
public class MyFoo extends Widget {
interface MyStyle extends CssResource {
String normal();
String readonly();
}
#UiField MyStyle style;
/* ... */
void setEnabled(boolean enabled) {
getElement().addStyle(enabled ? style.normal() : style.readonly());
getElement().removeStyle(enabled ? style.readonly() : style.normal());
}
}
this would allow you change style if a text box is "normal" or readonly...
And off course, in the UiBinder you should have sth like
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:style type='com.my.app.MyFoo.MyStyle'>
.redBox { background-color:pink; border: 1px solid red; }
.normal { color:black; }
.readonly { color:gray; }
</ui:style>
<div class='{style.redBox} {style.normal}'>I'm a red box widget.</div>
</ui:UiBinder>
Try Now This One I Hope You will get it.
With the <ui:style> element, you can define the CSS for your UI right where you need it
Note: <ui:style> elements must be direct children of the root element
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:TextArea visibleLines="3" />
</ui:UiBinder>
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style field='MyStyle'>
.textBoxStyle {
background-color:yellow;
}
.textBoxStyle-readonly {
background-color:lightgray;
}
</ui:style>
<g:TextArea name="myText" styleName="{MyStyle.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>
Isn't there a typo in your UIBinder?
You have:
<g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
.. but I think you need to be using "stylePrimaryName", ie.
<g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" />
But I guess this question has been answered really already..
Here's something valuable I figured out by putting together info from other posts in this thread especially...
If you use #external, you can override gwt styles. The problem is that is this change gets applied globally! It is possible, however, to extend & override select attributes without effecting every instance of a widget type. (This like the programmatic styling method of creating a css class with a gwt class name + a suffix and using addStyleDependantName().)
Here is an example of using UIBinder + a CssResource to extend a gwt style. I left out the CssResource part, but you'll get the idea...
In your xxxx.ui.xml file, expose the gwt style, but don't mess with it!
<ui:style>
#external .gwt-Button; .gwt-Button {}
</ui:style>
Then, style a widget it by specifying 2 (or more) styles in the styleName attribute. I.e. the gwt style, and the one (or more) from your resource.
<g:Button ui:field="submitButton_" text="Submit" styleName="{style.gwt-Button} {res.loginStyles.submitButtonStyle}" />
Here's the css class:
.submitButtonStyle{
margin: 3px 5px 5px 0px;
}
In this case, I defined a button that is styled in the standard method (easily changed via module inheritance) but with a specific margin that will remain fixed. This didn't mess up the global style, it didn't require defining all the attributes manually, and allowed for swapping the global styling at will with clean.css, dark.css, etc.