FluentUI/example/qml/page/T_Timeline.qml

171 lines
5.1 KiB
QML
Raw Normal View History

2023-08-10 18:29:43 +08:00
import QtQuick
import QtQuick.Layouts
import QtQuick.Window
import QtQuick.Controls
import FluentUI
import "qrc:///example/qml/component"
FluScrollablePage{
title:"Timeline"
2023-08-10 20:05:38 +08:00
Component{
id:com_dot
Rectangle{
width: 16
height: 16
radius: 8
border.width: 4
2023-08-14 18:10:37 +08:00
border.color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
2023-08-10 20:05:38 +08:00
}
}
2023-08-10 18:29:43 +08:00
2023-08-11 14:31:23 +08:00
Component{
id:com_lable
FluText{
wrapMode: Text.WrapAnywhere
2023-08-14 18:10:37 +08:00
font.bold: true
2023-08-12 11:01:40 +08:00
horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
2023-08-11 14:31:23 +08:00
text: modelData.lable
2023-08-14 18:10:37 +08:00
color: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
2023-08-11 14:31:23 +08:00
MouseArea{
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
showSuccess(modelData.lable)
}
}
}
}
Component{
id:com_text
FluText{
wrapMode: Text.WrapAnywhere
2023-08-12 11:01:40 +08:00
horizontalAlignment: isRight ? Qt.AlignRight : Qt.AlignLeft
2023-08-11 14:31:23 +08:00
text: modelData.text
font.bold: true
2023-08-14 18:10:37 +08:00
linkColor: FluTheme.dark ? FluColors.Teal.lighter : FluColors.Teal.dark
onLinkActivated:
(link)=> {
Qt.openUrlExternally(link)
}
onLinkHovered:
(link)=> {
if(link === ""){
FluTools.restoreOverrideCursor()
}else{
FluTools.setOverrideCursor(Qt.PointingHandCursor)
}
2023-08-11 14:31:23 +08:00
}
}
}
2023-08-10 18:29:43 +08:00
2023-08-10 20:05:38 +08:00
ListModel{
id:list_model
ListElement{
2023-08-11 14:31:23 +08:00
lable:"2013-09-01"
2023-08-21 23:06:40 +08:00
text:'&nbsp;<img src="qrc:/example/res/image/image_1.jpg" align="top" width="144" height="102.4">&nbsp;考上中国皮城大学,杰斯武器工坊专业'
2023-08-10 20:05:38 +08:00
}
ListElement{
2023-08-11 14:31:23 +08:00
lable:"2017-07-01"
2023-08-15 11:05:01 +08:00
text:"大学毕业在寝室打了4年LOL没想到毕业还要找工作瞬间蒙蔽害"
2023-08-11 14:31:23 +08:00
}
ListElement{
lable:"2017-09-01"
2023-08-15 11:05:01 +08:00
text:"开始找工作,毕业即失业!回农村老家躺平,继承三亩良田"
2023-08-10 20:05:38 +08:00
}
ListElement{
2023-08-11 14:31:23 +08:00
lable:"2018-02-01"
text:"玩了一年没钱,惨,出去找工作上班"
}
ListElement{
lable:"2018-03-01"
text:"找到一份Android外包开发岗位开发了一个Android应用满满成就感前端、服务端、Flutter也都懂一丢丢什么都会什么都不精通钱途无望"
}
ListElement{
lable:"2020-06-01"
text:"由于某个项目紧急临时加入Qt项目组就因为大学学了点C++),本来是想进去打个酱油,到后面竟然成开发主力,坑啊"
2023-08-10 20:05:38 +08:00
}
ListElement{
2023-08-11 14:31:23 +08:00
lable:"2022-08-01"
2023-08-15 11:05:01 +08:00
text:"额,被老板卖到甲方公司,走时老板还问我想不想去,我说:'哪里工资高就去哪里',老板:'无语'"
2023-08-11 14:31:23 +08:00
}
ListElement{
lable:"2023-02-28"
text:"开发FluentUI组件库"
2023-08-10 20:05:38 +08:00
}
2023-08-14 18:10:37 +08:00
ListElement{
2023-08-21 23:06:40 +08:00
lable:"2023-03-28"
2023-08-14 18:10:37 +08:00
text:'将FluentUI源码开源到<a href="https://github.com/zhuzichu520/FluentUI">github</a>,并发布视频到<a href="https://www.bilibili.com/video/BV1mg4y1M71w">B站</a>'
lableDelegate:()=>com_lable
textDelegate:()=>com_text
dot:()=>com_dot
}
2023-08-10 20:05:38 +08:00
}
RowLayout{
spacing: 20
Layout.topMargin: 20
FluTextBox{
id:text_box
text:"Technical testing 2015-09-01"
}
FluFilledButton{
text:"Append"
onClicked: {
list_model.append({text:text_box.text})
}
}
FluFilledButton{
text:"clear"
onClicked: {
list_model.clear()
}
}
}
2023-08-11 14:31:23 +08:00
RowLayout{
2023-08-10 20:05:38 +08:00
Layout.topMargin: 10
2023-08-11 14:31:23 +08:00
FluText{
text:"mode:"
2023-08-10 20:05:38 +08:00
}
2023-08-11 14:31:23 +08:00
FluDropDownButton{
id:btn_mode
Layout.preferredWidth: 100
text:"Alternate"
FluMenuItem{
text:"Left"
onClicked: {
btn_mode.text = text
time_line.mode = FluTimelineType.Left
}
}
FluMenuItem{
text:"Right"
onClicked: {
btn_mode.text = text
time_line.mode = FluTimelineType.Right
}
}
FluMenuItem{
text:"Alternate"
onClicked: {
btn_mode.text = text
time_line.mode = FluTimelineType.Alternate
}
}
}
}
2023-08-10 20:05:38 +08:00
2023-08-11 14:31:23 +08:00
FluTimeline{
id:time_line
Layout.fillWidth: true
2023-08-14 18:10:37 +08:00
Layout.topMargin: 20
Layout.bottomMargin: 20
2023-08-11 14:31:23 +08:00
mode: FluTimelineType.Alternate
model:list_model
2023-08-10 20:05:38 +08:00
}
2023-08-10 18:29:43 +08:00
}