I want to isolate the style of my components in a file like "ComponentStyle.qml" (Qt5)
ComponentSyle.qml
Item {
id:root
Component {
id: touchStyle
ButtonStyle {
....
}
}
Component {
id: switchStyle
SwitchStyle {
....
}
}
}
So, in my main.qml, I want to use the style like :
main.qml
...
Button {
style: touchStyle
text: "Press me"
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
}
But, it wont work ! I have some errors :
file:///C:/Qt/5.2.0/msvc2012/qml/QtQuick/Controls/Switch.qml:133: TypeError: Type error
file:///C:/Qt/5.2.0/msvc2012/qml/QtQuick/Controls/Button.qml:92: TypeError: Cannot read property 'width' of null
main.qml:60: ReferenceError: touchStyle is not defined*
Is someone can help me ? Thanks a lot !
Unfortunately I think I would have to see more of your ComponentStyle.qml but I think you're missing properties.
You should use these two links to get an overall idea of how to format you code for themes and styles.
Styling - Has great examples on styling text and buttons very applicable to your case.
QmlStyling - Lists different approaches and techniques for implementing styling.
I hope that helps.
Related
Everyone knows about how to set a background for Buttons, Popups etc via the background property of these elements. But I am wondering, how can I create such a property myself for my own custom elements? I found a way but it looks pretty ugly and I can't seem to find the qml code for Button, Popup etc where said property is defined. So i played a bit and came up with the idea of using Bindings like this:
Item {
id: root
property Item background: Rectangle {
color: "red"
}
Binding {
target: root.background
property: "parent"
value: root
}
Binding {
target: root.background
property: "anchors.fill"
value: root
when: root.background.parent == root
delayed: true
}
}
As mentioned that looks pretty tiresome if you need to declare a lot of properties of the child. So, how does Qt do it or what is the proper way of doing it?
// ItemWithBackground.qml
Item {
property alias background: backgroundLoader.sourceComponent
Loader {
id: backgroundLoader
anchors { fill: parent }
sourceComponent: Rectangle { color: 'red' } // default background implementation
}
}
// Usage example:
ItemWithBackground {
background: Rectangle {
color: 'green'
}
}
If you’re on a recent Qt version, have a look at using inline components. They allow you to create API’s like this easily.
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
jQuery UI themes are nice they apply to the entire document, however I have some cases where the style of the dialog such as the title bar colour must be changed.
In my jQuery UI css, the titlebar is coded:
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
Here's my javascript:
var $AlertDialog = $('<div"></div>')
.dialog({
autoOpen: false,
title: 'Alert Message',
buttons: {Ok: function() {$( this ).dialog( "close" );}}
});
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.css('ui-dialog-titlebar','color: red');
$AlertDialog.dialog('open');
};
Alerter() is then called as a substitute for alert().
Accessing and altering the color property of 'ui-dialog-titlebar' has no effect.
Lots of reading preceded this question. Seems others have had similar issues, but not specific to jQuery UI.
How can this be done?
Update:
Thanks to a good hint, I did this:
$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');
Works. But acceptable practice?
My suggestion would be to not use the .ui-dialog selector as there may be more than one dialog on a page. You can traverse to the title bar.
...
$AlertDialog.html(cTxt);
// might as well use the theme since its part of jquery ui
$AlertDialog.prev().addClass("ui-state-error");
$AlertDialog.dialog('open');
Firstly,
According to documentation .css() takes property as param.
It seems you are trying changing ui-dialog-titlebar. Instead try this:
...
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.dialog('open');
$(".ui-dialog .ui-dialog-title").css('color','red');
$(".ui-dialog .ui-dialog-title").css('background-color','orange');
//Assuming you want to change header color only
//see the theming structure at http://jqueryui.com/demos/dialog/#theming
};
is there an Ext-sanctioned way to highlight the default button (the one triggered by pressing Enter) in Ext.MessageBox?
Please note that I do not want to do that by focusing the button when the MessageBox is shown (in case of a "prompt" dialog I want the input element to have focus).
I know I can do that by adding a custom class to the button element but ... maybe there is a better and more Ext-like way of doing this?
Thanks.
In ExtJs 4 you can set the default button as follows:
Ext.MessageBox.defaultButton = buttonIndex;
Where 'buttonIndex' is the index of the button on the dialog. You need to do this before you call Ext.MessageBox.Show.
In short... no. Ext currently provides no method of highlighting a button in any of the Ext.MessageBox components, not via a config option anyway.
There are ways however, depending on the scenario. For example, if you're using Ext.MessageBox.show() (which you can actually use for all message boxes), then you can do something like...
new Ext.Msg.show({
title: 'Test',
msg: 'A sample message box with a button marked as default',
buttons: { ok: '<b>Submit</b>', cancel: 'Cancel' },
fn: function(btn) {
if(btn == 'ok') {
//do something
}
},
icon: Ext.Msg.WARNING
}
All we've done is add <b> tags to one of the buttons in our config, this would show it in bold obviously.
The other way that you've mentioned is to add a custom class and mark the button in a colour of text, you could even just add the class like we did with the <b> tags above to make it easier..
buttons: { ok: '<span class="highlighted-option">Submit</span>', cancel: 'Cancel' },
Other than this style of approach, or without extending the Ext.MessageBox class, there's no other way to achieve this.
Jaitsu has the best answer, but in case this might be useful to somebody else... here is a way to do that with styles.
The same trick can be applied to any other button (like: Window buttons).
Add this to your css:
.x-btn-default td.x-btn-mc {
outline: 1px dotted black;
}
Then define buttons like this:
...
,buttons: [
{
text: 'Ok',
,handler: handleFn
,cls: 'x-btn-default'
},{
text: 'Cancel',
,handler: handleFn
}
]
,...
I have the following code to create and apply a few styles for a custom TextArea in ActionScript 3.
public class MyCustomTextArea extends TextArea
{
override protected function createChildren():void
{
super.createChildren();
this.styleSheet.setStyle("sup", { display: "inline", fontFamily: "ArialSup", fontSize:"12"});
this.styleSheet.setStyle("sub", { display: "inline", fontFamily: "ArialSub", fontSize:"12"});
this.setStyle("fontFamily", "Arial");
}
}
I have two problems with this code.
this.styleSheet is always null when I create an instance of the class. If this.styleSheet is initialized to new StyleSheet() to avoid this issue, then the TextArea instance does not seem to recognize any of the HTML tags that can be used with the htmlText property.
Can anyone help in fixing these two issues? Thanks.
First off - the styleSheet property of a TextArea component is null by default - what you're seeing is an expected behavior.
You're also creating your css stylesheet in an unusual way - perhaps this is where your problems are coming from? I'd try either loading, or defining inline, a stylesheet to apply to your text area. There's an example of loading and applying a stylesheet here: http://blog.flexexamples.com/2008/03/22/applying-a-cascading-style-sheet-to-a-textarea-control-in-flex/
Also, what are ArialSub and ArialSup? If these aren't valid font names flex won't recognize them and use them.