FluentUI/example/qml/page/T_TabView.qml

139 lines
3.8 KiB
QML
Raw Normal View History

2023-03-30 21:52:55 +08:00
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Window
import FluentUI
2023-04-22 16:02:52 +08:00
import "../component"
2023-03-27 18:24:35 +08:00
FluScrollablePage{
title:"TabView"
2023-03-28 17:53:46 +08:00
leftPadding:10
rightPadding:10
bottomPadding:20
2023-04-06 17:32:21 +08:00
spacing: 0
2023-03-27 18:24:35 +08:00
2023-03-30 11:43:35 +08:00
property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
2023-03-27 22:58:33 +08:00
Component{
id:com_page
Rectangle{
anchors.fill: parent
color: argument
}
}
2023-03-30 11:43:35 +08:00
function newTab(){
tab_view.appendTab("qrc:/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
}
2023-03-27 22:58:33 +08:00
Component.onCompleted: {
2023-03-30 11:43:35 +08:00
newTab()
newTab()
newTab()
2023-03-27 22:58:33 +08:00
}
2023-03-27 18:24:35 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-03-27 18:24:35 +08:00
Layout.topMargin: 20
2023-03-30 11:43:35 +08:00
height: 50
2023-03-27 18:24:35 +08:00
paddings: 10
2023-03-30 11:43:35 +08:00
RowLayout{
spacing: 14
FluDropDownButton{
id:btn_tab_width_behavior
Layout.preferredWidth: 140
text:"Equal"
items:[
FluMenuItem{
text:"Equal"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Equal
}
},
FluMenuItem{
text:"SizeToContent"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.SizeToContent
}
},
FluMenuItem{
text:"Compact"
onClicked: {
btn_tab_width_behavior.text = text
tab_view.tabWidthBehavior = FluTabView.Compact
}
}
]
}
FluDropDownButton{
id:btn_close_button_visibility
text:"Always"
2023-04-03 09:32:06 +08:00
Layout.preferredWidth: 120
2023-03-30 11:43:35 +08:00
items:[
FluMenuItem{
text:"Nerver"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Nerver
}
},
FluMenuItem{
text:"Always"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.Always
}
},
FluMenuItem{
text:"OnHover"
onClicked: {
btn_close_button_visibility.text = text
tab_view.closeButtonVisibility = FluTabView.OnHover
}
}
]
}
}
}
2023-03-27 18:24:35 +08:00
2023-03-30 11:43:35 +08:00
FluArea{
2023-04-03 09:32:06 +08:00
Layout.fillWidth: true
2023-04-06 17:32:21 +08:00
Layout.topMargin: 15
2023-03-30 11:43:35 +08:00
height: 400
paddings: 10
2023-03-27 18:24:35 +08:00
FluTabView{
2023-03-27 22:58:33 +08:00
id:tab_view
2023-03-30 11:43:35 +08:00
onNewPressed:{
newTab()
}
2023-03-27 18:24:35 +08:00
}
}
2023-04-06 17:32:21 +08:00
CodeExpander{
Layout.fillWidth: true
2023-04-19 17:25:46 +08:00
Layout.topMargin: -1
2023-04-06 17:32:21 +08:00
code:'FluTabView{
anchors.fill: parent
Component.onCompleted: {
newTab()
newTab()
newTab()
}
Component{
id:com_page
Rectangle{
anchors.fill: parent
color: argument
}
}
function newTab(){
tab_view.appendTab("qrc:/res/image/favicon.ico","Document 1",com_page,argument)
}
}
'
}
2023-03-27 18:24:35 +08:00
}