364 lines
12 KiB
QML
364 lines
12 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import QtQuick.Controls
|
|
import FluentUI.Controls
|
|
import FluentUI.impl
|
|
import QtQuick.Controls.Material as M
|
|
import Gallery
|
|
|
|
ScrollablePage {
|
|
id: page
|
|
header: Item{}
|
|
title: qsTr("FluentUI Pro")
|
|
Connections{
|
|
target: context
|
|
function onActivated() {
|
|
console.debug("Material","onActivated")
|
|
}
|
|
function onDeactivated() {
|
|
console.debug("Material","onDeactivated")
|
|
}
|
|
}
|
|
Button{
|
|
Layout.preferredHeight: 68
|
|
Layout.fillWidth: true
|
|
Label{
|
|
text: qsTr("This is a subpage of StackPage")
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
left: parent.left
|
|
leftMargin: 20
|
|
}
|
|
}
|
|
Icon{
|
|
source: FluentIcons.graph_ChevronRight
|
|
width: 20
|
|
height: 20
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
right: parent.right
|
|
rightMargin: 20
|
|
}
|
|
}
|
|
onClicked: {
|
|
context.router.go("/subpage")
|
|
}
|
|
}
|
|
|
|
component RowItem:RowLayout{
|
|
property string title
|
|
property Component leftItem
|
|
property Component rightItem
|
|
spacing: 0
|
|
height: 58
|
|
Item{
|
|
Layout.preferredWidth: 100
|
|
Layout.leftMargin: 30
|
|
Layout.fillHeight: true
|
|
Label{
|
|
text: title
|
|
anchors{
|
|
verticalCenter: parent.verticalCenter
|
|
left: parent.left
|
|
}
|
|
}
|
|
}
|
|
Item{
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Loader{
|
|
anchors.centerIn: parent
|
|
sourceComponent: leftItem
|
|
}
|
|
}
|
|
Item{
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
Loader{
|
|
anchors.centerIn: parent
|
|
sourceComponent: rightItem
|
|
}
|
|
}
|
|
}
|
|
GroupBox {
|
|
id: layout_display_mode
|
|
title: qsTr("NavigationView Display Mode")
|
|
Layout.topMargin: 20
|
|
RowLayout {
|
|
anchors.fill: parent
|
|
Row {
|
|
RadioButton {
|
|
checked: Global.displayMode === NavigationViewType.Top
|
|
text: qsTr("top")
|
|
onClicked: {
|
|
Global.displayMode = NavigationViewType.Top
|
|
}
|
|
}
|
|
RadioButton {
|
|
checked: Global.displayMode === NavigationViewType.Open
|
|
text: qsTr("open")
|
|
onClicked: {
|
|
Global.displayMode = NavigationViewType.Open
|
|
}
|
|
}
|
|
RadioButton {
|
|
checked: Global.displayMode === NavigationViewType.Compact
|
|
text: qsTr("compact")
|
|
onClicked: {
|
|
Global.displayMode = NavigationViewType.Compact
|
|
}
|
|
}
|
|
RadioButton {
|
|
checked: Global.displayMode === NavigationViewType.Minimal
|
|
text: qsTr("minimal")
|
|
onClicked: {
|
|
Global.displayMode = NavigationViewType.Minimal
|
|
}
|
|
}
|
|
RadioButton {
|
|
checked: Global.displayMode === NavigationViewType.Auto
|
|
text: qsTr("auto")
|
|
onClicked: {
|
|
Global.displayMode = NavigationViewType.Auto
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Pane{
|
|
id: layout_pane
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: layout_column.height + 20
|
|
Layout.topMargin: 10
|
|
FluentUI.dark: checbox_dark.checked
|
|
FluentUI.primaryColor: Colors.blue
|
|
M.Material.accent: FluentUI.theme.accentColor.normal
|
|
M.Material.theme: checbox_dark.checked ? M.Material.Dark : M.Material.Light
|
|
|
|
ListModel{
|
|
id: accentColors
|
|
ListElement{
|
|
name: "Yellow"
|
|
color: function(){return Colors.yellow}
|
|
}
|
|
ListElement{
|
|
name: "Orange"
|
|
color: function(){return Colors.orange}
|
|
}
|
|
ListElement{
|
|
name: "Red"
|
|
color: function(){return Colors.red}
|
|
}
|
|
ListElement{
|
|
name: "Magenta"
|
|
color: function(){return Colors.magenta}
|
|
}
|
|
ListElement{
|
|
name: "Purple"
|
|
color: function(){return Colors.purple}
|
|
}
|
|
ListElement{
|
|
name: "Blue"
|
|
color: function(){return Colors.blue}
|
|
}
|
|
ListElement{
|
|
name: "Teal"
|
|
color: function(){return Colors.teal}
|
|
}
|
|
ListElement{
|
|
name: "Green"
|
|
color: function(){return Colors.green}
|
|
}
|
|
}
|
|
ColumnLayout{
|
|
id: layout_column
|
|
width: parent.width
|
|
spacing: 0
|
|
Row{
|
|
spacing: 20
|
|
Label{
|
|
text: qsTr("Equivalents with the material")
|
|
font: Typography.subtitle
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
CheckBox{
|
|
id: checbox_disabled
|
|
text: qsTr("Disabled")
|
|
checked: false
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
CheckBox{
|
|
id: checbox_dark
|
|
text: qsTr("Page dark mode")
|
|
checked: false
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
}
|
|
}
|
|
Row {
|
|
spacing: 10
|
|
Layout.topMargin: 10
|
|
Layout.fillWidth: true
|
|
Repeater{
|
|
model: accentColors
|
|
delegate: Rectangle{
|
|
required property var model
|
|
implicitWidth: 48
|
|
implicitHeight: 48
|
|
radius: 4
|
|
border.color: {
|
|
if(!enabled){
|
|
return layout_pane.FluentUI.theme.res.accentFillColorDisabled
|
|
}
|
|
return model.color().darkest()
|
|
}
|
|
border.width: 1
|
|
color: {
|
|
if(!enabled){
|
|
return layout_pane.FluentUI.theme.res.accentFillColorDisabled
|
|
}
|
|
return mouse_item_accent_color.containsMouse? model.color().lightest() : model.color().normal
|
|
}
|
|
Icon{
|
|
source: FluentIcons.graph_CheckMark
|
|
width: 24
|
|
height: 24
|
|
anchors.centerIn: parent
|
|
color: Colors.basedOnLuminance(parent.color)
|
|
visible: model.color() === layout_pane.FluentUI.primaryColor
|
|
}
|
|
MouseArea{
|
|
id: mouse_item_accent_color
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: {
|
|
layout_pane.FluentUI.primaryColor = model.color()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
ColumnLayout{
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: 10
|
|
spacing: 0
|
|
enabled: !checbox_disabled.checked
|
|
RowItem{
|
|
title: qsTr("Button")
|
|
leftItem: Button{
|
|
text: qsTr("Content")
|
|
icon.source: "qrc:/qt/qml/Gallery/res/image/logo.png"
|
|
icon.color: "#00000000"
|
|
}
|
|
rightItem: M.Button{
|
|
text: qsTr("Content")
|
|
icon.source: "qrc:/qt/qml/Gallery/res/image/logo.png"
|
|
icon.color: "#00000000"
|
|
}
|
|
}
|
|
RowItem{
|
|
title: qsTr("FilledButton")
|
|
leftItem: Button{
|
|
text: qsTr("Content")
|
|
highlighted: true
|
|
}
|
|
rightItem: M.Button{
|
|
text: qsTr("Content")
|
|
highlighted: true
|
|
}
|
|
}
|
|
RowItem{
|
|
title: qsTr("CheckBox")
|
|
leftItem: CheckBox{
|
|
text: qsTr("Content")
|
|
tristate: true
|
|
checked: true
|
|
}
|
|
rightItem: M.CheckBox{
|
|
text: qsTr("Content")
|
|
tristate: true
|
|
checked: true
|
|
}
|
|
}
|
|
RowItem{
|
|
title: qsTr("RadioButton")
|
|
leftItem: RadioButton{
|
|
text: qsTr("Content")
|
|
checkable: false
|
|
checked: true
|
|
onClicked: {
|
|
checked = !checked
|
|
}
|
|
}
|
|
rightItem: M.RadioButton{
|
|
text: qsTr("Content")
|
|
checkable: false
|
|
checked: true
|
|
onClicked: {
|
|
checked = !checked
|
|
}
|
|
}
|
|
}
|
|
RowItem{
|
|
title: qsTr("ComboBox")
|
|
leftItem: ComboBox{
|
|
model: [qsTr("First"), qsTr("Second"), qsTr("Third")]
|
|
}
|
|
rightItem: M.ComboBox{
|
|
model: [qsTr("First"), qsTr("Second"), qsTr("Third")]
|
|
}
|
|
}
|
|
RowItem{
|
|
title: qsTr("Switch")
|
|
leftItem: Switch{
|
|
text: qsTr("Content")
|
|
checked: true
|
|
}
|
|
rightItem: M.Switch{
|
|
text: qsTr("Content")
|
|
checked: true
|
|
}
|
|
}
|
|
RowItem{
|
|
title: qsTr("Slider")
|
|
leftItem: Slider{
|
|
value: 0.5
|
|
}
|
|
rightItem: M.Slider{
|
|
value: 0.5
|
|
}
|
|
}
|
|
RowItem{
|
|
title: qsTr("ProgressBar")
|
|
id: item_progressbar
|
|
property real value: 0
|
|
leftItem: ProgressBar{
|
|
value: item_progressbar.value
|
|
}
|
|
rightItem: M.ProgressBar{
|
|
value: item_progressbar.value
|
|
}
|
|
PropertyAnimation on value{
|
|
from: 0
|
|
to: 1
|
|
duration: 1000
|
|
loops: Animation.Infinite
|
|
}
|
|
}
|
|
RowItem{
|
|
Layout.bottomMargin: 30
|
|
title: qsTr("TextField")
|
|
leftItem: TextField{
|
|
placeholderText: qsTr("TextField")
|
|
}
|
|
rightItem: M.TextField{
|
|
placeholderText: qsTr("TextField")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|