mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2024-11-27 05:38:37 +08:00
update
This commit is contained in:
parent
08457dc75e
commit
206669e5f0
51
example/T_Pivot.qml
Normal file
51
example/T_Pivot.qml
Normal file
@ -0,0 +1,51 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Layouts
|
||||
import QtQuick.Window
|
||||
import FluentUI
|
||||
|
||||
FluScrollablePage{
|
||||
|
||||
title:"Pivot"
|
||||
leftPadding:10
|
||||
rightPadding:10
|
||||
bottomPadding:20
|
||||
|
||||
|
||||
FluArea{
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
height: 400
|
||||
paddings: 10
|
||||
|
||||
FluPivot{
|
||||
anchors.fill: parent
|
||||
FluPivotItem{
|
||||
title:"All"
|
||||
contentItem:FluText{
|
||||
text:"All emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Unread"
|
||||
contentItem:FluText{
|
||||
text:"Unread emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Flagged"
|
||||
contentItem:FluText{
|
||||
text:"Flagged emails go here."
|
||||
}
|
||||
}
|
||||
FluPivotItem{
|
||||
title:"Urgent"
|
||||
contentItem:FluText{
|
||||
text:"Urgent emails go here."
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
@ -172,6 +172,17 @@ FluObject{
|
||||
FluPaneItemExpander{
|
||||
title:"Navigation"
|
||||
icon:FluentIcons.AllApps
|
||||
|
||||
FluPaneItem{
|
||||
title:"Pivot"
|
||||
image:"qrc:/res/image/control/Pivot.png"
|
||||
recentlyAdded:true
|
||||
order:3
|
||||
desc:"Presents information from different sources in atabbed view."
|
||||
onTap:{
|
||||
navigationView.push("qrc:/T_Pivot.qml")
|
||||
}
|
||||
}
|
||||
FluPaneItem{
|
||||
title:"TabView"
|
||||
image:"qrc:/res/image/control/TabView.png"
|
||||
|
@ -154,5 +154,6 @@
|
||||
<file>global/ItemsFooter.qml</file>
|
||||
<file>page/MediaPage.qml</file>
|
||||
<file>T_FlipView.qml</file>
|
||||
<file>T_Pivot.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
@ -33,6 +33,8 @@ void Fluent::registerTypes(const char *uri){
|
||||
qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
|
||||
qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
|
||||
|
||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivotItem.qml"),uri,major,minor,"FluPivotItem");
|
||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPivot.qml"),uri,major,minor,"FluPivot");
|
||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluFlipView.qml"),uri,major,minor,"FluFlipView");
|
||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluPaneItemExpander.qml"),uri,major,minor,"FluPaneItemExpander");
|
||||
qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluTabView.qml"),uri,major,minor,"FluTabView");
|
||||
|
@ -121,7 +121,6 @@ Rectangle {
|
||||
text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
|
||||
}
|
||||
|
||||
|
||||
FluText{
|
||||
id:end_time
|
||||
anchors{
|
||||
@ -132,7 +131,6 @@ Rectangle {
|
||||
text: formatDuration(mediaplayer.duration)
|
||||
}
|
||||
|
||||
|
||||
Row{
|
||||
spacing: 10
|
||||
anchors{
|
||||
|
@ -227,16 +227,6 @@ Item {
|
||||
leftMargin: 6
|
||||
rightMargin: 6
|
||||
}
|
||||
Rectangle{
|
||||
width: 3
|
||||
height: 18
|
||||
radius: 1.5
|
||||
color: FluTheme.primaryColor.dark
|
||||
visible: nav_list.currentIndex === position && type===0
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
MouseArea{
|
||||
id:item_mouse
|
||||
hoverEnabled: true
|
||||
@ -468,8 +458,21 @@ Item {
|
||||
stackIndex.push(currentIndex)
|
||||
}
|
||||
}
|
||||
highlight: Item{
|
||||
clip: true
|
||||
Rectangle{
|
||||
height: 18
|
||||
radius: 1.5
|
||||
color: FluTheme.primaryColor.dark
|
||||
width: 3
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
leftMargin: 6
|
||||
}
|
||||
}
|
||||
}
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
|
||||
model:handleItems()
|
||||
delegate: Loader{
|
||||
property var model: modelData
|
||||
|
104
src/controls/FluPivot.qml
Normal file
104
src/controls/FluPivot.qml
Normal file
@ -0,0 +1,104 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import FluentUI
|
||||
|
||||
Item {
|
||||
|
||||
|
||||
id:control
|
||||
default property alias content: d.children
|
||||
property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
|
||||
property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black
|
||||
|
||||
|
||||
width: 400
|
||||
height: 300
|
||||
|
||||
FluObject{
|
||||
id:d
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
for(var i =0 ;i <d.children.length;i++){
|
||||
console.debug(d.children[i].title)
|
||||
}
|
||||
}
|
||||
|
||||
ListView{
|
||||
id:nav_list
|
||||
height: 40
|
||||
width: control.width
|
||||
model:d.children
|
||||
clip: true
|
||||
spacing: 20
|
||||
interactive: false
|
||||
orientation:ListView.Horizontal
|
||||
highlight: Item{
|
||||
clip: true
|
||||
Rectangle{
|
||||
height: 3
|
||||
radius: 1.5
|
||||
color: FluTheme.primaryColor.dark
|
||||
width: nav_list.currentItem ? nav_list.currentItem.width : 0
|
||||
y:37
|
||||
Behavior on width {
|
||||
NumberAnimation{
|
||||
duration: 150
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
delegate: Button{
|
||||
id:item_button
|
||||
width: item_title.width
|
||||
height: nav_list.height
|
||||
background:Item{
|
||||
}
|
||||
contentItem: Item{
|
||||
FluText {
|
||||
id:item_title
|
||||
fontStyle: FluText.Title
|
||||
font.bold: false
|
||||
text: modelData.title
|
||||
anchors.centerIn: parent
|
||||
color: {
|
||||
if(item_button.hovered)
|
||||
return hoverColor
|
||||
return normalColor
|
||||
}
|
||||
}
|
||||
transitions: Transition {
|
||||
NumberAnimation{
|
||||
duration: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
onClicked: {
|
||||
nav_list.currentIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item{
|
||||
id:container
|
||||
anchors{
|
||||
top: nav_list.bottom
|
||||
topMargin: 10
|
||||
left: parent.left
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
}
|
||||
|
||||
Repeater{
|
||||
model:d.children
|
||||
Loader{
|
||||
property var argument: modelData.argument
|
||||
anchors.fill: parent
|
||||
sourceComponent: modelData.contentItem
|
||||
visible: nav_list.currentIndex === index
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
8
src/controls/FluPivotItem.qml
Normal file
8
src/controls/FluPivotItem.qml
Normal file
@ -0,0 +1,8 @@
|
||||
import QtQuick
|
||||
import FluentUI
|
||||
|
||||
QtObject {
|
||||
property string title
|
||||
property Component contentItem
|
||||
property var argument
|
||||
}
|
@ -62,5 +62,7 @@
|
||||
<file>controls/FluTextBoxMenu.qml</file>
|
||||
<file>controls/FluMultilineTextBox.qml</file>
|
||||
<file>controls/FluFlipView.qml</file>
|
||||
<file>controls/FluPivot.qml</file>
|
||||
<file>controls/FluPivotItem.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
Loading…
Reference in New Issue
Block a user