jangocheng / qml-bootstrap Goto Github PK

View Code? Open in Web Editor NEW

Sweet Qml components inspired from Ionic framework style for mobile and desktop Qt/Qml projects

QMake 2.22% C++ 0.27% QML 50.26% JavaScript 47.25%

qml-bootstrap's Introduction

qml-bootstrap

Qml Bootstrap is a set of simple and beautiful components for qml mobile and desktop projects. It is inspired from Ionic framework components and use Font Awesome icons font.

How to use it

Just clone the repository and create a new qml project base on this code. Then import components that you want to use. For example, to use ButtonDefault

import QtQuick 2.3
import QtQuick.Window 2.0
import "src/buttons"

Window {
    visible: true
    width: 640
    height: 640
    title: qsTr("Hello World !")

    Column {
        anchors.centerIn: parent
        spacing: 10
        ButtonDefault {
            design: "light"
            width: 100
            height: 50
        }
        ButtonDefault {
            design: "stable"
            width: 100
            height: 50
        }
        ButtonDefault {
            design: "positive"
            width: 100
            height: 50
        }
        ButtonDefault {
            design: "calm"
            width: 100
            height: 50
        }
        ButtonDefault {
            design: "balanced"
            width: 100
            height: 50
        }
        ButtonDefault {
            design: "energized"
            width: 100
            height: 50
        }
        ButtonDefault {
            design: "assertive"
            width: 100
            height: 50
        }
        ButtonDefault {
            design: "royal"
            width: 100
            height: 50
        }
        ButtonDefault {
            design: "dark"
            width: 100
            height: 50
        }
    }
}