├── fonts ├── Nunito-Bold.ttf ├── Nunito-Light.ttf ├── Nunito-Medium.ttf ├── Nunito-Regular.ttf ├── Font Awesome 5 Free-Solid-900.otf ├── Font Awesome 5 Pro-Light-300.otf ├── Font Awesome 5 Pro-Solid-900.otf ├── Font Awesome 5 Free-Regular-400.otf ├── Font Awesome 5 Pro-Regular-400.otf └── Font Awesome 5 Brands-Regular-400.otf ├── screenshot ├── switch.png ├── Buttons.png ├── TextField.png ├── dropdown.png └── iconButton.png ├── qtquickcontrols2.conf ├── Images ├── add.svg ├── arrow.svg ├── arrow-up.svg ├── arrow-down.svg ├── tick.svg ├── archive-add.svg ├── moon.svg ├── eye-on.svg ├── airplane.svg ├── sun.svg ├── eye-off.svg └── airdrop.svg ├── AppStyle.qml ├── README.md ├── Component.pro ├── main.cpp ├── CustomTextField.qml ├── CustomSwitch.qml ├── qml.qrc ├── FontStyle.qml ├── CustomButton.qml ├── CustomDropDown.qml ├── main.qml └── Component.pro.user /fonts/Nunito-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Nunito-Bold.ttf -------------------------------------------------------------------------------- /screenshot/switch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/screenshot/switch.png -------------------------------------------------------------------------------- /fonts/Nunito-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Nunito-Light.ttf -------------------------------------------------------------------------------- /fonts/Nunito-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Nunito-Medium.ttf -------------------------------------------------------------------------------- /fonts/Nunito-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Nunito-Regular.ttf -------------------------------------------------------------------------------- /screenshot/Buttons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/screenshot/Buttons.png -------------------------------------------------------------------------------- /screenshot/TextField.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/screenshot/TextField.png -------------------------------------------------------------------------------- /screenshot/dropdown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/screenshot/dropdown.png -------------------------------------------------------------------------------- /screenshot/iconButton.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/screenshot/iconButton.png -------------------------------------------------------------------------------- /fonts/Font Awesome 5 Free-Solid-900.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Font Awesome 5 Free-Solid-900.otf -------------------------------------------------------------------------------- /fonts/Font Awesome 5 Pro-Light-300.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Font Awesome 5 Pro-Light-300.otf -------------------------------------------------------------------------------- /fonts/Font Awesome 5 Pro-Solid-900.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Font Awesome 5 Pro-Solid-900.otf -------------------------------------------------------------------------------- /fonts/Font Awesome 5 Free-Regular-400.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Font Awesome 5 Free-Regular-400.otf -------------------------------------------------------------------------------- /fonts/Font Awesome 5 Pro-Regular-400.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Font Awesome 5 Pro-Regular-400.otf -------------------------------------------------------------------------------- /fonts/Font Awesome 5 Brands-Regular-400.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cppqtdev/Basic-Component/HEAD/fonts/Font Awesome 5 Brands-Regular-400.otf -------------------------------------------------------------------------------- /qtquickcontrols2.conf: -------------------------------------------------------------------------------- 1 | [Controls] 2 | Style=Material 3 | 4 | [Universal] 5 | Theme=System 6 | Accent=Red 7 | 8 | [Material] 9 | Theme=Light 10 | Accent=Teal 11 | Primary=BlueGrey 12 | -------------------------------------------------------------------------------- /Images/add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Images/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /AppStyle.qml: -------------------------------------------------------------------------------- 1 | pragma Singleton 2 | import QtQuick 2.15 3 | 4 | QtObject { 5 | readonly property color background: "#232429" 6 | readonly property color hoverColor: "#2a2d36" 7 | readonly property color textBackground: "#2b2f3b" 8 | readonly property color popupBackground: "#333742" 9 | readonly property color appStyle: "#1d5ffe" 10 | readonly property color labelColor: "#85889b" 11 | readonly property color textColor: "#FFFFFF" 12 | readonly property color borderColor: "#464a53" 13 | readonly property color placeholderColor: "#757985" 14 | } 15 | -------------------------------------------------------------------------------- /Images/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Images/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Images/tick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Basic-Component 2 | Starting Qt QML Basic Component project 3 | ## QML TextField 4 | ![Text Field ](https://github.com/cppqtdev/Basic-Component/blob/main/screenshot/TextField.png) 5 | 6 | ## QML Button 7 | 8 | ![Custom QML Button](https://github.com/cppqtdev/Basic-Component/blob/main/screenshot/Buttons.png) 9 | 10 | ## QML icon Button 11 | 12 | ![Custom QML Button](https://github.com/cppqtdev/Basic-Component/blob/main/screenshot/iconButton.png) 13 | 14 | ## QML Combobox 15 | ![Custom Combobox ](https://github.com/cppqtdev/Basic-Component/blob/main/screenshot/dropdown.png) 16 | 17 | ## QML Switch 18 | ![Switch ](https://github.com/cppqtdev/Basic-Component/blob/main/screenshot/switch.png) 19 | -------------------------------------------------------------------------------- /Component.pro: -------------------------------------------------------------------------------- 1 | QT += quick 2 | 3 | # You can make your code fail to compile if it uses deprecated APIs. 4 | # In order to do so, uncomment the following line. 5 | #DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0 6 | 7 | SOURCES += \ 8 | main.cpp 9 | 10 | RESOURCES += qml.qrc 11 | 12 | # Additional import path used to resolve QML modules in Qt Creator's code model 13 | QML_IMPORT_PATH = 14 | 15 | # Additional import path used to resolve QML modules just for Qt Quick Designer 16 | QML_DESIGNER_IMPORT_PATH = 17 | 18 | # Default rules for deployment. 19 | qnx: target.path = /tmp/$${TARGET}/bin 20 | else: unix:!android: target.path = /opt/$${TARGET}/bin 21 | !isEmpty(target.path): INSTALLS += target 22 | -------------------------------------------------------------------------------- /Images/archive-add.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /main.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | 4 | 5 | int main(int argc, char *argv[]) 6 | { 7 | #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0) 8 | QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); 9 | #endif 10 | QGuiApplication app(argc, argv); 11 | 12 | QQmlApplicationEngine engine; 13 | 14 | qmlRegisterSingletonType(QStringLiteral("qrc:/AppStyle.qml"),"AppStyle",1,0,"AppStyle"); 15 | qmlRegisterSingletonType(QUrl(QStringLiteral("qrc:/FontStyle.qml")),"AppStyle",1,0,"FontStyle"); 16 | 17 | const QUrl url(QStringLiteral("qrc:/main.qml")); 18 | QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, 19 | &app, [url](QObject *obj, const QUrl &objUrl) { 20 | if (!obj && url == objUrl) 21 | QCoreApplication::exit(-1); 22 | }, Qt::QueuedConnection); 23 | engine.load(url); 24 | 25 | return app.exec(); 26 | } 27 | -------------------------------------------------------------------------------- /Images/moon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /CustomTextField.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.15 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import AppStyle 1.0 5 | 6 | TextField { 7 | id:control 8 | property bool isBold: false 9 | property real radius: 12 10 | property color borderColor: activeFocus ? AppStyle.appStyle : AppStyle.borderColor 11 | 12 | placeholderText: qsTr("This Is Placeholder text") 13 | placeholderTextColor: "#FFFFFF"//AppStyle.placeholderColor 14 | 15 | font.pixelSize: FontStyle.h3 16 | font.family: isBold ? FontStyle.getContentFontBold.name : FontStyle.getContentFont.name 17 | font.bold: isBold ? Font.Bold : Font.Normal 18 | font.weight: isBold ? Font.Bold : Font.Normal 19 | 20 | color: AppStyle.textColor 21 | 22 | background:Rectangle{ 23 | implicitHeight: control.implicitHeight 24 | implicitWidth: control.implicitWidth 25 | radius: control.radius 26 | color: AppStyle.popupBackground 27 | border.width: control.activeFocus ? 2 : 1 28 | border.color: control.borderColor 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /CustomSwitch.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.15 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import AppStyle 1.0 5 | Switch { 6 | id:control 7 | property color backgroundColor: AppStyle.appStyle 8 | 9 | indicator: Rectangle{ 10 | implicitHeight: 32 11 | implicitWidth: 56 12 | x:control.leftPadding 13 | y:parent.height /2 - height/2 14 | radius: width/2 15 | color: control.checked ? control.backgroundColor : AppStyle.popupBackground 16 | border.width: control.checked ? 2 : 1 17 | border.color: control.checked ? control.backgroundColor : AppStyle.borderColor 18 | 19 | 20 | Rectangle{ 21 | x:control.checked ? (parent.width-width) - 2: 2 22 | width: 28 23 | height: 28 24 | radius: height/2 25 | color: control.checked ? "#FFFFFF" : "#7a859b" 26 | anchors.verticalCenter: parent.verticalCenter 27 | } 28 | } 29 | 30 | contentItem: Label{ 31 | color: "#FFFFFF" 32 | text: control.text 33 | font.pixelSize: FontStyle.h3 34 | verticalAlignment: Text.AlignVCenter 35 | leftPadding: control.indicator.width + control.spacing 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Images/eye-on.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Images/airplane.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /qml.qrc: -------------------------------------------------------------------------------- 1 | 2 | 3 | main.qml 4 | fonts/Font Awesome 5 Brands-Regular-400.otf 5 | fonts/Font Awesome 5 Free-Regular-400.otf 6 | fonts/Font Awesome 5 Free-Solid-900.otf 7 | fonts/Font Awesome 5 Pro-Light-300.otf 8 | fonts/Font Awesome 5 Pro-Regular-400.otf 9 | fonts/Font Awesome 5 Pro-Solid-900.otf 10 | fonts/Nunito-Bold.ttf 11 | fonts/Nunito-Light.ttf 12 | fonts/Nunito-Medium.ttf 13 | fonts/Nunito-Regular.ttf 14 | Images/add.svg 15 | Images/airdrop.svg 16 | Images/airplane.svg 17 | Images/archive-add.svg 18 | Images/arrow-down.svg 19 | Images/arrow-up.svg 20 | Images/arrow.svg 21 | Images/eye-off.svg 22 | Images/eye-on.svg 23 | Images/moon.svg 24 | Images/sun.svg 25 | Images/tick.svg 26 | AppStyle.qml 27 | FontStyle.qml 28 | CustomTextField.qml 29 | CustomButton.qml 30 | CustomDropDown.qml 31 | qtquickcontrols2.conf 32 | CustomSwitch.qml 33 | 34 | 35 | -------------------------------------------------------------------------------- /Images/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Images/eye-off.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /Images/airdrop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /FontStyle.qml: -------------------------------------------------------------------------------- 1 | pragma Singleton 2 | import QtQuick 2.9 3 | import QtQuick.Controls 2.5 4 | 5 | 6 | QtObject { 7 | readonly property int h1 : 32 8 | readonly property int h2 : 24 9 | readonly property double h3 : 18.72 10 | readonly property int h4 : 16 11 | readonly property double h5 : 13.28 12 | readonly property double h6 : 10.72 13 | 14 | readonly property int content : 14 15 | 16 | readonly property var getAwesomeBrand: fontAwesomeBrand 17 | readonly property var getAwesomeRegular: fontAwesomeRegular 18 | readonly property var getAwesomeLight: fontAwesomeLight 19 | readonly property var getAwesomeSolid: fontAwesomeSolid 20 | readonly property var getContentFont: contentFontMedium 21 | readonly property var getContentFontBold: contentFontBold 22 | readonly property var getContentFontMedium: contentFontMedium 23 | readonly property var getContentFontLight: contentFontLight 24 | 25 | readonly property var fontAwesomeBrand: FontLoader { 26 | source: "qrc:/fonts/Font Awesome 5 Brands-Regular-400.otf" 27 | } 28 | 29 | readonly property var fontAwesomeRegular: FontLoader { 30 | source: "qrc:/fonts/Font Awesome 5 Pro-Regular-400.otf" 31 | } 32 | 33 | readonly property var fontAwesomeLight: FontLoader { 34 | source: "qrc:/fonts/Font Awesome 5 Pro-Light-300.otf" 35 | } 36 | 37 | readonly property var fontAwesomeSolid: FontLoader { 38 | source: "qrc:/fonts/Font Awesome 5 Pro-Solid-900.otf" 39 | } 40 | 41 | readonly property var contentFontLight: FontLoader { 42 | source: "qrc:/fonts/Nunito-Light.ttf" 43 | } 44 | 45 | readonly property var contentFontBold: FontLoader { 46 | source: "qrc:/fonts/Nunito-Bold.ttf" 47 | } 48 | 49 | readonly property var contentFontMedium: FontLoader { 50 | source: "qrc:/fonts/Nunito-Medium.ttf" 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /CustomButton.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.15 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | import QtGraphicalEffects 1.15 5 | import AppStyle 1.0 6 | 7 | 8 | Button { 9 | id:control 10 | 11 | implicitWidth: 46 12 | implicitHeight: 46 13 | 14 | property real radius: 8 15 | property color backgroundColor: "#14A44D" 16 | property string setIcon: "" 17 | property color textColor: "#FFFFFF" 18 | 19 | property real borderWidth: 0 20 | property color borderColor: "transparent" 21 | font.pixelSize: FontStyle.h3 22 | font.family: FontStyle.getContentFont.name 23 | font.bold: Font.Bold 24 | font.weight: Font.Bold 25 | 26 | contentItem:ColumnLayout{ 27 | width: parent.width 28 | height: parent.height 29 | anchors.horizontalCenter: parent.horizontalCenter 30 | Label{ 31 | z:2 32 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 33 | font:control.font 34 | text: control.text 35 | color: control.textColor 36 | visible: !setIcon 37 | } 38 | 39 | Image{ 40 | Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter 41 | sourceSize: Qt.size(control.implicitWidth* 0.6,control.implicitHeight*0.6) 42 | source: setIcon 43 | } 44 | } 45 | 46 | background: Rectangle{ 47 | implicitHeight: control.implicitHeight 48 | implicitWidth: control.implicitWidth 49 | radius: control.radius 50 | color: control.backgroundColor 51 | border.width: control.borderWidth 52 | border.color: control.borderColor 53 | 54 | visible: false 55 | 56 | Behavior on color { 57 | 58 | ColorAnimation { 59 | easing.type: Easing.Linear 60 | duration: 200 61 | } 62 | } 63 | 64 | Rectangle{ 65 | id:indicator 66 | property int mx 67 | property int my 68 | x:mx-width/2 69 | y:my-height/2 70 | height:width 71 | radius: control.radius 72 | color: Qt.lighter(AppStyle.appStyle) 73 | } 74 | } 75 | 76 | Rectangle{ 77 | id:mask 78 | radius: control.radius 79 | anchors.fill: parent 80 | visible: false 81 | } 82 | 83 | OpacityMask{ 84 | anchors.fill: background 85 | source: background 86 | maskSource: mask 87 | } 88 | 89 | MouseArea{ 90 | id:mouseArea 91 | hoverEnabled: true 92 | acceptedButtons: Qt.NoButton 93 | cursorShape: Qt.PointingHandCursor 94 | anchors.fill: parent 95 | } 96 | 97 | ParallelAnimation{ 98 | id:main 99 | NumberAnimation{ 100 | target: indicator 101 | properties: 'width' 102 | from:0 103 | to:control.width *2.5 104 | duration: 200 105 | } 106 | NumberAnimation{ 107 | target: indicator 108 | properties: 'opacity' 109 | from:0.9 110 | to:0 111 | duration: 200 112 | } 113 | } 114 | 115 | onPressed: { 116 | indicator.mx = mouseArea.mouseX 117 | indicator.my = mouseArea.mouseY 118 | main.restart() 119 | } 120 | } 121 | -------------------------------------------------------------------------------- /CustomDropDown.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.15 2 | import QtQuick.Controls 2.5 3 | import QtQuick.Layouts 1.3 4 | 5 | import AppStyle 1.0 6 | 7 | 8 | ComboBox { 9 | id:root 10 | model:["one","two","three","four"] 11 | implicitHeight: 55 12 | implicitWidth: 300 13 | 14 | property real radius: 12 15 | property color backgroundColor: "#2a2d36" 16 | 17 | property color checkedColor: AppStyle.popupBackground 18 | 19 | 20 | delegate: ItemDelegate{ 21 | id:itemDelegate 22 | width: root.implicitWidth * 1.2 23 | height: root.implicitHeight 24 | hoverEnabled: true 25 | focus: true 26 | 27 | background: Rectangle{ 28 | anchors.fill: parent 29 | radius: 8 30 | color: itemDelegate.hovered ? root.backgroundColor : "transparent" 31 | } 32 | 33 | RowLayout{ 34 | Layout.alignment: Qt.AlignVCenter 35 | width: parent.width 36 | height: parent.height 37 | anchors.fill: parent 38 | spacing: 10 39 | Layout.leftMargin: 10 40 | Layout.rightMargin: 10 41 | 42 | Label{ 43 | opacity: 0.9 44 | text: modelData 45 | font.pixelSize: FontStyle.h3 46 | color: itemDelegate.hovered ? "#FFFFFF" : AppStyle.textColor 47 | Layout.fillWidth: true 48 | verticalAlignment: Image.AlignVCenter 49 | Layout.alignment: Qt.AlignVCenter 50 | Layout.leftMargin: 10 51 | } 52 | 53 | // Image{ 54 | // visible: root.currentIndex === index 55 | // source: "qrc:/Images/tick.svg" 56 | // verticalAlignment: Image.AlignVCenter 57 | // horizontalAlignment: Image.AlignRight 58 | // Layout.alignment: Qt.AlignVCenter 59 | // Layout.rightMargin: 10 60 | // } 61 | } 62 | } 63 | 64 | contentItem:Item{ 65 | width: root.background.width - root.indicator.width - 10 66 | height: root.background.height 67 | RowLayout{ 68 | anchors.fill: parent 69 | spacing: 10 70 | Label{ 71 | opacity: 0.9 72 | text: root.displayText 73 | font.pixelSize: FontStyle.h3 74 | Layout.fillWidth: true 75 | verticalAlignment: Image.AlignVCenter 76 | Layout.alignment: Qt.AlignVCenter 77 | Layout.leftMargin: 10 78 | color: "#FFFFFF" 79 | } 80 | } 81 | } 82 | 83 | 84 | background: Rectangle{ 85 | implicitWidth: root.implicitWidth 86 | implicitHeight: root.implicitHeight 87 | color: root.down ? Qt.darker(root.checkedColor,1.2) : root.checkedColor 88 | radius: root.radius 89 | border.width: root.activeFocus ? 2 : 0.6 90 | border.color: root.activeFocus ? AppStyle.appStyle : AppStyle.borderColor 91 | } 92 | 93 | popup: Popup{ 94 | y:root.height + 2 95 | width: root.implicitWidth * 1.26 96 | implicitHeight: contentItem.implicitHeight > 250 ? 250 : contentItem.implicitHeight 97 | padding: 4 98 | contentItem: ListView{ 99 | leftMargin: 5 100 | implicitHeight: contentHeight 101 | keyNavigationEnabled: true 102 | model:root.popup.visible ? root.delegateModel : null 103 | clip: true 104 | focus: true 105 | currentIndex: root.highlightedIndex 106 | } 107 | 108 | background: Rectangle{ 109 | anchors.fill: parent 110 | color: AppStyle.popupBackground 111 | radius: 6 112 | border.width: 0.6 113 | border.color: AppStyle.borderColor 114 | clip: true 115 | } 116 | } 117 | 118 | } 119 | -------------------------------------------------------------------------------- /main.qml: -------------------------------------------------------------------------------- 1 | import QtQuick 2.15 2 | import QtQuick.Window 2.15 3 | import AppStyle 1.0 4 | import QtQuick.Controls 2.5 5 | import QtQuick.Layouts 1.3 6 | import QtQuick.Controls.Fusion 2.3 7 | Window { 8 | width: 950 9 | height: 680 10 | visible: true 11 | title: qsTr("Qt Control by Adesh Singh") 12 | color: AppStyle.background 13 | 14 | 15 | // ColumnLayout{ 16 | // spacing: 50 17 | // anchors.centerIn: parent 18 | // RowLayout{ 19 | // spacing: 50 20 | // width: parent.width 21 | // CustomTextField{ 22 | // implicitWidth: 300 23 | // implicitHeight: 55 24 | // isBold:true 25 | // placeholderText: qsTr("Primary") 26 | // selectedTextColor: "#FFFFFF" 27 | // selectionColor: "green" 28 | // radius: 8 29 | // borderColor : "#3B71CA" 30 | // } 31 | 32 | // CustomTextField{ 33 | // implicitWidth: 300 34 | // implicitHeight: 55 35 | // isBold:true 36 | // placeholderText: qsTr("Error") 37 | // selectedTextColor: "#FFFFFF" 38 | // selectionColor: "blue" 39 | // radius: 12 40 | // borderColor : "#FF0000" 41 | // } 42 | // } 43 | // RowLayout{ 44 | // spacing: 50 45 | // width: parent.width 46 | 47 | // CustomTextField{ 48 | // implicitWidth: 300 49 | // implicitHeight: 55 50 | // isBold:false 51 | // placeholderText: qsTr("Danger") 52 | // selectedTextColor: "#FFFFFF" 53 | // selectionColor: "blue" 54 | // radius: 18 55 | // borderColor : "#DC4C64" 56 | // } 57 | 58 | // CustomTextField{ 59 | // implicitWidth: 300 60 | // implicitHeight: 55 61 | // isBold:false 62 | // placeholderText: qsTr("Success") 63 | // selectedTextColor: "#FFFFFF" 64 | // selectionColor: "blue" 65 | // radius: 18 66 | // borderColor : "#14A44D" 67 | // } 68 | // } 69 | 70 | // RowLayout{ 71 | // spacing: 50 72 | // width: parent.width 73 | 74 | // CustomTextField{ 75 | // implicitWidth: 300 76 | // implicitHeight: 55 77 | // isBold:false 78 | // placeholderText: qsTr("Info") 79 | // selectedTextColor: "#FFFFFF" 80 | // selectionColor: "blue" 81 | // radius: 18 82 | // borderColor : "#54B4D3" 83 | // } 84 | 85 | // CustomTextField{ 86 | // implicitWidth: 300 87 | // implicitHeight: 55 88 | // isBold:false 89 | // placeholderText: qsTr("Warning") 90 | // selectedTextColor: "#FFFFFF" 91 | // selectionColor: "blue" 92 | // radius: 18 93 | // borderColor : "#E4A11B" 94 | // } 95 | // } 96 | // } 97 | 98 | 99 | // RowLayout{ 100 | // spacing: 100 101 | // anchors.centerIn: parent 102 | 103 | // ColumnLayout{ 104 | // visible: true 105 | // spacing: 100 106 | // RowLayout{ 107 | // width: parent.width 108 | // spacing: 100 109 | // CustomButton{ 110 | // setIcon: "qrc:/Images/add.svg" 111 | // } 112 | // CustomButton{ 113 | // setIcon: "qrc:/Images/arrow.svg" 114 | // backgroundColor:"#3B71CA" 115 | // } 116 | // } 117 | // RowLayout{ 118 | // width: parent.width 119 | // spacing: 100 120 | // CustomButton{ 121 | // setIcon: "qrc:/Images/sun.svg" 122 | // backgroundColor: "#9FA6B2" 123 | // } 124 | // CustomButton{ 125 | // setIcon: "qrc:/Images/moon.svg" 126 | // backgroundColor:"#DC4C64" 127 | // } 128 | // } 129 | // RowLayout{ 130 | // width: parent.width 131 | // spacing: 100 132 | // CustomButton{ 133 | // setIcon: "qrc:/Images/eye-off.svg" 134 | // backgroundColor: "#E4A11B" 135 | // } 136 | // CustomButton{ 137 | // setIcon: "qrc:/Images/airdrop.svg" 138 | // backgroundColor:"#54B4D3" 139 | // } 140 | // } 141 | // RowLayout{ 142 | // width: parent.width 143 | // spacing: 100 144 | // CustomButton{ 145 | // setIcon: "qrc:/Images/airplane.svg" 146 | // backgroundColor: "#FBFBFB" 147 | // textColor: "#000000" 148 | // } 149 | // CustomButton{ 150 | // setIcon: "qrc:/Images/eye-on.svg" 151 | // backgroundColor:"#332D2D" 152 | // } 153 | // } 154 | // } 155 | 156 | // ColumnLayout{ 157 | // spacing: 100 158 | // RowLayout{ 159 | // width: parent.width 160 | // spacing: 100 161 | // CustomButton{ 162 | // implicitHeight: 50 163 | // implicitWidth: 150 164 | // text: qsTr("Success") 165 | // } 166 | // CustomButton{ 167 | // implicitHeight: 50 168 | // implicitWidth: 150 169 | // backgroundColor:"#3B71CA" 170 | // text: qsTr("Primary") 171 | // } 172 | // } 173 | // RowLayout{ 174 | // width: parent.width 175 | // spacing: 100 176 | // CustomButton{ 177 | // implicitHeight: 50 178 | // implicitWidth: 150 179 | // backgroundColor: "#9FA6B2" 180 | // text: qsTr("Secondary") 181 | // } 182 | // CustomButton{ 183 | // implicitHeight: 50 184 | // implicitWidth: 150 185 | // backgroundColor:"#DC4C64" 186 | // text: qsTr("Danger") 187 | // } 188 | // } 189 | // RowLayout{ 190 | // width: parent.width 191 | // spacing: 100 192 | // CustomButton{ 193 | // implicitHeight: 50 194 | // implicitWidth: 150 195 | // backgroundColor: "#E4A11B" 196 | // text: qsTr("Warning") 197 | // } 198 | // CustomButton{ 199 | // implicitHeight: 50 200 | // implicitWidth: 150 201 | // backgroundColor:"#54B4D3" 202 | // text: qsTr("Info") 203 | // } 204 | // } 205 | // RowLayout{ 206 | // width: parent.width 207 | // spacing: 100 208 | // CustomButton{ 209 | // implicitHeight: 50 210 | // implicitWidth: 150 211 | // backgroundColor: "#FBFBFB" 212 | // textColor: "#000000" 213 | // text: qsTr("Light") 214 | // } 215 | // CustomButton{ 216 | // implicitHeight: 50 217 | // implicitWidth: 150 218 | // backgroundColor:"#332D2D" 219 | // text: qsTr("Dark") 220 | // } 221 | // } 222 | // } 223 | // } 224 | 225 | 226 | 227 | //Custom Combobox 228 | 229 | // ColumnLayout{ 230 | // spacing: 400 231 | // anchors.centerIn: parent 232 | // RowLayout{ 233 | // spacing: 100 234 | // CustomDropDown{ 235 | // model:["one 1","two 2","three 3","four 4"] 236 | // } 237 | 238 | // CustomDropDown{ 239 | // model:["one","two","three","four"] 240 | // } 241 | // } 242 | 243 | // RowLayout{ 244 | // spacing: 100 245 | // CustomDropDown{ 246 | // model:["Aksh","Qt Developer","C++ Style","four 4"] 247 | // } 248 | 249 | // CustomDropDown{ 250 | // model:["Drop Down","Something","Remove","four"] 251 | // } 252 | // } 253 | // } 254 | 255 | 256 | ColumnLayout{ 257 | spacing: 100 258 | anchors.centerIn: parent 259 | 260 | RowLayout{ 261 | spacing: 100 262 | CustomSwitch{ 263 | text: qsTr("Switch") 264 | checked: true 265 | } 266 | CustomSwitch{ 267 | text: qsTr("Switch") 268 | checked: false 269 | } 270 | CustomSwitch{ 271 | text: qsTr("Switch") 272 | checked: true 273 | } 274 | } 275 | 276 | RowLayout{ 277 | spacing: 100 278 | CustomSwitch{ 279 | text: qsTr("Switch") 280 | backgroundColor: "#3B71CA" 281 | checked: true 282 | } 283 | CustomSwitch{ 284 | backgroundColor:"#E4A11B" 285 | text: qsTr("Switch") 286 | checked: false 287 | } 288 | CustomSwitch{ 289 | backgroundColor:"#14A44D" 290 | text: qsTr("Switch") 291 | checked: true 292 | } 293 | } 294 | 295 | RowLayout{ 296 | spacing: 100 297 | CustomSwitch{ 298 | text: qsTr("Switch") 299 | backgroundColor: "#E4A11B" 300 | checked: true 301 | } 302 | CustomSwitch{ 303 | backgroundColor:"#332D2D" 304 | text: qsTr("Switch") 305 | checked: false 306 | } 307 | CustomSwitch{ 308 | backgroundColor:"#DC4C64" 309 | text: qsTr("Switch") 310 | checked: true 311 | } 312 | } 313 | } 314 | } 315 | -------------------------------------------------------------------------------- /Component.pro.user: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | EnvironmentId 7 | {1b7348e9-b98e-4fcc-99b1-5f9788d18a17} 8 | 9 | 10 | ProjectExplorer.Project.ActiveTarget 11 | 0 12 | 13 | 14 | ProjectExplorer.Project.EditorSettings 15 | 16 | true 17 | false 18 | true 19 | 20 | Cpp 21 | 22 | CppGlobal 23 | 24 | 25 | 26 | QmlJS 27 | 28 | QmlJSGlobal 29 | 30 | 31 | 2 32 | UTF-8 33 | false 34 | 4 35 | false 36 | 80 37 | true 38 | true 39 | 1 40 | false 41 | true 42 | false 43 | 0 44 | true 45 | true 46 | 0 47 | 8 48 | true 49 | false 50 | 1 51 | true 52 | true 53 | true 54 | *.md, *.MD, Makefile 55 | false 56 | true 57 | true 58 | 59 | 60 | 61 | ProjectExplorer.Project.PluginSettings 62 | 63 | 64 | true 65 | false 66 | true 67 | true 68 | true 69 | true 70 | 71 | 72 | 0 73 | true 74 | 75 | true 76 | true 77 | Builtin.DefaultTidyAndClazy 78 | 4 79 | true 80 | 81 | 82 | 83 | true 84 | 85 | 86 | 87 | 88 | ProjectExplorer.Project.Target.0 89 | 90 | Desktop 91 | Desktop Qt 5.15.15 MinGW 64-bit 92 | Desktop Qt 5.15.15 MinGW 64-bit 93 | qt.qt5.51515.win64_mingw81_kit 94 | 0 95 | 0 96 | 0 97 | 98 | 0 99 | C:\Users\codeit\Documents\build-Component-Desktop_Qt_5_15_15_MinGW_64_bit-Debug 100 | C:/Users/codeit/Documents/build-Component-Desktop_Qt_5_15_15_MinGW_64_bit-Debug 101 | 102 | 103 | true 104 | QtProjectManager.QMakeBuildStep 105 | false 106 | 107 | 108 | 109 | true 110 | Qt4ProjectManager.MakeStep 111 | 112 | 2 113 | Build 114 | Build 115 | ProjectExplorer.BuildSteps.Build 116 | 117 | 118 | 119 | true 120 | Qt4ProjectManager.MakeStep 121 | clean 122 | 123 | 1 124 | Clean 125 | Clean 126 | ProjectExplorer.BuildSteps.Clean 127 | 128 | 2 129 | false 130 | 131 | false 132 | 133 | Debug 134 | Qt4ProjectManager.Qt4BuildConfiguration 135 | 2 136 | 137 | 138 | C:\Users\codeit\Documents\build-Component-Desktop_Qt_5_15_15_MinGW_64_bit-Release 139 | C:/Users/codeit/Documents/build-Component-Desktop_Qt_5_15_15_MinGW_64_bit-Release 140 | 141 | 142 | true 143 | QtProjectManager.QMakeBuildStep 144 | false 145 | 146 | 147 | 148 | true 149 | Qt4ProjectManager.MakeStep 150 | 151 | 2 152 | Build 153 | Build 154 | ProjectExplorer.BuildSteps.Build 155 | 156 | 157 | 158 | true 159 | Qt4ProjectManager.MakeStep 160 | clean 161 | 162 | 1 163 | Clean 164 | Clean 165 | ProjectExplorer.BuildSteps.Clean 166 | 167 | 2 168 | false 169 | 170 | false 171 | 172 | Release 173 | Qt4ProjectManager.Qt4BuildConfiguration 174 | 0 175 | 0 176 | 177 | 178 | 0 179 | C:\Users\codeit\Documents\build-Component-Desktop_Qt_5_15_15_MinGW_64_bit-Profile 180 | C:/Users/codeit/Documents/build-Component-Desktop_Qt_5_15_15_MinGW_64_bit-Profile 181 | 182 | 183 | true 184 | QtProjectManager.QMakeBuildStep 185 | false 186 | 187 | 188 | 189 | true 190 | Qt4ProjectManager.MakeStep 191 | 192 | 2 193 | Build 194 | Build 195 | ProjectExplorer.BuildSteps.Build 196 | 197 | 198 | 199 | true 200 | Qt4ProjectManager.MakeStep 201 | clean 202 | 203 | 1 204 | Clean 205 | Clean 206 | ProjectExplorer.BuildSteps.Clean 207 | 208 | 2 209 | false 210 | 211 | false 212 | 213 | Profile 214 | Qt4ProjectManager.Qt4BuildConfiguration 215 | 0 216 | 0 217 | 0 218 | 219 | 3 220 | 221 | 222 | 0 223 | Deploy 224 | Deploy 225 | ProjectExplorer.BuildSteps.Deploy 226 | 227 | 1 228 | 229 | false 230 | ProjectExplorer.DefaultDeployConfiguration 231 | 232 | 1 233 | 234 | true 235 | true 236 | true 237 | 238 | 2 239 | 240 | false 241 | Qt4ProjectManager.Qt4RunConfiguration:C:/Users/codeit/Documents/Component/Component.pro 242 | C:/Users/codeit/Documents/Component/Component.pro 243 | true 244 | true 245 | true 246 | C:/Users/codeit/Documents/build-Component-Desktop_Qt_5_15_15_MinGW_64_bit-Debug 247 | 248 | 1 249 | 250 | 251 | 252 | ProjectExplorer.Project.TargetCount 253 | 1 254 | 255 | 256 | ProjectExplorer.Project.Updater.FileVersion 257 | 22 258 | 259 | 260 | Version 261 | 22 262 | 263 | 264 | --------------------------------------------------------------------------------