Component Showcase Demo App
import Felgo 3.0
import QtQuick 2.5
import QtQuick.Controls 2.0 as Quick2
import Qt.labs.settings 1.0 as QtLabs
import QtQuick.Controls.Material 2.0
import "../controls"
import "../common"
Page {
id: controlsPage
rightBarItem: NavigationBarRow {
id: rightNavBarRow
TextButtonBarItem {
text: Theme.tintColor !== Qt.rgba(0.25,0.25,0.25,1) ? "Grey" : "Color"
textItem.font.pixelSize: sp(16)
title: text
showItem: Theme.isAndroid ? showItemNever : showItemAlways
property color prevColor
onClicked: {
if(text.toLowerCase() === "grey") {
prevColor = Theme.tintColor
Theme.colors.tintColor = Qt.rgba(0.25,0.25,0.25,1)
}
else
Theme.colors.tintColor = prevColor
}
}
IconButtonBarItem {
onClicked: NativeDialog.confirm("Controls", "This page shows different controls you can use in your app.",
function(ok){}, false)
title: "Info"
icon: IconType.info
}
}
Material.accent: Theme.tintColor
AppTabBar {
id: controlsTabBar
AppTabButton { text: "iOS" }
AppTabButton { text: system.isPlatform(1) ? "Custom" : "Android" }
onCurrentIndexChanged: {
var target = currentIndex == 0 ? "ios" : (currentIndex == 1 ? "android" : "windows")
if(target !== Theme.platform)
Theme.platform = target
}
Component.onCompleted: currentIndex = Theme.isIos ? 0 : Theme.isAndroid ? 1 : 2
Connections {
target: Theme
onPlatformChanged: {
var idx = 2
if(Theme.platform === "ios")
idx = 0
else if(Theme.platform === "android")
idx = 1
if(controlsTabBar.currentIndex !== idx)
controlsTabBar.currentIndex = idx
}
}
}
Item {
anchors.top: controlsTabBar.bottom
anchors.bottom: parent.bottom
width: parent.width
AppFlickable {
id: scroll
anchors.fill: parent
contentHeight: content.height
MouseArea {
anchors.fill: parent
onClicked: scroll.forceActiveFocus()
}
Column {
id: content
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
SearchBar {
id: searchBar
iosAlternateStyle: true
onAccepted: {
NativeDialog.confirm("Search", "This is a search bar with a platform-specific look.", function(){}, false)
}
}
SectionDescription { text: "Felgo offers a pre-defined style for Android and iOS based on the app theme. Toggle the switch below to change the platform theme." }
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "AppSwitch"; horizontalAlignment: Text.AlignHCenter }
Row {
anchors.horizontalCenter: parent.horizontalCenter
spacing: parent.spacing
AppText {
anchors.verticalCenter: parent.verticalCenter
text: system.isPlatform(1) ? "Custom Theme:" : "iOS Theme:"
}
AppSwitch {
anchors.verticalCenter: parent.verticalCenter
checked: Theme.isAndroid && system.isPlatform(1) || Theme.isIos && !system.isPlatform(1)
updateChecked: false
onToggled: {
if(system.isPlatform(1))
Theme.platform = checked ? "ios" : "android"
else
Theme.platform = checked ? "android" : "ios"
}
}
}
}
}
SectionContent {
contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "AppButton"; horizontalAlignment: Text.AlignHCenter }
Row { anchors.horizontalCenter: parent.horizontalCenter
AppButton { id: normButton; verticalMargin: 0; text: "Normal"; flat: false; onClicked: text = text === "Normal" ? "Clicked" : "Normal" }
AppButton { id: flatButton; verticalMargin: 0; text: "Flat"; flat: true; onClicked: text = text === "Flat" ? "Clicked" : "Flat" }
}
}
color: Theme.secondaryBackgroundColor
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "AppSlider"; horizontalAlignment: Text.AlignHCenter }
AppSlider { implicitWidth: dp(200); anchors.horizontalCenter: parent.horizontalCenter }
}
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "AppRangeSlider"; horizontalAlignment: Text.AlignHCenter }
AppRangeSlider { implicitWidth: dp(200); anchors.horizontalCenter: parent.horizontalCenter }
}
color: Theme.secondaryBackgroundColor
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "AppCheckBox"; horizontalAlignment: Text.AlignHCenter }
AppCheckBox { text: !checked ? "Check Me!" : "Checked"; anchors.horizontalCenter: parent.horizontalCenter }
}
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "AppTextField"; horizontalAlignment: Text.AlignHCenter }
AppTextField { implicitWidth: dp(200); placeholderText: "Enter text ..."; anchors.horizontalCenter: parent.horizontalCenter }
}
color: Theme.secondaryBackgroundColor
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "AppTextEdit"; horizontalAlignment: Text.AlignHCenter }
CustomAppTextEdit { anchors.horizontalCenter: parent.horizontalCenter }
}
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "BusyIndicator"; horizontalAlignment: Text.AlignHCenter }
Quick2.BusyIndicator {
anchors.horizontalCenter: parent.horizontalCenter
running: true; implicitWidth: dp(48); implicitHeight: width
visible: !Theme.isIos
}
AppImage {
id: iosActivity
anchors.horizontalCenter: parent.horizontalCenter
source: "../../assets/iosactivity.png"
width: dp(28)
height: dp(28)
smooth: true
antialiasing: true
Timer {
running: true
repeat: true
interval: 100
onTriggered: {
iosActivity.rotation += 30
if(iosActivity.rotation === 360)
iosActivity.rotation = 0
}
}
visible: Theme.isIos
}
}
color: Theme.secondaryBackgroundColor
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "Time or Date Picker (only iOS style)"; horizontalAlignment: Text.AlignHCenter }
Row {
anchors.horizontalCenter: parent.horizontalCenter
spacing: parent.spacing
AppText {
text: "Time: "+leadingZero(timePickerDialog.time.hour)+":"+leadingZero(timePickerDialog.time.minute)
anchors.verticalCenter: parent.verticalCenter
function leadingZero(number) {
return ('00' + number).slice(-2)
}
}
AppButton { flat: false; text: "Set"; onClicked: timePickerDialog.open(); anchors.verticalCenter: parent.verticalCenter }
}
}
}
SectionContent { contentItem: Column {
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "ActionButton (only Android style)"; horizontalAlignment: Text.AlignHCenter }
FloatingActionButton {
anchors.horizontalCenter: parent.horizontalCenter
icon: IconType.star
onClicked: icon === IconType.star ? icon = IconType.envelope : icon = IconType.star
anchors.bottom: undefined
anchors.right: undefined
visible: true
}
}
color: Theme.secondaryBackgroundColor
}
SectionSpacer { color: Theme.secondaryBackgroundColor }
SectionHeader { icon: IconType.book; text: "Qt Quick Controls 2" }
SectionDescription { text: "Choose between three different styles, including Material-design." }
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "ComboBox"; horizontalAlignment: Text.AlignHCenter }
CustomComboBox { anchors.horizontalCenter: parent.horizontalCenter; model: ["First", "Second", "Third"] }
}
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "Dial"; horizontalAlignment: Text.AlignHCenter }
Quick2.Dial {
anchors.horizontalCenter: parent.horizontalCenter
implicitWidth: dp(96); implicitHeight: implicitWidth
padding: 0
AppText { text: Math.round(parent.position * 100); font.pixelSize: sp(10); anchors.centerIn: parent }
}
}
color: Theme.secondaryBackgroundColor
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "ProgressBar"; horizontalAlignment: Text.AlignHCenter }
Quick2.ProgressBar {
anchors.horizontalCenter: parent.horizontalCenter
implicitWidth: 200; indeterminate: true
scale: dp(0.85)
}
Quick2.ProgressBar {
id: progressBar
anchors.horizontalCenter: parent.horizontalCenter
implicitWidth: 200
scale: dp(0.85)
PropertyAnimation {
target: progressBar; property: "value"; from: 0; to: 1; duration: 3000;
running: true; loops: Animation.Infinite
}
}
}
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "RadioButton"; horizontalAlignment: Text.AlignHCenter }
Column {
id: radioColumn
anchors.horizontalCenter: parent.horizontalCenter
CustomRadioButton { checked: true; text: "One" }
CustomRadioButton { text: "Two" }
CustomRadioButton { text: "Three" }
}
}
color: Theme.secondaryBackgroundColor
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "SpinBox"; horizontalAlignment: Text.AlignHCenter }
Item {
anchors.horizontalCenter: parent.horizontalCenter
implicitWidth: spinBox.implicitWidth * spinBox.scale
implicitHeight: spinBox.implicitHeight * spinBox.scale
Quick2.SpinBox {
id: spinBox
scale: dp(0.85)
from: 0; to: 100; stepSize: 1
editable: true
anchors.centerIn: parent
}
}
}
}
SectionContent { contentItem: Column {
anchors.horizontalCenter: parent.horizontalCenter
spacing: dp(10)
AppText { width: parent.width; font.pixelSize: sp(12); text: "ToolTip"; horizontalAlignment: Text.AlignHCenter }
CustomToolTipButton {
anchors.horizontalCenter: parent.horizontalCenter
text: "Press and Hold"
toolTip: "A simple ToolTip"
}
}
color: Theme.secondaryBackgroundColor
}
}
}
TimePickerDialog { id: timePickerDialog }
Quick2.ButtonGroup {
buttons: radioColumn.children
}
ScrollIndicator {
flickable: scroll