{"id":21526698,"url":"https://github.com/cppqtdev/qt5-qml-controls","last_synced_at":"2025-04-28T13:20:40.076Z","repository":{"id":177901757,"uuid":"661068626","full_name":"cppqtdev/Qt5-QML-Controls","owner":"cppqtdev","description":"QtQML Components is a repository on GitHub that contains a collection of reusable user interface components designed for use with the Qt framework's QML language. QtQML Components is a valuable resource for developers looking to create beautiful and responsive user interfaces using Qt and QML.","archived":false,"fork":false,"pushed_at":"2023-07-01T19:03:30.000Z","size":7296,"stargazers_count":14,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-30T10:01:38.242Z","etag":null,"topics":["qml","qml-applications","qml-samples","qt","qt-quick","qt5","qt6","qtcontrols"],"latest_commit_sha":null,"homepage":"https://www.linkedin.com/company/techcoderhub","language":"QML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cppqtdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-01T17:31:35.000Z","updated_at":"2025-03-22T12:56:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"e320a18b-f6db-4f3b-83fc-a99be4ed9aeb","html_url":"https://github.com/cppqtdev/Qt5-QML-Controls","commit_stats":null,"previous_names":["cppqtdev/qtqml-components","cppqtdev/qt5-qml-controls"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cppqtdev%2FQt5-QML-Controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cppqtdev%2FQt5-QML-Controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cppqtdev%2FQt5-QML-Controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cppqtdev%2FQt5-QML-Controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cppqtdev","download_url":"https://codeload.github.com/cppqtdev/Qt5-QML-Controls/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251319601,"owners_count":21570429,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["qml","qml-applications","qml-samples","qt","qt-quick","qt5","qt6","qtcontrols"],"created_at":"2024-11-24T01:46:21.909Z","updated_at":"2025-04-28T13:20:40.040Z","avatar_url":"https://github.com/cppqtdev.png","language":"QML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# QtQML-Components\nQtQML Components is a repository on GitHub that contains a collection of reusable user interface components designed for use with the Qt framework's QML language. QtQML Components is a valuable resource for developers looking to create beautiful and responsive user interfaces using Qt and QML.\n\n## Label Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/Label.png?raw=true)\n\n    /*  How To Use Component*/\n    ColumnLayout{\n        anchors.centerIn: parent\n        spacing: 20\n        Label{\n            text: \"QML Components General Label\"\n            font.pixelSize: FontStyle.h1\n        }\n\n        Label{\n            text: \"QML Components General Label\"\n            font.pixelSize: FontStyle.h3\n        }\n\n        Label{\n            text: \"QML Components General Label\"\n            font.pixelSize: FontStyle.h2\n        }\n        Label{\n            text: \"QML Components General Label\"\n        }\n    }\n\n\n## Textfield Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/TextField.png?raw=true)\n\n    /*  How To Use Component*/\n    ColumnLayout{\n        anchors.centerIn: parent\n        spacing: 20\n        TextField{\n            text: \"QML Components General TextField\"\n        }\n\n        TextField{\n\n        }\n\n        TextField{\n            echoMode: TextInput.Password\n        }\n    }\n\n\n## URLS Textfield Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/urltextfield.png?raw=true)\n\n    /*  How To Use Component*/\n    ColumnLayout{\n        anchors.centerIn: parent\n        spacing: 20\n        UrlTextField{\n            text: \"dabreha.blogspot.com\"\n        }\n\n        UrlTextField{\n\n        }\n\n        UrlTextField{\n\n        }\n    }\n\n\n## Tags Textfield Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/TagField.png?raw=true)\n\n    /*  How To Use Component*/\n    ColumnLayout{\n        anchors.centerIn: parent\n        spacing: 80\n        TagTextField{\n            allowMaxTags: 5\n        }\n\n        TagTextField{\n            allowMaxTags: 10\n        }\n\n        TagTextField{\n            allowMaxTags: 10\n            tagList: [\"Button\" ,\"TextField\",\"Mini Button\" ,\"Tab Button\"]\n        }\n    }\n\n## Label Selector Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/Label%20Selector.png?raw=true)\n\n    /*  How To Use Component*/\n    ColumnLayout{\n        anchors.centerIn: parent\n        spacing: 80\n\n        LabelSelector{\n            lableList: [\"Web Developer\",\"Software Developer\"]\n        }\n        LabelSelector{\n            lableList: [\"Lable\",\"Lable\",\"Lable\"]\n        }\n        LabelSelector{\n            lableList:  [\"Button\" ,\"TextField\",\"Mini Button\" ,\"Tab Button\"]\n        }\n    }\n\n## Checkbox Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/checkbox.png?raw=true)\n\n      /*  How To Use Component*/\n    ColumnLayout{\n        spacing: 20\n        anchors.centerIn: parent\n        CheckBox{\n            text: \"Label\"\n        }\n        CheckBox{\n            enabled: false\n            indicatorIcon: \"-\"\n            text: \"Label\"\n        }\n        CheckBox{\n            checked: false\n            text: \"Label\"\n        }\n    }\n\n ## Switch Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/switch.png?raw=true)\n\n     /*  How To Use Component*/\n    ColumnLayout{\n        spacing: 20\n        anchors.centerIn: parent\n        Switch{\n            text: \"Label\"\n        }\n        Switch{\n            enabled: false\n            text: \"Label\"\n        }\n        Switch{\n            checked: false\n            text: \"Label\"\n        }\n    }\n\n  ## Theme Switch Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/themeSwitch.png?raw=true)\n\n  /*  How To Use Component*/\n    ColumnLayout{\n        spacing: 20\n        anchors.centerIn: parent\n        ThemeSwitch{\n            text: checked ? \"Light\" : \"Dark\"\n        }\n\n        ThemeSwitch{\n            text: checked ? \"Light\" : \"Dark\"\n        }\n    }\n  ## Stepper (SpinBox) Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/stepper.png?raw=true)\n\n     /*  How To Use Component*/\n    ColumnLayout{\n        spacing: 20\n        anchors.centerIn: parent\n\n        Stepper{ }\n\n        Stepper{ }\n    }\n\n  ## Mini Button Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/MiniButton.png?raw=true)\n\n     /*  How To Use Component*/\n       RowLayout{\n        spacing: 50\n        anchors.centerIn: parent\n        ColumnLayout{\n            spacing: 20\n\n            MiniButton{\n                isDefault: true\n                text: qsTr(\"Mini\")\n            }\n\n            MiniButton{\n                radius: 12\n                text: \"Adesh Singh\"\n                setIconLeft: \"⚙\"\n            }\n\n            MiniButton{\n                text: \"Adesh\"\n                setIconRight: \"⚙️\"\n            }\n\n            MiniButton{\n                radius: 12\n                text: qsTr(\"Adesh Singh Mini Button\")\n            }\n\n            MiniButton{\n                text: \"Adesh Singh\"\n                setIconLeft: \"⚙\"\n            }\n\n            MiniButton{\n                text: qsTr(\"Mini Button\")\n            }\n\n            MiniButton{\n                setIcon:\"⚙\"\n            }\n        }\n        ColumnLayout{\n            spacing: 20\n\n            MiniButton{\n                isDefault: false\n                text: qsTr(\"Mini\")\n            }\n\n            MiniButton{\n                isDefault: false\n                radius: 12\n                text: \"Adesh Singh\"\n                setIconLeft: \"⚙\"\n            }\n\n            MiniButton{\n                isDefault: false\n                text: \"Adesh\"\n                setIconRight: \"⚙️\"\n            }\n\n            MiniButton{\n                isDefault: false\n                radius: 12\n                text: qsTr(\"Adesh Singh Mini Button\")\n            }\n\n            MiniButton{\n                isDefault: false\n                text: \"Adesh Singh\"\n                setIconLeft: \"⚙\"\n            }\n\n            MiniButton{\n                isDefault: false\n                text: qsTr(\"Mini Button\")\n            }\n\n            MiniButton{\n                isDefault: false\n                setIcon:\"⚙\"\n            }\n        }\n    }\n\n  ## ComboBox Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/Combobox%201.png?raw=true)\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/Combobox%202.png?raw=true)\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/Combobox%203.png?raw=true)\n\n\n     /*  How To Use Component*/\n    ColumnLayout{\n        spacing: 50\n        anchors.centerIn: parent\n        PrefsComboBox{\n            model: ComboBoxListModel{}\n        }\n        ComboBox{\n            model: [\"Settings\",\"Appearance\",\"Advanced\",\"Backups\"]\n        }\n    }\n\n  ## Button Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/Button.png?raw=true)\n\n     /*  How To Use Component*/\n       ColumnLayout{\n           spacing: 20\n           Layout.fillWidth: true\n           anchors.centerIn: parent\n           Button{\n               text: \"Click Me\"\n               setIcon: \"⚙\"\n           }\n           Button{\n               text: \"Send Me\"\n           }\n           Button{\n               isDefault: false\n               text: \"Click Me\"\n           }\n       }\n\n  ## Password Field Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/PasswordField.png?raw=true)\n\n     /*  How To Use Component*/\n     ColumnLayout{\n        anchors.centerIn: parent\n        spacing: 30\n        TextField{\n            placeholderText: \"Normal Text\"\n        }\n\n        PasswordField{\n\n        }\n\n        PasswordField{\n\n        }\n    }\n   \n  ## Icon Button Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/IconButton.png?raw=true)\n\n     /*  How To Use Component*/\n       function generateRandomColor() {\n        var red = Math.random()\n        var green = Math.random()\n        var blue = Math.random()\n        var alpha = 1.0 // Set the alpha component to 1.0 for full opacity\n        return Qt.rgba(red, green, blue, alpha)\n    }\n    RowLayout{\n        anchors.centerIn: parent\n        spacing: 20\n        IconButton{\n            setIcon: \"qrc:/Images/add.svg\"\n            style: generateRandomColor()\n        }\n\n        IconButton{\n            setIcon: \"qrc:/Images/airdrop.svg\"\n            style: generateRandomColor()\n            isDefault: false\n        }\n\n        IconButton{\n            setIcon: \"qrc:/Images/archive-add.svg\"\n            style: generateRandomColor()\n        }\n\n        IconButton{\n            setIcon: \"qrc:/Images/moon.svg\"\n            style: generateRandomColor()\n        }\n        IconButton{\n            style: generateRandomColor()\n        }\n\n        IconButton{\n            setIcon: \"qrc:/Images/sun.svg\"\n            style: generateRandomColor()\n        }\n    }\n  ## Footer Button Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/PageSelector_Footer_Button.png?raw=true)\n\n     /*  How To Use Component*/\n    \n        RowLayout {\n            spacing: 20\n            anchors.centerIn: parent\n            Item { Layout.fillWidth: true; }\n\n            FooterButton {\n                id: discover_button\n                textIcon: \"\\uf015\";\n                checked: true\n            }\n\n            Item { Layout.fillWidth: true; }\n\n            FooterButton {\n                id:category_button\n                textIcon: \"\\uf002\";\n            }\n\n            Item { Layout.fillWidth: true; }\n\n            FooterButton {\n                id:create_button\n                textIcon: \"\\uf055\";\n            }\n\n            Item { Layout.fillWidth: true; }\n\n            FooterButton {\n                id:connection_button\n                textIcon: \"\\uf004\";\n            }\n\n            Item { Layout.fillWidth: true; }\n\n            FooterButton {\n                id: profile_button\n                textIcon: \"\\uf406\";\n            }\n\n            Item { Layout.fillWidth: true; }\n        }\n\n## Tab Button and Tab Button Mini Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/TabButton.png?raw=true)\n\n     /*  How To Use Component*/\n        ColumnLayout{\n        spacing: 30\n        width: parent.width\n        anchors.centerIn: parent\n        RowLayout {\n            width: parent.width\n            Layout.fillWidth: true\n\n            TabButton {\n                title: \"Message\"\n                Layout.fillWidth: true\n                setIcon: \"\\uf015\"\n                onClicked: {\n                }\n\n            }\n            TabButton {\n                title: \"Call\"\n                Layout.fillWidth: true\n                setIcon: \"\\uf87c\"\n                onClicked: {\n                }\n            }\n            TabButton {\n                title: \"Whatsapp\"\n                Layout.fillWidth: true\n                setIcon: \"\\uf2bb\"\n                onClicked: {\n                }\n            }\n        }\n\n        RowLayout {\n            width: parent.width\n            Layout.fillWidth: true\n\n            TabButtonMini {\n                title: \"Message\"\n                Layout.fillWidth: true\n                setIcon: \"\\uf015\"\n                onClicked: {\n                }\n\n            }\n            TabButtonMini {\n                title: \"Call\"\n                Layout.fillWidth: true\n                setIcon: \"\\uf87c\"\n                onClicked: {\n                }\n            }\n            TabButtonMini {\n                title: \"Whatsapp\"\n                Layout.fillWidth: true\n                setIcon: \"\\uf2bb\"\n                onClicked: {\n                }\n            }\n        }\n    }\n\n## Slider Component :\n![alt text](https://github.com/cppqtdev/QtQML-Components/blob/main/Screenshots/Slider.png?raw=true)\n\n     /*  How To Use Component*/\n         ColumnLayout{\n        spacing: 50\n        anchors.centerIn: parent\n        PrefsSlider{\n            backgroundHeight : 22\n            backgroundRadius : 12\n            implicitHeight: 20\n            implicitWidth: 250\n        }\n\n        PrefsSlider{\n            backgroundHeight : 5\n            backgroundRadius : 12\n            implicitHeight: 20\n            implicitWidth: 250\n        }\n    }\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcppqtdev%2Fqt5-qml-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcppqtdev%2Fqt5-qml-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcppqtdev%2Fqt5-qml-controls/lists"}