FluentUI/example/T_Typography.qml

89 lines
2.1 KiB
QML
Raw Normal View History

2023-03-25 13:35:21 +08:00
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15
import FluentUI 1.0
2023-02-26 23:47:07 +08:00
2023-03-10 18:08:32 +08:00
FluContentPage {
2023-03-09 23:11:59 +08:00
2023-03-10 18:08:32 +08:00
title: "Typography"
2023-03-09 23:11:59 +08:00
property int textSize: 13
2023-03-25 20:45:33 +08:00
Component.onCompleted: {
slider.seek(31)
}
2023-03-06 18:08:01 +08:00
ScrollView{
clip: true
width: parent.width
contentWidth: parent.width
ColumnLayout{
2023-03-09 23:11:59 +08:00
spacing: 0
2023-03-06 18:08:01 +08:00
FluText{
text:"Display"
2023-03-07 00:05:27 +08:00
Layout.topMargin: 20
2023-03-09 23:11:59 +08:00
padding: 0
pixelSize: textSize
2023-03-06 18:08:01 +08:00
fontStyle: FluText.Display
}
FluText{
text:"Title Large"
2023-03-09 23:11:59 +08:00
padding: 0
pixelSize: textSize
2023-03-06 18:08:01 +08:00
fontStyle: FluText.TitleLarge
}
FluText{
text:"Title"
2023-03-09 23:11:59 +08:00
padding: 0
pixelSize: textSize
2023-03-06 18:08:01 +08:00
fontStyle: FluText.Title
}
FluText{
text:"Subtitle"
2023-03-09 23:11:59 +08:00
padding: 0
pixelSize: textSize
2023-03-06 18:08:01 +08:00
fontStyle: FluText.Subtitle
}
FluText{
text:"Body Large"
2023-03-09 23:11:59 +08:00
padding: 0
pixelSize: textSize
2023-03-06 18:08:01 +08:00
fontStyle: FluText.BodyLarge
}
FluText{
text:"Body Strong"
2023-03-09 23:11:59 +08:00
padding: 0
pixelSize: textSize
2023-03-06 18:08:01 +08:00
fontStyle: FluText.BodyStrong
}
FluText{
text:"Body"
2023-03-09 23:11:59 +08:00
padding: 0
pixelSize: textSize
2023-03-06 18:08:01 +08:00
fontStyle: FluText.Body
}
FluText{
text:"Caption"
2023-03-09 23:11:59 +08:00
padding: 0
pixelSize: textSize
2023-03-06 18:08:01 +08:00
fontStyle: FluText.Caption
}
2023-02-26 23:47:07 +08:00
}
}
2023-03-09 23:11:59 +08:00
FluSlider{
2023-03-25 20:45:33 +08:00
id:slider
2023-03-09 23:11:59 +08:00
orientation:FluSlider.Vertical
anchors{
right: parent.right
2023-03-25 20:45:33 +08:00
rightMargin: 45
2023-03-09 23:11:59 +08:00
top: parent.top
topMargin: 30
}
onValueChanged:{
2023-03-10 18:08:32 +08:00
textSize = value/100*16+8
2023-03-09 23:11:59 +08:00
}
}
2023-02-26 23:47:07 +08:00
}