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.
  • S Offline
    S Offline
    srikanth_trulyit
    wrote on 20 May 2011, 11:27 last edited by
    #3

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

    1 Reply Last reply
    0
    • S Offline
      S Offline
      Schneidi
      wrote on 20 May 2011, 12:26 last edited by
      #4

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

      1 Reply Last reply
      0
      • M Offline
        M Offline
        madoodia
        wrote on 12 Jul 2014, 07:40 last edited by
        #5

        hi Schneidi
        can you explain your work with example?
        thanks

        1 Reply Last reply
        0
        • 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