QML + CSS

Schneidi

Hey guy, I'm looking for a suitable approach to declare styles for my qml layout.

I don't know whether there is any way to use some kind of CSS within qml.
So what can I do to realize something like that.

I would create a qml file with several properties which I can import in my other qml files.
But is this really necessary ?

srikanth_trulyit

So far i guess that is the way out.

srikanth_trulyit

I think you already referred to "this":http://developer.qt.nokia.com/wiki/QmlStyling ,i got an idea from that guide itself.

Schneidi

The .qml approach could be one way.
I implement a javascript file with objects which provide the style information.
This work pretty well too.

madoodia

hi Schneidi
can you explain your work with example?
thanks

Tomme

Hi Madoodia,
I think Schneidi do that :
Create a Js script called "Style.js" for example :
@function styleText( myText) {
myText.font.family= "Serif"
myText.font.italic= true
myText.font.pointSize= 6
}@
And in the qml file you want to use it :
@import QtQuick 2.2
import QtQuick.Window 2.1
import "Style.js" as Style

Window {
visible: true
width: 360
height: 360

MouseArea {
    anchors.fill: parent
    onClicked: {
        Qt.quit();
    }
}

Text {
    id: text
    text: qsTr("Hello World")

    anchors.centerIn: parent
    Component.onCompleted: {Style.styleText(text);}
}

}@

madoodia

thnks
but i need define a line in CSS format.then use it.
you know?
like this :
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

Tomme

I'm not sure I understand you very well.
In pure QML you can't use CSS (I don't think so). Maybe are you working with a webview or a textedit or a QtQuickControl ?

? Offline

[quote author="Tomme" date="1406381356"]I'm not sure I understand you very well.
In pure QML you can't use CSS (I don't think so). Maybe are you working with a webview or a textedit or a QtQuickControl ?[/quote]

Hello,

Here the "CSS span" property is used in QML Text item.
I think we can use the css directly in QML files.

@import QtQuick 2.0
Rectangle {
width: 400; height: 400
Text { Text: "Hello <span style="font-size:24px">world</span>"; textFormat: Text.RichText}}@

Regards
Ansif

madoodia

nice example
but if we want to use CSS for styling a rectangle, what should i do?
for example when we want to use dashed border for a rectangle

thanks again

? Offline

[quote author="Tomme" date="1406381356"]I'm not sure I understand you very well.
In pure QML you can't use CSS (I don't think so). Maybe are you working with a webview or a textedit or a QtQuickControl ?[/quote]

Sorry it was a mistake form my side. I agreed with Tomme as we cannot use CSS in pure QML.
But chick this new Styling technique available in Qt 5.3, "QML Styling":http://qt-project.org/doc/qt-5/qtquickcontrolsstyles-index.html

QML provides most of the features of CSS and javascript. Also check this "link":https://qt-project.org/wiki/QmlStyling.

madoodia

thanks
i know styling but i could not get my result in dashed border of rectangle yet.
i try to reach to it

? Offline

Will this help you, "QML Rectangle custom border":http://stackoverflow.com/questions/16534489/qml-control-border-width-and-color-on-any-one-side-of-rectangle-element

madoodia

thanks
good example

? Offline

Welcome. Glad to hear from you.

RokeJulianLockhart

Does QML support CSS? forum.qt.io/post/584878 appears to indicate that it does, yet this thread, and the existence of github.com/Ableton/aqt-stylesheets, indicate otherwise.

Bob64

I wonder if that forum post is referring to text components that support html to some extent, rather than to QML itself?