mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-07-01 15:42:20 +08:00
update
This commit is contained in:
朱子楚\zhuzi
@ -16,7 +16,7 @@ FluContentPage{
|
||||
Component.onCompleted: {
|
||||
for(var i=0;i<=100;i++){
|
||||
var item = {}
|
||||
item.color = colors[rand(0,7)].dark
|
||||
item.color = colors[rand(0,7)]
|
||||
item.height = rand(100,300)
|
||||
append(item)
|
||||
}
|
||||
@ -39,7 +39,7 @@ FluContentPage{
|
||||
model:list_model
|
||||
delegate: Rectangle{
|
||||
height: model.height
|
||||
color:model.color
|
||||
color:model.color.normal
|
||||
FluText{
|
||||
color:"#FFFFFF"
|
||||
text:model.index
|
||||
@ -56,4 +56,3 @@ FluContentPage{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -15,12 +15,12 @@ FluScrollablePage{
|
||||
id:com_page
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
color: argument
|
||||
color: argument.normal
|
||||
}
|
||||
}
|
||||
|
||||
function newTab(){
|
||||
tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
|
||||
tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
@ -126,5 +126,4 @@ FluScrollablePage{
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,32 +7,40 @@ import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
id:root
|
||||
title:"Theme"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 270
|
||||
Layout.preferredHeight: 340
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing:0
|
||||
anchors{
|
||||
left: parent.left
|
||||
}
|
||||
RowLayout{
|
||||
FluText{
|
||||
text:"主题颜色"
|
||||
Layout.topMargin: 10
|
||||
}
|
||||
RowLayout{
|
||||
Layout.topMargin: 5
|
||||
Repeater{
|
||||
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
delegate: FluRectangle{
|
||||
model: root.colorData
|
||||
delegate: Rectangle{
|
||||
width: 42
|
||||
height: 42
|
||||
radius: [4,4,4,4]
|
||||
radius: 4
|
||||
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
||||
border.color: modelData.darkest
|
||||
FluIcon {
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.AcceptMedium
|
||||
iconSize: 15
|
||||
visible: modelData === FluTheme.themeColor
|
||||
visible: modelData === FluTheme.accentColor
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
}
|
||||
MouseArea{
|
||||
@ -40,12 +48,41 @@ FluScrollablePage{
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
FluTheme.themeColor = modelData
|
||||
FluTheme.accentColor = modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Row{
|
||||
Layout.topMargin: 10
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"自定义主题颜色"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
current: FluTheme.accentColor.normal
|
||||
onAccepted: {
|
||||
FluTheme.accentColor = FluColors.createAccentColor(current)
|
||||
}
|
||||
FluIcon {
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.AcceptMedium
|
||||
iconSize: 15
|
||||
visible: {
|
||||
for(var i =0 ;i< root.colorData.length; i++){
|
||||
if(root.colorData[i] === FluTheme.accentColor){
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"夜间模式"
|
||||
Layout.topMargin: 20
|
||||
@ -88,7 +125,7 @@ FluScrollablePage{
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTheme.themeColor = FluColors.Orange
|
||||
code:'FluTheme.accentColor = FluColors.Orange
|
||||
|
||||
FluTheme.dark = true
|
||||
|
||||
|
||||
@ -11,13 +11,12 @@ FluContentPage{
|
||||
|
||||
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
|
||||
|
||||
ListModel{
|
||||
id:list_model
|
||||
Component.onCompleted: {
|
||||
for(var i=0;i<=100;i++){
|
||||
var item = {}
|
||||
item.color = colors[rand(0,7)].dark
|
||||
item.color = colors[rand(0,7)]
|
||||
item.height = rand(100,300)
|
||||
append(item)
|
||||
}
|
||||
@ -40,7 +39,7 @@ FluContentPage{
|
||||
model:list_model
|
||||
delegate: Rectangle{
|
||||
height: model.height
|
||||
color:model.color
|
||||
color:model.color.normal
|
||||
FluText{
|
||||
color:"#FFFFFF"
|
||||
text:model.index
|
||||
@ -57,4 +56,3 @@ FluContentPage{
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -15,12 +15,12 @@ FluScrollablePage{
|
||||
id:com_page
|
||||
Rectangle{
|
||||
anchors.fill: parent
|
||||
color: argument
|
||||
color: argument.normal
|
||||
}
|
||||
}
|
||||
|
||||
function newTab(){
|
||||
tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
|
||||
tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
@ -126,5 +126,4 @@ FluScrollablePage{
|
||||
}
|
||||
'
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -7,32 +7,40 @@ import "../component"
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
id:root
|
||||
title:"Theme"
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 270
|
||||
Layout.preferredHeight: 340
|
||||
paddings: 10
|
||||
|
||||
ColumnLayout{
|
||||
spacing:0
|
||||
anchors{
|
||||
left: parent.left
|
||||
}
|
||||
RowLayout{
|
||||
FluText{
|
||||
text:"主题颜色"
|
||||
Layout.topMargin: 10
|
||||
}
|
||||
RowLayout{
|
||||
Layout.topMargin: 5
|
||||
Repeater{
|
||||
model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
|
||||
delegate: FluRectangle{
|
||||
model: root.colorData
|
||||
delegate: Rectangle{
|
||||
width: 42
|
||||
height: 42
|
||||
radius: [4,4,4,4]
|
||||
radius: 4
|
||||
color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
|
||||
border.color: modelData.darkest
|
||||
FluIcon {
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.AcceptMedium
|
||||
iconSize: 15
|
||||
visible: modelData === FluTheme.themeColor
|
||||
visible: modelData === FluTheme.accentColor
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
}
|
||||
MouseArea{
|
||||
@ -40,12 +48,41 @@ FluScrollablePage{
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
FluTheme.themeColor = modelData
|
||||
FluTheme.accentColor = modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Row{
|
||||
Layout.topMargin: 10
|
||||
spacing: 10
|
||||
FluText{
|
||||
text:"自定义主题颜色"
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
FluColorPicker{
|
||||
id:color_picker
|
||||
current: FluTheme.accentColor.normal
|
||||
onAccepted: {
|
||||
FluTheme.accentColor = FluColors.createAccentColor(current)
|
||||
}
|
||||
FluIcon {
|
||||
anchors.centerIn: parent
|
||||
iconSource: FluentIcons.AcceptMedium
|
||||
iconSize: 15
|
||||
visible: {
|
||||
for(var i =0 ;i< root.colorData.length; i++){
|
||||
if(root.colorData[i] === FluTheme.accentColor){
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
FluText{
|
||||
text:"夜间模式"
|
||||
Layout.topMargin: 20
|
||||
@ -88,7 +125,7 @@ FluScrollablePage{
|
||||
CodeExpander{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: -1
|
||||
code:'FluTheme.themeColor = FluColors.Orange
|
||||
code:'FluTheme.accentColor = FluColors.Orange
|
||||
|
||||
FluTheme.dark = true
|
||||
|
||||
|
||||
Reference in New Issue
Block a user