I am trying to style a DataGrid component so that the background is transparent (Flex 4). Rgba colors work fine if I make "alternatingItemColors" an attribute on the component, but if I try to declare it in my css stylesheet, I cannot declare the alpha value.
Works (mxml):
<mx:DataGrid id="songGrid" width="800" height="529" dataProvider="{songs}" itemClick="handleRowClick(event);" x="145" y="168" headerStyleName="dataGridHeader" alternatingItemColors="[0xFFFFFFFF, 0xFFFFFFFF]">
Doesn't Work (css):
mx|DataGrid {
alternatingItemColors: #FFFFFFFF, #FFFFFFFF;
}
If I enter the values as "0xFFFFFFFF", I get a parse error, because it's not proper css (of course, most of flex's css isn't proper css, but I digress...). So, is there any way to declare the alpha value of these colors in the css?
You could try extending the DataGrid and making the following override:
override protected function drawRowBackground(s:Sprite, rowIndex:int,
y:Number, height:Number, color:uint, dataIndex:int):void {
var background:Shape = Shape(s.getChildAt(rowIndex));
background.alpha = 0.5; // or whatever alpha value you wish
super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}
CSS3 transparency is described at http://www.w3.org/TR/css3-color/#transparency . From the examples, where the alpha is a number between 0 (fully transparent) and 1 (fully opaque):
em { color: rgba(100%,0%,0%,1) } /* the same, with explicit opacity of 1 */
Related
I am conceiving a horizontal bar containing items.
They must all be of same width, having the same spacing between them.
They can expand as much as they want vertically (
stackblitz here
Problem:
How to automatically set the width of the row elements? Here I simply put a value that looks good: width:200px.
I want them to have a width dependent on the number of element per row.
What I tried:
Using elementRef in Horizontile (component holding the individual tiles, displaying with *ngFor) to get the width of this element:
currentWidth:number;
constructor(private el:ElementRef) {}
ngAfterViewInit(): void {
this.currentWidth=this.el.nativeElement.offsetWidth;}
it returns 5. (??) Using .width returns nothing. Also this is not recommended, I'd like another solution, less coupling.
I noticed I can make use of width:inherit; in the css of the individual tile component, which allows me to set the style from the horizontal list component.
<app-tile [style.width.px]="0.9*currentWidth/nDisplayedTiles" [tile]="item"></app-tile>
As the currentWidth value is zero, of course it doesn't work;
I tried setting it in % but the inherits css tag keeps the %, which is not the intended effect.
Why is the app-tile styling not cared about if inherits is not set?
I tried using ViewEncapsulation but it had no effect either.
This looks like a trivial matter though: did I just miss something?
You can use the offsetParent (link) width and create a method to return the value on each of the cells and call it in your [style.width.px], something like the following will work.
The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.
stackblitz
ngAfterViewInit(): void {
//added this as the compiler was throwing ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.currentWidth=this.el.nativeElement.offsetParent.clientWidth;
});
}
getWidth(): number{
let width:number = 0;
//you may need to change this value to better display the cells
let multiplier = 0.7;
width = (this.currentWidth * multiplier) / this.ndisplayTiles;
width = Math.round(width);
return width;
}
<app-tile [class]="'layout-tile'" [tile]="item" [style.width.px]="getWidth()">
</app-tile>
I have a QDockWidget with a transparent background, but I would like to change the background color or background image when it is floating. It doesn't look like the qt style sheets have a pseudo state to tell you whether or not they are floating, so I'd like to know: is this possible to do?
Found the solution. Add the following connection in the code:
connect(knobDock, &QDockWidget::topLevelChanged, [&] (bool isFloating)
{
if (isFloating)
{
setAttribute(Qt::WA_TranslucentBackground, false);
setAttribute(Qt::WA_NoSystemBackground, false);
}
});
This will cause the dock widgetto use whatever background is specified in the stylesheet when the dock is floating, but it will be transparent (i.e. show the mainwindow background) when it's docked.
You can use custom properties to do this.
Thanks #phyatt for link to Dynamic Properties and Stylesheets.
To declare custom property in your custom class you can write in .cpp:
setProperty("customPropertyName", 1);
or in .h (don't forget to define and implement used get/set access methods too):
Q_PROPERTY( int customPropertyName, READ getCustomPropertyName, WRITE setCustomPropertyName);
And in your global stylesheet file you can use the state of your custom property as following:
.YourClass[customPropertyName="1"] {
background-color: transparent;
}
.YourClass[customPropertyName="2"] {
background-color: black;
}
Also it's needed to reload stylesheet of the object instance after your set new property value, because stylesheets are not recalculated automatically:
object->style()->unpolish(tstFrame);
object->style()->polish(tstFrame);
object->update();
or:
object->setStyleSheet("/* */");
How to set alternatingRowColors alpah color in flex 4.6 spark DataGrid
Answer:
Tnx to www.Flextras.com I found it:
In the DataGrid skin need to override prepareGridVisualElement like this:
public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
{
const dataGrid:DataGrid = grid.dataGrid;
if (!dataGrid)
return;
const colors:Array = dataGrid.getStyle("alternatingRowColors");
rowBackgroundFillColor.alpha = rowIndex % 2 == 0 ? 0 : 0.25;
}
Use the alternatingRowColors or style.
To quote the docs:
Used to initialize the DataGrid's rowBackground skin part. If the
alternatingRowColors style is specified, then use the
alternatingRowColorsBackground skin part as the value of the
rowBackground skin part. The alternating colors for the grid rows are
defined by successive entries in the Array value of this style.
If you want to change how this style is rendered, replace the
alternatingRowColorsBackground skin part in the DataGridSkin class. If
you want to specify the background for each row, then initialize the
rowBackground skin part directly. The default value is undefined.
I have a spark RichText that I want to change his color according with the value on text property.
Negative values get red, positives blue...
When I declare the component, I call a method to set up the css style, but when the value changes, the color is not updated.
How can I put a conditional CSS Style?
Is possible to create custom skins to RichText component?
Thanks
Here is a example of my code:
<s:RichText id="txtOsc" styleName="{getCorOs(txtOsc.text)}" columnCount="1" kerning="on" text="10" whiteSpaceCollapse="preserve" x="460" y="103"/>
..
private function getCorOs(_text:String):String{
if(_text.indexOf("-") > -1){
return "RED";
}else{
//positivo
return "BLUE";
}
}
]]>
..
It creates ok, but if I change the value at runtime to -10, for instance, the color doesn't change.
You need to re-apply the new style: yourText.thePortionToColor.setStyle('color', 0xFFFFFF); or string value - it doesn't matter.
FTQuest
in MXML, there is a Button class which you can instantiate like so:
<mx:Button id="something />
but what if you wanted to dynamically build this in AS3 and add it to the Flex app dynamically, without the use of components (just AS3) and then modify Flex's styles, for example, here you access the Button's properties and set them:
var btn:Button = new Button();
btn.height = 50;
btn.width = 75;
btn.x = 100;
btn.y = 40;
but how would you go about changing the Style, for example:
btn.downSkin = "something";
btn.color = "0xfffff";
I'm sort of starting to lean towards making a flex component in MXMLand than just making it visible true/false, but i like the fact that i create an object in AS3 and then destroy it when I don't need it anymore, than create it again once needed.
This page has a solution to the problem:
Setting and getting Style attributes in ActionScript:
// setting a components styleName to reference a CSS class
component.styleName = "highlight";
// set a Button's background color and font size
submitButton.setStyle( "backgroundColor", 0x000000 );
submitButton.setStyle( "fontSize", 14 );
// get a TextArea's font family and color
textArea.getStyle( "fontFamily" );
textArea.getStyle( "color" );
You could use CSS, either inline or as an external CSS file. That way you don't have to set the properties manually every time you create a button.
/* CSS file */
Button {
borderColor: red;
}
Check out Styling Button control, by Peter deHaan (also read the comments in that post).