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.
Obs. Checkbox doesn't show tick when checked.

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: root.window.boxes.checkbox1.checked   
            }   
            CheckBox{
                id:checkbox2
                text: "text here..."            
            }
        }

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"
            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 {
                id: titleLabel2
                text: "text here.."
                //width: root.columnWidth
                anchors.verticalCenter: parent.verticalCenter
                horizontalAlignment: Qt.AlignLeft
                wrapMode: Text.WordWrap
                maximumLineCount: 2
            }
            StyledDropdown {
                id: comboBox
                //width: root.columnWidth
                //navigation.accessible.name: root.title + " " + currentText
                indeterminateText: ""
            // onActivated: function(index, value) {
                //    root.valueEdited(index, value)
                //}
            }
        }

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 
        }