Styles.qml 8.05 KiB
/****************************************************************************
**
** Copyright (C) 2013 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of the Qt Quick Controls module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
**   * Redistributions of source code must retain the above copyright
**     notice, this list of conditions and the following disclaimer.
**   * Redistributions in binary form must reproduce the above copyright
**     notice, this list of conditions and the following disclaimer in
**     the documentation and/or other materials provided with the
**     distribution.
**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
**     of its contributors may be used to endorse or promote products derived
**     from this software without specific prior written permission.
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
** $QT_END_LICENSE$
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
import QtQuick.Layouts 1.0
Item {
    id: root
    width: 300
    height: 200
    property int columnWidth: 120
    GridLayout {
        rowSpacing: 12
        columnSpacing: 30
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.margins: 30
        Button {
            text: "Push me"
            style: ButtonStyle { }
            implicitWidth: columnWidth
        Button {
            text: "Push me"
            style: ButtonStyle { }
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
implicitWidth: columnWidth } Button { text: "Push me" style: buttonStyle implicitWidth: columnWidth } TextField { Layout.row: 1 style: TextFieldStyle { } implicitWidth: columnWidth } TextField { style: TextFieldStyle { } implicitWidth: columnWidth } TextField { style: textfieldStyle implicitWidth: columnWidth } Slider { Layout.row: 2 value: 50 maximumValue: 100 implicitWidth: columnWidth style: SliderStyle { } } Slider { value: 50 maximumValue: 100 implicitWidth: columnWidth style: SliderStyle { } } Slider { value: 50 maximumValue: 100 implicitWidth: columnWidth style: sliderStyle } ProgressBar { Layout.row: 3 value: 50 maximumValue: 100 implicitWidth: columnWidth style: ProgressBarStyle{ } } ProgressBar { value: 50 maximumValue: 100 implicitWidth: columnWidth style: ProgressBarStyle{ } } ProgressBar { value: 50 maximumValue: 100 implicitWidth: columnWidth style: progressbarStyle } CheckBox { text: "CheckBox" style: CheckBoxStyle{} Layout.row: 4 implicitWidth: columnWidth } RadioButton { style: RadioButtonStyle{}
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
text: "RadioButton" implicitWidth: columnWidth } ComboBox { model: ["Paris", "Oslo", "New York"] style: ComboBoxStyle{} implicitWidth: columnWidth } TabView { Layout.row: 5 Layout.columnSpan: 3 Layout.fillWidth: true implicitHeight: 30 Tab { title: "One" ; Item {}} Tab { title: "Two" ; Item {}} Tab { title: "Three" ; Item {}} Tab { title: "Four" ; Item {}} style: TabViewStyle {} } TabView { Layout.row: 6 Layout.columnSpan: 3 Layout.fillWidth: true implicitHeight: 30 Tab { title: "One" ; Item {}} Tab { title: "Two" ; Item {}} Tab { title: "Three" ; Item {}} Tab { title: "Four" ; Item {}} style: tabViewStyle } } // Style delegates: property Component buttonStyle: ButtonStyle { background: Rectangle { implicitHeight: 20 implicitWidth: columnWidth color: control.pressed ? "darkGray" : "lightGray" antialiasing: true border.color: "gray" radius: height/2 } } property Component textfieldStyle: TextFieldStyle { background: Rectangle { implicitWidth: columnWidth implicitHeight: 20 color: "#f0f0f0" antialiasing: true border.color: "gray" radius: height/2 } } property Component sliderStyle: SliderStyle { handle: Rectangle { width: 14 height: 14 color: control.pressed ? "darkGray" : "lightGray" border.color: "gray" antialiasing: true radius: height/2 } groove: Rectangle {
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
height: 8 implicitWidth: columnWidth implicitHeight: 20 antialiasing: true color: "darkGray" border.color: "gray" radius: height/2 } } property Component progressbarStyle: ProgressBarStyle { background: Rectangle { implicitWidth: columnWidth implicitHeight: 20 color: "#f0f0f0" border.color: "gray" antialiasing: true radius: height/2 } progress: Rectangle { implicitWidth: columnWidth implicitHeight: 20 color: "#c0c0c0" border.color: "gray" antialiasing: true radius: height/2 } } property Component tabViewStyle: TabViewStyle { tabOverlap: 16 frameOverlap: 4 tabsMovable: true frame: Rectangle { gradient: Gradient{ GradientStop { color: "#e5e5e5" ; position: 0 } GradientStop { color: "#e0e0e0" ; position: 1 } } border.color: "#898989" Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" } } tab: Item { property int totalOverlap: tabOverlap * (control.count - 1) implicitWidth: Math.min ((styleData.availableWidth + totalOverlap)/control.count - 4, image.sourceSize.width) implicitHeight: image.sourceSize.height BorderImage { id: image anchors.fill: parent source: styleData.selected ? "../images/tab_selected.png" : "../images/tab.png" border.left: 30 smooth: false border.right: 30 } Text { text: styleData.title anchors.centerIn: parent } } leftCorner: Item { implicitWidth: 12 } } }