Muse.UiCmmponents 1.0

• Sep 23, 2024 - 13:58

You can perfectly make a plugin work with 4.4 without using Muse.UiComponents, but in case you'd like the built-in design I gathered some common Muse.Uicomponents that i coud figure out. Sharing them here for reference.

Obs. Rounded Radio has built-in text component but i couldnt make it work so i had to add a StyledTextLabel.

import QtQuick.Controls 2.15
import Muse.UiComponents 1.0

1. RoundedRadioButton

        ButtonGroup{ id: radioGroup }
        Column {
            spacing:10            
            RoundedRadioButton{
                id: radio1                                  
                text: "text"
                ButtonGroup.group: radioGroup
            }      
            Row {                
                RoundedRadioButton{
                    id: radio2
                    text: "buttontext"
                    ButtonGroup.group: radioGroup
                }                
                StyledTextLabel{
                    leftPadding: 5
                    text: "text here"
                }            
            }
        }

2. checkBox

    Column{
            spacing:10
            id:boxes
            CheckBox{
                id:checkbox1
                text: "text here..."
                onClicked: checked = !checked   
            }   
            CheckBox{
                id:checkbox2
                text: "text here..."    
                onClicked: checked = !checked
            }
        }

3. Standard buttons

    ButtonBox {
        id: buttonBox       
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.top: window.bottom
        anchors.margins: 10
        buttons: [ ButtonBoxModel.Cancel, ButtonBoxModel.Ok ]
 
        FlatButton {
            text:"some other button"
            //accentButton: true
            buttonRole: ButtonBoxModel.CustomRole
            buttonId: ButtonBoxModel.CustomButton + 1
            //isLeftSide: true
            onClicked: {
                //somefunction()
            }
        }
        onStandardButtonClicked: function(buttonId) {
            if (buttonId === ButtonBoxModel.Cancel) {
               quit()
            } else if (buttonId === ButtonBoxModel.Ok) {
                //somefunction()
            }
        }
    }

4. IncrementalPropertyControl

    Row{
            spacing: 12            
             StyledTextLabel {
                id: titleLabel
               // width: root.columnWidth
                anchors.verticalCenter: parent.verticalCenter
                text: " text here: "
                //horizontalAlignment: Qt.AlignLeft
                //wrapMode: Text.WordWrap
                maximumLineCount: 2
            }
            IncrementalPropertyControl {
                id: rounding
                implicitWidth: 60
                step: 1
                minValue: 0
                maxValue: 2
                decimals: 0
                currentValue: 0
                onValueEdited: function(newValue) {currentValue = newValue}
            }
        }

5.Dropdown

    Row{
            spacing: 12
            StyledTextLabel {               
                text: "text here.."                
            }
            StyledDropdown {
                id: comboBox    
                //width: 60  //optional
                currentIndex: 1 
                model: ["Option 0", "Option 1" ,  "Option 2"]
                onActivated: function(index, value) { currentIndex = index }
            }
        }

6. Popup Dialog

    ApplicationWindow {
        id: errorDialog
        title: "WARNING!"
        property var msg: "Warning message here."
        visible: false
        flags: Qt.Dialog | Qt.WindowStaysOnTopHint
        // Qt.WindowStaysOnTopHint => dialog always on top
        // Qt.FramelessWindowHint  => dialog without title bar
        width: 320
        height: 100        
 
        StyledTextLabel {
            text: errorDialog.msg            
            anchors{
                top: parent.top 
                horizontalCenter: parent.horizontalCenter                
                margins:20 
            } 
        }
        FlatButton {            
            accentButton: true
            text: "Ok!"
            anchors{
                horizontalCenter: parent.horizontalCenter
                bottom: parent.bottom
                margins: 10
            }             
            onClicked: errorDialog.close()            
        }        
    }

note: open dialog by "errorDialog.show()"

7. Horizontal separator line

SeparatorLine { //orientation: Qt.Vertical 
        }

Comments

SilverGreen93

• Sep 25, 2024 - 21:35

Seems that the CheckBox does not get checked and even the value is always false. So you cannot ever get the true value of the checkbox.

.ash86

• Sep 25, 2024 - 22:15

right! i couldnt figure out why that is and how to make it work. Hopefully someone figures this out and shares how to do it.

Another issue i had was with the text component of RoundedRadioButton. It seems that is has a text component (just like the checkbox but the text doesnt appear for some reason...

SilverGreen93

• Sep 26, 2024 - 08:14

I figured it out. To make it work, you need a function to toggle its state. Just add this and it will work:
onClicked: function() {
checked = !checked
}

.ash86

• Sep 26, 2024 - 14:19

Awesome! i'll add that to the original post. I also noticed you dont need to encapsulate checked = !checked inside a function def.
Thanks!

Let me know if you ficgure out how to enable the text element in the RoundedRadioButton or if you have a new element to be added to the list.

.ash86

• Sep 30, 2024 - 00:57

Anyone figured out how to add a modelList to StyledDropdown element?

SilverGreen93

• Sep 30, 2024 - 09:35

Of course:
model: [
{ 'text': "Option 0" },
{ 'text': "Option 1" },
{ 'text': "Option 2" }
]
onActivated: function(index, value) {
currentIndex = index
}

.ash86

• Sep 30, 2024 - 15:50

thank you :))

.ash86

• Oct 2, 2024 - 14:34

Is it possible to make a StyledDropdown object with submenu?