Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML + CSS
Forum Updated to NodeBB v4.3 + New Features

QML + CSS

Scheduled Pinned Locked Moved QML and Qt Quick
17 Posts 7 Posters 27.6k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • T Offline
    T Offline
    Tomme
    wrote on 26 Jul 2014, 12:57 last edited by
    #6

    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);}
    }
    

    }@

    1 Reply Last reply
    0
    • M Offline
      M Offline
      madoodia
      wrote on 26 Jul 2014, 13:09 last edited by
      #7

      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;
      }

      1 Reply Last reply
      0
      • T Offline
        T Offline
        Tomme
        wrote on 26 Jul 2014, 13:29 last edited by
        #8

        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 ?

        1 Reply Last reply
        0
        • ? Offline
          ? Offline
          A Former User
          wrote on 2 Aug 2014, 05:05 last edited by
          #9

          [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

          1 Reply Last reply
          0
          • M Offline
            M Offline
            madoodia
            wrote on 2 Aug 2014, 05:35 last edited by
            #10

            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

            1 Reply Last reply
            0
            • ? Offline
              ? Offline
              A Former User
              wrote on 2 Aug 2014, 06:44 last edited by
              #11

              [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.

              1 Reply Last reply
              0
              • M Offline
                M Offline
                madoodia
                wrote on 2 Aug 2014, 07:39 last edited by
                #12

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

                1 Reply Last reply
                0
                • ? Offline
                  ? Offline
                  A Former User
                  wrote on 2 Aug 2014, 07:53 last edited by
                  #13

                  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

                  1 Reply Last reply
                  0
                  • M Offline
                    M Offline
                    madoodia
                    wrote on 2 Aug 2014, 08:24 last edited by
                    #14

                    thanks
                    good example

                    1 Reply Last reply
                    0
                    • ? Offline
                      ? Offline
                      A Former User
                      wrote on 2 Aug 2014, 08:30 last edited by
                      #15

                      Welcome. Glad to hear from you.

                      1 Reply Last reply
                      0
                      • RokeJulianLockhartR Offline
                        RokeJulianLockhartR Offline
                        RokeJulianLockhart
                        wrote on 18 Feb 2025, 12:09 last edited by RokeJulianLockhart
                        #16

                        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.

                        When using a forum, remember to tag the person you are responding to, in case they are not subscribed to the thread.

                        1 Reply Last reply
                        0
                        • B Offline
                          B Offline
                          Bob64
                          wrote on 18 Feb 2025, 13:08 last edited by
                          #17

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

                          1 Reply Last reply
                          2

                          • Login

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Categories
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Groups
                          • Search
                          • Get Qt Extensions
                          • Unsolved