Stylesheets

[tezine]

Hi,
QmlWeb is awesome! It's great to have the qml syntax for web development!
I have only one concern. Since there are many free components already created using html/css, I'd like to know if there is some way to "insert" them into qmlweb "Qt Quick Controls".
It would be great if we could create QML controls using already created Vuejs components or if we could style qmlweb components using css files.
I know this would break compatibility with QML, but imagine the following cenario:
I'm using QML Web controls and I want to style a Button. It would be nice if I could apply a css into it or even create the Button using Vuejs and use it in QMLWeb. All with anchors and QML syntax.
Is this possible?
Bruno.

[stephenmdangelo]

I have a few commits that allow you to set "null" on certain properties (e.g. Text/Rectangle color). This would then allow you to style them, as they would not be overwritten in the "style" attribute with the default QML value.

I also have a commit that adds the "objectName" to the "class" attribute, allowing some more control over styling.

If you're interested I can publish them.

[tezine]

Hi Stephen, it would be great!
How does it work? I mean, in order to set a css, I set class: 'my.css'?

[ChALkeR]

Since there are many free components already created using html/css, I'd like to know if there is some way to "insert" them into qmlweb "Qt Quick Controls".

Yes, that should be possible. As upstream Qt does not support that, the target for that should be in a separate module — and that module is QmlWeb.DOM.

Currently, it just supports something like this:

import QtQuick 2.0
import QmlWeb.Dom 0.1

Item {
  DomElement {
    tagName: "code" // the tag that you are constructing
  }
}

Those could be nested.

But the idea is to add properties/css/js initializers there, so that any HTML components could be reused using QmlWeb.Dom module.

[stephenmdangelo]

@tezine Here are the commits I'm using: https://github.com/stephenmdangelo/qmlweb/tree/css_styling_support

You can use it as follows:

QML:

import QtQuick 2.0

Text {
    objectName: "my_text_class"
    color: null
}

css:

.my_text_class {
    color: "blue"
}

@ChALkeR I didn't submit a PR for these, as I don't know if this is a thing we want to actively support? Maybe just the objectName stuff?

[ChALkeR]

@stephenmdangelo I have no objections to adding classes based on objectName, but I don't think that will help us much with styling — as in most cases style is explicitly defined per-element (which has a higher priority).

Commit Text: Support "color" being set to "null" is not compatible with Qt QML, so we probably shouldn't do that — it breaks compatibility from QmlWeb QML to Qt QML in an unobvious way.

What could be done here to make the compat break a visible opt-in is to define an attached property in module QmlWeb.DOM that will allow to change the behaviour of other elements.

For example:

import QtQuick 2.0
import QmlWeb.Dom 0.1

Text {
    Dom.noStyle: true
    Dom.id: 'myElement'
    Dom.className: 'red box'
}

I am not sure how exactly could we achieve that and I'm personally not planning working on that, but that approach makes the behaviour difference clearly visible and makes it an opt-in.

[stephenmdangelo]

@ChALkeR I agree wholeheartedly. In fact, that is the exact reason I was looking into properly supporting attached properties a while back.

[ChALkeR]

60759ee landed an now allows to do this:

import QtQuick 2.0
import QmlWeb.Dom 1.0

DomElement {
  width: 100
  height: 200
  attrs.id: 'myElement'
  style.background: 'green'
}