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. Howto show button as Active/InActive on click in QML
Forum Updated to NodeBB v4.3 + New Features

Howto show button as Active/InActive on click in QML

Scheduled Pinned Locked Moved QML and Qt Quick
5 Posts 3 Posters 1.2k Views
  • 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.
  • P Offline
    P Offline
    pingal
    wrote on 17 Jan 2022, 04:38 last edited by pingal
    #1

    I would like to show my button as in-active when "clicked". I've created button like below

    Button {
        id: myButton
        text: "Active"
        font.pixelSize: 18
        
        onClicked: {
           // What should I do here in order to show my button as inactive when clicked ?
        }
    }
    

    I would also like to toggle text of my button when clicked. i.e. From Active to Inactive on click

    Example:

    Capture.PNG

    1 Reply Last reply
    0
    • M Offline
      M Offline
      Markkyboy
      wrote on 17 Jan 2022, 11:41 last edited by
      #2

      You could use 'if/else' to toggle the text of the button when clicked;

              Button {
                  id: myButton
                  text: "Active"
                  anchors.centerIn: parent
      
                  onClicked: {
                      if  (myButton.text === "Active")
                           myButton.text = "Inactive"
                      else myButton.text = "Active"
                  }
              }
      
      1 Reply Last reply
      0
      • P Offline
        P Offline
        pingal
        wrote on 18 Jan 2022, 03:57 last edited by
        #3

        And howto fade the color of button in-order to view it as an In-Active ? Just as shown in my first post button "DISABLED"

        1 Reply Last reply
        0
        • M Offline
          M Offline
          Markkyboy
          wrote on 18 Jan 2022, 10:45 last edited by Markkyboy
          #4
          This post is deleted!
          1 Reply Last reply
          0
          • L Offline
            L Offline
            lemons
            wrote on 18 Jan 2022, 11:14 last edited by
            #5
            Row {
                spacing: 40
                Button {
                    id: button1
                    // change text based on enabled property
                    text: enabled ? "Enabled" : "Disabled"
                    background: Rectangle {
                        color: enabled ? "green" : "lightgray"
                        // animate the color change
                        Behavior on color {
                            PropertyAnimation {
                                target: parent
                                duration: 380
                            }
                        }
                    }
                    onClicked: {
                        // disable the button by setting enabled property to false
                        // onClicked event won't trigger as long as enabled = false
                        enabled = false
                        console.debug("button1 clicked and disabled")
                    }
                }
                Button {
                    id: button2
                    text: "Re-enable button"
                    background: Rectangle{
                        color: enabled ? "blue" : "lightgray"
                    }
                    enabled: !button1.enabled
                    onClicked: {
                        button1.enabled = true
                        console.debug("button2 clicked and button1 re-enabled")
                    }
                }
            }
            
            1 Reply Last reply
            0

            1/5

            17 Jan 2022, 04:38

            • Login

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