This commit is contained in:
zhuzihcu 2023-03-29 18:10:34 +08:00
parent 76ed63eaf0
commit ff4ec71379
105 changed files with 355 additions and 17 deletions

19
example/T_CheckBox.qml Normal file
View File

@ -0,0 +1,19 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import FluentUI 1.0
FluScrollablePage{
title:"CheckBox"
leftPadding:10
rightPadding:10
bottomPadding:20
FluCheckBox{
Layout.topMargin: 20
Layout.leftMargin: 10
Layout.bottomMargin: 20
}
}

View File

@ -16,7 +16,8 @@ FluScrollablePage{
ListElement{
icon:"qrc:/res/image/ic_home_github.png"
title:"FluentUI GitHub"
desc:"The latest Windows nativecontrols and styles for your applications."
desc:"The latest FluentUI controls and styles for your applications."
url:"https://github.com/zhuzichu520/FluentUI"
}
}
@ -33,8 +34,8 @@ FluScrollablePage{
Rectangle{
anchors.fill: parent
gradient: Gradient{
GradientStop { position: 0.8; color: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
GradientStop { position: 1.0; color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
GradientStop { position: 0.8; color: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(1,1,1,0) }
GradientStop { position: 1.0; color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1) }
}
}
FluText{
@ -43,7 +44,7 @@ FluScrollablePage{
anchors{
top: parent.top
left: parent.left
topMargin: 60
topMargin: 20
leftMargin: 20
}
}
@ -56,7 +57,7 @@ FluScrollablePage{
}
orientation: ListView.Horizontal
boundsBehavior: ListView.StopAtBounds
height: 200
height: 240
model: model_header
header: Item{height: 10;width: 10}
footer: Item{height: 10;width: 10}
@ -65,18 +66,64 @@ FluScrollablePage{
}
clip: false
delegate:Item{
width: 180
height: 200
width: 220
height: 240
FluArea{
radius: 8
width: 160
height: 180
width: 200
height: 220
anchors.centerIn: parent
color:{
if(item_mouse.containsMouse){
return FluTheme.dark ? Qt.lighter(Qt.rgba(0,0,0,1),1.05) : Qt.darker(Qt.rgba(1,1,1,1),1.05)
Rectangle{
anchors.fill: parent
radius: 8
color:{
if(FluTheme.dark){
if(item_mouse.containsMouse){
return Qt.rgba(1,1,1,0.03)
}
return Qt.rgba(0,0,0,0)
}else{
if(item_mouse.containsMouse){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
}
}
ColumnLayout{
Image {
Layout.topMargin: 20
Layout.leftMargin: 20
Layout.preferredWidth: 50
Layout.preferredHeight: 50
source: model.icon
}
FluText{
text: model.title
fontStyle: FluText.BodyLarge
Layout.topMargin: 20
Layout.leftMargin: 20
}
FluText{
text: model.desc
Layout.topMargin: 5
Layout.preferredWidth: 160
Layout.leftMargin: 20
color: FluColors.Grey100
font.pixelSize: 12
wrapMode: Text.WrapAnywhere
}
}
FluIcon{
iconSource: FluentIcons.OpenInNewWindow
iconSize: 15
anchors{
bottom: parent.bottom
right: parent.right
rightMargin: 10
bottomMargin: 10
}
return FluTheme.dark ? Qt.rgba(0,0,0,0.98) : Qt.rgba(1,1,1,0.98)
}
MouseArea{
id:item_mouse
@ -86,13 +133,163 @@ FluScrollablePage{
if (wheel.angleDelta.y > 0) scrollbar_header.decrease()
else scrollbar_header.increase()
}
onClicked: {
Qt.openUrlExternally(model.url)
}
}
}
}
}
}
ListModel{
id:model_added
ListElement{
title:"TabView"
icon:"qrc:/res/image/control/TabView.png"
desc:"A control that displays a collection of tabs thatcan be used to display several documents."
}
ListElement{
title:"MediaPlayer"
icon:"qrc:/res/image/control/MediaPlayerElement.png"
desc:"A control to display video and image content"
}
}
ListModel{
id:model_update
ListElement{
title:"Buttons"
icon:"qrc:/res/image/control/Button.png"
desc:"A control that responds to user input and raisesa Click event."
}
ListElement{
title:"InfoBar"
icon:"qrc:/res/image/control/InfoBar.png"
desc:"An inline message to display app-wide statuschange information."
}
ListElement{
title:"Slider"
icon:"qrc:/res/image/control/Slider.png"
desc:"A control that lets the user select from a rangeof values by moving a Thumb control along atrack."
}
ListElement{
title:"CheckBox"
icon:"qrc:/res/image/control/Checkbox.png"
desc:"A control that a user can select or clear."
}
}
Component{
id:com_item
Item{
width: 320
height: 120
FluArea{
radius: 8
width: 300
height: 100
anchors.centerIn: parent
Rectangle{
anchors.fill: parent
radius: 8
color:{
if(FluTheme.dark){
if(item_mouse.containsMouse){
return Qt.rgba(1,1,1,0.03)
}
return Qt.rgba(0,0,0,0)
}else{
if(item_mouse.containsMouse){
return Qt.rgba(0,0,0,0.03)
}
return Qt.rgba(0,0,0,0)
}
}
}
Image{
id:item_icon
height: 40
width: 40
source: model.icon
anchors{
left: parent.left
leftMargin: 20
verticalCenter: parent.verticalCenter
}
}
FluText{
id:item_title
text:model.title
fontStyle: FluText.Subtitle
anchors{
left: item_icon.right
leftMargin: 20
top: item_icon.top
}
}
FluText{
id:item_desc
text:model.desc
color:FluColors.Grey100
wrapMode: Text.WrapAnywhere
elide: Text.ElideRight
maximumLineCount: 2
anchors{
left: item_title.left
right: parent.right
rightMargin: 20
top: item_title.bottom
topMargin: 5
}
}
MouseArea{
id:item_mouse
anchors.fill: parent
hoverEnabled: true
onClicked: {
rootwindow.startPageByTitle(model.title)
}
}
}
}
}
FluText{
text: "Recently added samples"
fontStyle: FluText.TitleLarge
Layout.topMargin: 20
Layout.leftMargin: 20
}
GridView{
Layout.fillWidth: true
implicitHeight: contentHeight
cellHeight: 120
cellWidth: 320
boundsBehavior: GridView.StopAtBounds
model:model_added
delegate: com_item
}
FluText{
text: "Recently updated samples"
fontStyle: FluText.TitleLarge
Layout.topMargin: 20
Layout.leftMargin: 20
}
GridView{
Layout.fillWidth: true
implicitHeight: contentHeight
cellHeight: 120
cellWidth: 320
boundsBehavior: GridView.StopAtBounds
model: model_update
delegate: com_item
}
}

View File

@ -2,7 +2,6 @@
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
FluScrollablePage{

View File

@ -49,6 +49,13 @@ FluWindow {
}
}
FluPaneItem{
title:"CheckBox"
onTap:{
nav_view.push("qrc:/T_CheckBox.qml")
}
}
FluPaneItem{
title:"ToggleSwitch"
onTap:{
@ -259,5 +266,9 @@ FluWindow {
}
}
function startPageByTitle(title){
console.debug(title)
nav_view.startPageByTitle(title)
}
}

View File

@ -50,5 +50,104 @@
<file>T_Home.qml</file>
<file>res/image/bg_home_header.png</file>
<file>res/image/ic_home_github.png</file>
<file>res/image/control/Acrylic.png</file>
<file>res/image/control/AnimatedIcon.png</file>
<file>res/image/control/AnimatedVisualPlayer.png</file>
<file>res/image/control/AnimationInterop.png</file>
<file>res/image/control/AppBarButton.png</file>
<file>res/image/control/AppBarSeparator.png</file>
<file>res/image/control/AppBarToggleButton.png</file>
<file>res/image/control/AutomationProperties.png</file>
<file>res/image/control/AutoSuggestBox.png</file>
<file>res/image/control/Border.png</file>
<file>res/image/control/BreadcrumbBar.png</file>
<file>res/image/control/Button.png</file>
<file>res/image/control/CalendarDatePicker.png</file>
<file>res/image/control/CalendarView.png</file>
<file>res/image/control/Canvas.png</file>
<file>res/image/control/Checkbox.png</file>
<file>res/image/control/Clipboard.png</file>
<file>res/image/control/ColorPaletteResources.png</file>
<file>res/image/control/ColorPicker.png</file>
<file>res/image/control/ComboBox.png</file>
<file>res/image/control/CommandBar.png</file>
<file>res/image/control/CommandBarFlyout.png</file>
<file>res/image/control/CompactSizing.png</file>
<file>res/image/control/ConnectedAnimation.png</file>
<file>res/image/control/ContentDialog.png</file>
<file>res/image/control/CreateMultipleWindows.png</file>
<file>res/image/control/DataGrid.png</file>
<file>res/image/control/DatePicker.png</file>
<file>res/image/control/DropDownButton.png</file>
<file>res/image/control/EasingFunction.png</file>
<file>res/image/control/Expander.png</file>
<file>res/image/control/FilePicker.png</file>
<file>res/image/control/FlipView.png</file>
<file>res/image/control/Flyout.png</file>
<file>res/image/control/Grid.png</file>
<file>res/image/control/GridView.png</file>
<file>res/image/control/HyperlinkButton.png</file>
<file>res/image/control/IconElement.png</file>
<file>res/image/control/Image.png</file>
<file>res/image/control/ImplicitTransition.png</file>
<file>res/image/control/InfoBadge.png</file>
<file>res/image/control/InfoBar.png</file>
<file>res/image/control/InkCanvas.png</file>
<file>res/image/control/InkToolbar.png</file>
<file>res/image/control/InputValidation.png</file>
<file>res/image/control/ItemsRepeater.png</file>
<file>res/image/control/Line.png</file>
<file>res/image/control/ListBox.png</file>
<file>res/image/control/ListView.png</file>
<file>res/image/control/MediaPlayerElement.png</file>
<file>res/image/control/MenuBar.png</file>
<file>res/image/control/MenuFlyout.png</file>
<file>res/image/control/NavigationView.png</file>
<file>res/image/control/NumberBox.png</file>
<file>res/image/control/PageTransition.png</file>
<file>res/image/control/ParallaxView.png</file>
<file>res/image/control/PasswordBox.png</file>
<file>res/image/control/PersonPicture.png</file>
<file>res/image/control/PipsPager.png</file>
<file>res/image/control/Pivot.png</file>
<file>res/image/control/ProgressBar.png</file>
<file>res/image/control/ProgressRing.png</file>
<file>res/image/control/PullToRefresh.png</file>
<file>res/image/control/RadialGradientBrush.png</file>
<file>res/image/control/RadioButton.png</file>
<file>res/image/control/RadioButtons.png</file>
<file>res/image/control/RatingControl.png</file>
<file>res/image/control/RelativePanel.png</file>
<file>res/image/control/RepeatButton.png</file>
<file>res/image/control/RevealFocus.png</file>
<file>res/image/control/RichEditBox.png</file>
<file>res/image/control/RichTextBlock.png</file>
<file>res/image/control/ScrollViewer.png</file>
<file>res/image/control/SemanticZoom.png</file>
<file>res/image/control/Shape.png</file>
<file>res/image/control/Slider.png</file>
<file>res/image/control/Sound.png</file>
<file>res/image/control/SplitButton.png</file>
<file>res/image/control/SplitView.png</file>
<file>res/image/control/StackPanel.png</file>
<file>res/image/control/StandardUICommand.png</file>
<file>res/image/control/SwipeControl.png</file>
<file>res/image/control/TabView.png</file>
<file>res/image/control/TeachingTip.png</file>
<file>res/image/control/TextBlock.png</file>
<file>res/image/control/TextBox.png</file>
<file>res/image/control/ThemeTransition.png</file>
<file>res/image/control/TimePicker.png</file>
<file>res/image/control/TitleBar.png</file>
<file>res/image/control/ToggleButton.png</file>
<file>res/image/control/ToggleSplitButton.png</file>
<file>res/image/control/ToggleSwitch.png</file>
<file>res/image/control/ToolTip.png</file>
<file>res/image/control/TreeView.png</file>
<file>res/image/control/VariableSizedWrapGrid.png</file>
<file>res/image/control/Viewbox.png</file>
<file>res/image/control/WebView.png</file>
<file>res/image/control/XamlUICommand.png</file>
<file>T_CheckBox.qml</file>
</qresource>
</RCC>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Some files were not shown because too many files have changed in this diff Show More